/* ────────────────────────────────────────────────────────────── iVE Design Tokens One master --brand-h hue drives the entire palette. Light & dark themes share the same tokens; values differ. ────────────────────────────────────────────────────────────── */ :root { /* Master brand — only thing clients change */ --brand-h: 240; /* hue 0..360 */ --brand-c: 0.16; /* chroma */ --brand-l: 0.55; /* base lightness */ /* Type */ --font-sans: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --font-ar: 'IBM Plex Sans Arabic', 'Inter Tight', system-ui, sans-serif; /* --font-ui is the single UI font: switches to the Arabic stack when RTL. */ --font-ui: var(--font-sans); /* Radii */ --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px; /* Spacing scale */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; /* Shadows (soft, layered, not glass) */ --sh-xs: 0 1px 2px -1px color-mix(in oklab, var(--ink) 10%, transparent), 0 1px 1px color-mix(in oklab, var(--ink) 4%, transparent); --sh-sm: 0 2px 4px -2px color-mix(in oklab, var(--ink) 10%, transparent), 0 1px 2px color-mix(in oklab, var(--ink) 5%, transparent); --sh-md: 0 8px 24px -12px color-mix(in oklab, var(--ink) 18%, transparent), 0 2px 6px -2px color-mix(in oklab, var(--ink) 8%, transparent); --sh-lg: 0 24px 48px -20px color-mix(in oklab, var(--ink) 22%, transparent), 0 6px 12px -6px color-mix(in oklab, var(--ink) 10%, transparent); --sh-brand: 0 10px 30px -10px color-mix(in oklch, var(--brand-600) 50%, transparent); /* Status (fixed semantics, subtly harmonized) */ --ok-h: 150; --warn-h: 40; --err-h: 18; /* Transitions */ --t-fast: 120ms cubic-bezier(.4,0,.2,1); --t-med: 200ms cubic-bezier(.4,0,.2,1); } /* ─────────── LIGHT THEME ─────────── */ [data-theme="light"] { color-scheme: light; /* Canvas — neutral, brand tint is reserved for CTAs and highlights */ --bg: oklch(0.99 0 0); --bg-muted: oklch(0.975 0 0); --bg-raised: oklch(1 0 0); --bg-sunken: oklch(0.965 0 0); /* Ink */ --ink: oklch(0.22 0.02 var(--brand-h)); --ink-2: oklch(0.38 0.015 var(--brand-h)); --ink-3: oklch(0.55 0.012 var(--brand-h)); --ink-4: oklch(0.70 0.010 var(--brand-h)); /* Borders */ --line: oklch(0.92 0.006 var(--brand-h)); --line-2: oklch(0.88 0.008 var(--brand-h)); --line-strong: oklch(0.80 0.01 var(--brand-h)); /* Brand scale — derived */ --brand-50: oklch(0.97 calc(var(--brand-c) * 0.15) var(--brand-h)); --brand-100: oklch(0.93 calc(var(--brand-c) * 0.30) var(--brand-h)); --brand-200: oklch(0.86 calc(var(--brand-c) * 0.55) var(--brand-h)); --brand-300: oklch(0.76 calc(var(--brand-c) * 0.75) var(--brand-h)); --brand-400: oklch(0.65 calc(var(--brand-c) * 0.90) var(--brand-h)); --brand-500: oklch(var(--brand-l) var(--brand-c) var(--brand-h)); /* brand-600 — the CTA fill. Clamp the lightness so a CTA filled with this token is ALWAYS dark enough for white text to read, no matter how light a brand the user picks. min() takes the darker of the two values: dark brands keep their natural shade, light brands (e.g. sky #0ea5e9) get pulled down to the 0.52 ceiling. Without this clamp, light brands land in a mid-tone no-man's-land where neither white nor black text reads. */ --brand-600: oklch( min(calc(var(--brand-l) - 0.06), 0.52) var(--brand-c) var(--brand-h) ); /* brand-700 — high-contrast text/border color. Clamp the lightness so it stays readable against light backgrounds even when the user picks a near-white brand. min() picks the darker of the two values, so dark brands stay dark and light brands snap to a 0.40 floor. */ --brand-700: oklch( min(calc(var(--brand-l) - 0.14), 0.40) calc(var(--brand-c) * 0.9) var(--brand-h) ); --brand-900: oklch(0.22 calc(var(--brand-c) * 0.5) var(--brand-h)); /* CTA ink — sits on top of --brand-600. Because brand-600 is clamped to ≤0.52 lightness, near-white ink is always the right call. A small hint of the brand hue keeps the text feeling cohesive without compromising contrast. */ --brand-ink: oklch(0.98 0.01 var(--brand-h)); /* Tints mix from brand-700 (which is contrast-clamped above) rather than brand-500, so tinted backgrounds stay visible against the page even when brand-500 is too close to the canvas (e.g. a near-white brand). */ --brand-tint: color-mix(in srgb, var(--brand-700) 10%, var(--bg)); --brand-tint-2: color-mix(in srgb, var(--brand-700) 18%, var(--bg)); /* Status */ --ok: oklch(0.58 0.14 var(--ok-h)); --ok-tint: color-mix(in oklch, var(--ok) 12%, var(--bg)); --warn: oklch(0.65 0.14 var(--warn-h)); --warn-tint: color-mix(in oklch, var(--warn) 16%, var(--bg)); --err: oklch(0.58 0.19 var(--err-h)); --err-tint: color-mix(in oklch, var(--err) 12%, var(--bg)); /* Focus ring — uses brand-700 (contrast-clamped) so the ring stays visible even when the user picks a near-white brand. */ --ring: color-mix(in oklch, var(--brand-700) 40%, transparent); } /* ─────────── DARK THEME ─────────── */ [data-theme="dark"] { color-scheme: dark; --bg: oklch(0.17 0 0); --bg-muted: oklch(0.20 0 0); --bg-raised: oklch(0.23 0 0); --bg-sunken: oklch(0.14 0 0); --ink: oklch(0.97 0.005 var(--brand-h)); --ink-2: oklch(0.82 0.008 var(--brand-h)); --ink-3: oklch(0.65 0.010 var(--brand-h)); --ink-4: oklch(0.50 0.012 var(--brand-h)); --line: oklch(0.28 0.015 var(--brand-h)); --line-2: oklch(0.33 0.017 var(--brand-h)); --line-strong: oklch(0.42 0.02 var(--brand-h)); --brand-50: oklch(0.24 calc(var(--brand-c) * 0.25) var(--brand-h)); --brand-100: oklch(0.30 calc(var(--brand-c) * 0.40) var(--brand-h)); --brand-200: oklch(0.38 calc(var(--brand-c) * 0.60) var(--brand-h)); --brand-300: oklch(0.48 calc(var(--brand-c) * 0.80) var(--brand-h)); --brand-400: oklch(0.60 calc(var(--brand-c) * 0.95) var(--brand-h)); --brand-500: oklch(0.68 var(--brand-c) var(--brand-h)); --brand-600: oklch(0.74 calc(var(--brand-c) * 0.95) var(--brand-h)); --brand-700: oklch(0.82 calc(var(--brand-c) * 0.80) var(--brand-h)); --brand-900: oklch(0.94 calc(var(--brand-c) * 0.3) var(--brand-h)); --brand-ink: oklch(0.15 0.02 var(--brand-h)); --brand-tint: color-mix(in srgb, var(--brand-500) 14%, var(--bg)); --brand-tint-2: color-mix(in srgb, var(--brand-500) 22%, var(--bg)); --ok: oklch(0.72 0.16 var(--ok-h)); --ok-tint: color-mix(in oklch, var(--ok) 18%, var(--bg)); --warn: oklch(0.78 0.14 var(--warn-h)); --warn-tint: color-mix(in oklch, var(--warn) 22%, var(--bg)); --err: oklch(0.70 0.18 var(--err-h)); --err-tint: color-mix(in oklch, var(--err) 20%, var(--bg)); --ring: color-mix(in oklch, var(--brand-500) 55%, transparent); } /* ─────────── BASE ─────────── */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-ui); background: var(--bg); color: var(--ink); font-feature-settings: "cv11", "ss01", "ss03"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background var(--t-med), color var(--t-med); } [dir="rtl"], [dir="rtl"] body { --font-ui: var(--font-ar); } button { font-family: inherit; } /* ─────────── UTILITY ─────────── */ .mono { font-family: var(--font-ui); font-variant-numeric: tabular-nums; letter-spacing: 0; } .tnum { font-variant-numeric: tabular-nums; } ::selection { background: var(--brand-200); color: var(--brand-900); } /* Scrollbars */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; border: 2px solid var(--bg); } *::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }