/* ========================================================================== Nizam design tokens -------------------------------------------------------------------------- Direction: "Ledger" — near-monochrome slate, flat, dense, Nizam blue accent. Approved 2026-08-23. Two layers: 1. PRIMITIVES raw values. Never referenced from a component. 2. SEMANTIC role-named. This is the only layer components may use. Every colour below is verified against WCAG AA (4.5:1) on the surface it is used on; the ratio is noted where it is not obvious. Loaded standalone by the /ui-lab preview routes. It is deliberately NOT yet wired into resources/views/layouts/app.blade.php — that is a Gate 3 change. ========================================================================== */ /* -------------------------------------------------------------------------- Almarai ships in public/fonts/Almarai. These @font-face rules MUST live here beside the tokens: --nz-font names Almarai, and any sheet that reads the tokens needs the family declared or the font silently falls back to system-ui. That bug was live until it was caught in a screenshot. -------------------------------------------------------------------------- */ @font-face{font-family:"Almarai";font-style:normal;font-weight:300;font-display:swap; src:url("/fonts/Almarai/Almarai-Light.ttf") format("truetype");} @font-face{font-family:"Almarai";font-style:normal;font-weight:400;font-display:swap; src:url("/fonts/Almarai/Almarai-Regular.ttf") format("truetype");} @font-face{font-family:"Almarai";font-style:normal;font-weight:700;font-display:swap; src:url("/fonts/Almarai/Almarai-Bold.ttf") format("truetype");} @font-face{font-family:"Almarai";font-style:normal;font-weight:800;font-display:swap; src:url("/fonts/Almarai/Almarai-ExtraBold.ttf") format("truetype");} :root { /* ── 1. PRIMITIVES ─────────────────────────────────────────────────── */ /* Nizam blue — the brand hue. The only decorative colour in the system. */ --nz-blue-50: #EFF5FF; --nz-blue-100: #DBE7FE; --nz-blue-200: #BFD6FB; --nz-blue-500: #3B82F6; --nz-blue-600: #2563EB; /* brand */ --nz-blue-700: #1D4ED8; /* pressed / hover */ --nz-blue-900: #1E3A8A; /* Slate — carries the entire interface. */ --nz-slate-25: #F7F8F9; --nz-slate-50: #EFF1F3; --nz-slate-100: #E4E7EA; --nz-slate-200: #DFE3E7; --nz-slate-300: #C3CAD2; --nz-slate-500: #5A6673; --nz-slate-700: #334155; --nz-slate-900: #0F172A; /* Status hues. Reserved for state — never used decoratively. */ --nz-green-50: #E3F2EC; --nz-green-200: #A9D6C5; --nz-green-800: #065F46; --nz-red-50: #FBE9E7; --nz-red-200: #EEBDB2; --nz-red-800: #9A2C14; --nz-amber-50: #FDF3E3; --nz-amber-200: #F0D9AC; --nz-amber-800: #8A5A08; --nz-white: #FFFFFF; /* ── 2. SEMANTIC ───────────────────────────────────────────────────── */ /* Surfaces */ --nz-bg: var(--nz-slate-25); --nz-surface: var(--nz-white); --nz-surface-sunk: var(--nz-slate-50); /* table headers, inert strips */ /* Text — on --nz-surface */ --nz-ink: var(--nz-slate-900); /* 17.85:1 */ --nz-ink-2: var(--nz-slate-500); /* 5.86:1 */ /* NOTE: ink-3 measures 4.37:1 on --nz-surface-sunk, under the floor. Use ink-2 for text that sits on a sunk surface. */ --nz-ink-3: #67717E; /* 4.95:1 on surface, 4.66:1 on --nz-bg. #79838F was tried first and fails AA (3.85:1). */ /* Hairlines. This system separates with lines, not shadows. */ --nz-line: var(--nz-slate-200); /* 1.29:1 - decorative rules only */ --nz-line-strong: var(--nz-slate-300); /* 1.65:1 - panel and dropdown edges */ /* The boundary of a form control is different from a decorative rule. WCAG 1.4.11 asks 3:1 for it, because on a white card inside a white panel that border is the only thing telling a low-vision user where the field is. --nz-line-strong measures 1.65:1 and is not enough for that job. 3.38:1 on the surface, 3.18:1 on the page ground. */ --nz-field-edge: #818D9B; /* Search inputs are filled rather than white, so they read as "type here to narrow this" and not as another data field on a form full of them. Two knock-on values, because a darker ground moves both floors. The placeholder at --nz-ink-3 measures 4.00:1 here, under the 4.5:1 text floor, so it takes --nz-ink-2. And --nz-field-edge measures 2.72:1 here, under the 3:1 WCAG 1.4.11 asks of a control's boundary, so the edge takes --nz-ink-3 (4.00:1). Both are checked in the browser, not assumed. */ --nz-search-bg: #e7e7e7; /* The one exception to "lines, not shadows": things that float above the page - modals, dropdowns, popovers, the guided tour - need to read as detached, and a hairline alone cannot say that. */ --nz-shadow-lg: 0 8px 24px rgba(15, 23, 42, .12); --nz-shadow-md: 0 2px 8px rgba(15, 23, 42, .08); /* Brand */ --nz-brand: var(--nz-blue-600); /* 5.17:1 on surface */ --nz-brand-hover: var(--nz-blue-700); /* 6.70:1 */ --nz-brand-soft: var(--nz-blue-50); /* active nav, selected row */ --nz-brand-edge: var(--nz-blue-200); --nz-on-brand: var(--nz-white); /* 5.17:1 on --nz-brand */ /* Focus. Never remove the ring; this is the one place we allow a glow. */ --nz-focus: var(--nz-blue-600); --nz-focus-ring: 0 0 0 3px rgba(37, 99, 235, .32); /* Status. Always rendered as icon + text + colour, never colour alone. */ --nz-paid-bg: var(--nz-green-50); --nz-paid-fg: var(--nz-green-800); /* 6.65:1 */ --nz-paid-edge: var(--nz-green-200); --nz-partial-bg: #EBEEF1; --nz-partial-fg: var(--nz-slate-700); /* 8.89:1 */ --nz-partial-edge: #C7CED6; --nz-due-bg: var(--nz-red-50); --nz-due-fg: var(--nz-red-800); /* 6.53:1 */ --nz-due-edge: var(--nz-red-200); --nz-overdue-bg: var(--nz-amber-50); --nz-overdue-fg: var(--nz-amber-800); /* 5.39:1 */ --nz-overdue-edge: var(--nz-amber-200); /* ── Typography ────────────────────────────────────────────────────── */ /* Almarai already ships in public/fonts/Almarai — no new webfont request. */ --nz-font: "Almarai", "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif; /* Type scale. Modular, no arbitrary sizes. */ --nz-text-xs: 12px; --nz-text-sm: 13px; --nz-text-md: 14px; /* table body */ --nz-text-base:16px; /* form controls, paragraph */ --nz-text-lg: 18px; --nz-text-xl: 21px; --nz-text-2xl: 26px; /* Arabic needs more leading than Bootstrap's Latin defaults, or the diacritics clip against the row above. */ --nz-lh-tight: 1.35; --nz-lh-body: 1.7; --nz-fw-regular: 400; --nz-fw-bold: 700; /* Almarai on disk: Light 300, Regular 400, Bold 700, ExtraBold 800. There is no 500 or 600 — do not ask for one, it will synthesise badly. */ /* Money and quantity columns must align digit-for-digit. */ --nz-num: tabular-nums; /* ── Spacing — dense scale, tuned for data tables ──────────────────── */ --nz-space-1: 4px; --nz-space-2: 8px; --nz-space-3: 12px; --nz-space-4: 16px; --nz-space-5: 20px; --nz-space-6: 24px; --nz-space-8: 32px; --nz-space-10:40px; --nz-row-pad-y: 7px; /* the density decision, in one place */ --nz-cell-pad-x: 12px; /* ── Radius — flat, near-square ────────────────────────────────────── */ --nz-radius-sm: 2px; --nz-radius: 3px; --nz-radius-lg: 4px; /* ── Motion — subtle only ──────────────────────────────────────────── */ --nz-transition: 160ms cubic-bezier(.4, 0, .2, 1); /* ── Touch targets. Tablet POS: nothing interactive below this. ─────── */ --nz-tap-min: 44px; } /* Density comfortable mode — opt in per screen with class="nz-comfortable". The POS on a tablet needs bigger targets than the sells list on a desktop. */ .nz-comfortable { --nz-row-pad-y: 12px; --nz-text-md: 15px; } @media (prefers-reduced-motion: reduce) { :root { --nz-transition: 0ms; } }