/* * mzyan design tokens * * One source of truth for colour, type, space, elevation and motion. Screens compose * from these; no component invents its own values. * * Everything directional uses CSS logical properties (inline/block rather than left/right), * so switching to Arabic in phase 5 is `dir="rtl"` on and nothing else. */ :root { /* ---- Palette ------------------------------------------------------------- Petrol as the primary: serious, financial, and distinct from the blue every other invoicing tool uses. Brass as the single accent, reserved for value — totals, paid states, the one thing on screen that matters most. */ --petrol-50: #EFF6F7; --petrol-100: #D6E8EB; --petrol-200: #AFD2D8; --petrol-300: #7FB4BE; --petrol-400: #4B8F9D; --petrol-500: #2A7183; --petrol-600: #0D5A6B; --petrol-700: #0A4854; --petrol-800: #083743; --petrol-900: #062A34; --brass-50: #FBF6EC; --brass-100: #F4E8D0; --brass-200: #E7CFA0; --brass-300: #D6B26B; --brass-400: #C0913C; --brass-500: #9A6516; --brass-600: #7E520F; --slate-0: #FFFFFF; --slate-25: #FBFCFD; --slate-50: #F5F7F9; --slate-100: #EDF0F4; --slate-200: #DDE3EA; --slate-300: #C3CCD7; --slate-400: #94A1B1; --slate-500: #6B7A8C; --slate-600: #4D5A6B; --slate-700: #38424F; --slate-800: #232C37; --slate-900: #141A22; --slate-950: #0B0F14; --green-500: #256B4E; --green-100: #DDF0E6; --amber-500: #92650C; --amber-100: #FBEFD3; --red-500: #A33330; --red-100: #F9E5E4; /* ---- Semantic roles (light) --------------------------------------------- */ --ground: var(--slate-50); --surface: var(--slate-0); --surface-sunk: var(--slate-100); --surface-raised:var(--slate-0); --ink: var(--slate-900); --ink-muted: var(--slate-600); --ink-subtle: var(--slate-500); --ink-inverse: var(--slate-0); --line: var(--slate-200); --line-strong: var(--slate-300); --accent: var(--petrol-600); --accent-hover: var(--petrol-700); --accent-soft: var(--petrol-50); --accent-ink: var(--slate-0); --value: var(--brass-500); --value-soft: var(--brass-50); --positive: var(--green-500); --positive-soft: var(--green-100); --caution: var(--amber-500); --caution-soft: var(--amber-100); --critical: var(--red-500); --critical-soft: var(--red-100); --focus-ring: var(--petrol-400); /* ---- Type ---------------------------------------------------------------- A system stack: it renders on the first paint with no network request and no layout shift, which is most of the sub-1s budget won before a byte is fetched. */ --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Noto Sans Arabic", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace; /* Fluid scale, 1.200 minor third. Numbers use tabular figures via .numeric. */ --text-2xs: 0.6875rem; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base:0.9375rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: clamp(2.5rem, 1.8rem + 2.2vw, 3.5rem); --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal:1.55; --leading-relaxed:1.7; --weight-normal: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; --tracking-tight: -0.015em; --tracking-normal: 0; --tracking-wide: 0.04em; /* ---- Space — 4px base --------------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* ---- Radius, elevation, motion ------------------------------------------ */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 999px; --shadow-xs: 0 1px 2px rgba(11, 15, 20, 0.05); --shadow-sm: 0 1px 2px rgba(11, 15, 20, 0.06), 0 2px 6px -2px rgba(11, 15, 20, 0.08); --shadow-md: 0 2px 4px rgba(11, 15, 20, 0.05), 0 8px 24px -12px rgba(11, 15, 20, 0.18); --shadow-lg: 0 4px 8px rgba(11, 15, 20, 0.06), 0 20px 48px -20px rgba(11, 15, 20, 0.24); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; /* ---- Layout ------------------------------------------------------------- */ --measure: 68ch; --container: 78rem; --sidebar-width: 15.5rem; --header-height: 3.75rem; } /* * Dark theme. Defined for the explicit toggle and for the system preference, so a * viewer who has never chosen still gets the right one. */ :root[data-theme="dark"], :root:not([data-theme="light"]) { color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --ground: var(--slate-950); --surface: var(--slate-900); --surface-sunk: #10161D; --surface-raised: var(--slate-800); --ink: #E9EDF2; --ink-muted: #A3AFBD; --ink-subtle: #7A8797; --ink-inverse: var(--slate-950); --line: #26303B; --line-strong: #35414F; --accent: var(--petrol-300); --accent-hover: var(--petrol-200); --accent-soft: #0D2A32; --accent-ink: var(--slate-950); --value: var(--brass-300); --value-soft: #2E2411; --positive: #6FCFA1; --positive-soft: #10301F; --caution: #E0B357; --caution-soft: #322512; --critical: #E88B87; --critical-soft: #33191A; --focus-ring: var(--petrol-300); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 6px -2px rgba(0, 0, 0, 0.5); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.45), 0 8px 24px -12px rgba(0, 0, 0, 0.6); --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.5), 0 20px 48px -20px rgba(0, 0, 0, 0.7); } } :root[data-theme="dark"] { color-scheme: dark; --ground: var(--slate-950); --surface: var(--slate-900); --surface-sunk: #10161D; --surface-raised: var(--slate-800); --ink: #E9EDF2; --ink-muted: #A3AFBD; --ink-subtle: #7A8797; --ink-inverse: var(--slate-950); --line: #26303B; --line-strong: #35414F; --accent: var(--petrol-300); --accent-hover: var(--petrol-200); --accent-soft: #0D2A32; --accent-ink: var(--slate-950); --value: var(--brass-300); --value-soft: #2E2411; --positive: #6FCFA1; --positive-soft: #10301F; --caution: #E0B357; --caution-soft: #322512; --critical: #E88B87; --critical-soft: #33191A; --focus-ring: var(--petrol-300); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 6px -2px rgba(0, 0, 0, 0.5); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.45), 0 8px 24px -12px rgba(0, 0, 0, 0.6); --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.5), 0 20px 48px -20px rgba(0, 0, 0, 0.7); }