/* =========================================================================== Dits design tokens — three tiers (see docs/ARCHITECTURE.md). Tier 1: primitives → never reference these in components. Tier 2: semantic → components reference these. Tier 3: component → narrow per-component overrides only when needed. Toggle dark via [data-theme="dark"] on . System default via media query. =========================================================================== */ :root { /* --- Tier 1: primitives --- Sky-blue identity. The whole site is driven from the semantic tier below, so retuning these primitives + their semantic mapping recolours every component. Hex values are WCAG-AA verified for the pairings noted inline. */ /* Sky-blue ramp (brand accent + surface tints) */ --c-sky-50: #f0f7fd; --c-sky-100: #e2f0fb; --c-sky-200: #c3e0f6; --c-sky-300: #97cbef; --c-sky-400: #5fb0e6; --c-sky-500: #2b8fd6; /* primary sky blue — white text on it = 5.0:1 (AA) */ --c-sky-600: #1f6fa8; /* hover / strong */ --c-sky-700: #195a89; --c-cyan-400: #38b6d9; /* secondary aurora hue — keeps the glow two-tone */ /* Deep navy ink (text/headings) — from the same cool family as the sky */ --c-navy-900: #0f2a3f; /* body text — 13:1 on the light canvas (AA/AAA) */ --c-navy-800: #163349; --c-navy-700: #25506b; --c-navy-600: #4a6275; /* muted text — 5.6:1 on canvas (AA) */ --c-navy-400: #7c93a4; /* faint text */ /* Cool light surfaces (sky-tinted off-whites) */ --c-surface-0: #ffffff; /* raised cards */ --c-surface-1: #eaf3fb; /* page canvas — soft sky wash */ --c-surface-2: #d7ebf8; /* deeper panels / secondary buttons */ --c-border: #cfe1f0; /* hairline borders */ --c-border-2: #9bbdd6; /* stronger borders */ /* Warm gold kept as primitives (no longer the brand accent — available as an optional secondary should we want a touch of warmth). */ --c-gold-300: #f0d57a; --c-gold-500: #d4af37; --c-gold-700: #a07f1f; /* Deep navy slates retained for dark-theme surfaces + overlays. */ --c-slate-200: #cfd6e2; --c-slate-400: #8a93a6; --c-slate-950: #060a14; --c-ink-950: #061320; /* deepest navy — dark canvas */ --c-ink-900: #0a1c2e; --c-ink-800: #12283d; --c-ink-700: #1b3a55; /* --- Tier 2: semantic (light theme defaults) --- */ --bg-canvas: var(--c-surface-1); /* soft sky wash — brand identity */ --bg-surface: var(--c-surface-0); /* white cards lift off the sky canvas */ --bg-surface-2: var(--c-surface-2); --bg-overlay: rgba(15, 42, 63, 0.55); --fg-text: var(--c-navy-900); --fg-muted: var(--c-navy-600); --fg-faint: var(--c-navy-400); --border-soft: var(--c-border); --border-strong: var(--c-border-2); --accent: var(--c-sky-500); /* sky blue is the brand accent */ --accent-strong: var(--c-sky-600); /* darker — hover / strong-contrast text */ --accent-soft: var(--c-sky-200); /* light tint — glows, focus ring, blobs */ --accent-fg: #ffffff; /* white text on sky-blue buttons (5.0:1) */ --info: var(--c-cyan-400); /* --- Brand-identity four-token aliases (Phase A.1). Use these names from this point onwards — `--ink`, `--cream`, `--gold`, `--mute`. Existing `--fg-text` / `--bg-canvas` / `--accent` / `--fg-muted` aliases stay for back-compat so we don't touch every component file in one shot. `--gold` now routes to the sky accent so the wordmark "its" reads sky-blue. */ --ink: var(--fg-text); --cream: var(--bg-canvas); --gold: var(--accent); --mute: var(--fg-muted); /* Sky-blue hero gradients (research-backed, AA-safe over navy text). */ --grad-sky: linear-gradient(160deg, #f0f7fd 0%, #cfe6f7 55%, #a9d2ef 100%); --grad-dawn: linear-gradient(135deg, #2b8fd6 0%, #6bb3df 60%, #97cbef 100%); --shadow-sm: 0 1px 2px rgba(11, 18, 32, .06); --shadow-md: 0 8px 24px rgba(11, 18, 32, .10); --shadow-lg: 0 18px 50px rgba(11, 18, 32, .18); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px; /* Typography scale (clamp-fluid) */ --fs-xs: clamp(11px, 0.78vw, 12px); --fs-sm: clamp(13px, 0.9vw, 14px); --fs-md: clamp(15px, 1.05vw, 16px); --fs-lg: clamp(18px, 1.4vw, 20px); --fs-xl: clamp(22px, 2vw, 26px); --fs-2xl: clamp(28px, 3vw, 36px); --fs-3xl: clamp(38px, 5vw, 56px); /* Arabic gets a slightly bigger line-height (RTL handling per ARCHITECTURE.md) */ --lh-base: 1.55; --lh-arabic: 1.75; /* Motion */ --ease-out: cubic-bezier(.16, 1, .3, 1); --dur-fast: .15s; --dur-base: .25s; --dur-slow: .45s; } /* --- Dark theme overrides (Tier 2 only) — deep sky-navy --- */ [data-theme="dark"] { --bg-canvas: var(--c-ink-950); --bg-surface: var(--c-ink-900); --bg-surface-2: var(--c-ink-800); --bg-overlay: rgba(0, 0, 0, .65); --fg-text: #eaf3fb; --fg-muted: #a9c6dd; --fg-faint: #6f8aa0; --border-soft: rgba(146, 191, 226, .14); --border-strong: rgba(146, 191, 226, .30); --accent-fg: #ffffff; /* white text on sky buttons in dark too */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --shadow-md: 0 10px 30px rgba(0, 0, 0, .45); --shadow-lg: 0 22px 60px rgba(0, 0, 0, .55); } /* System dark preference, only applied when user hasn't overridden manually */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-canvas: var(--c-ink-950); --bg-surface: var(--c-ink-900); --bg-surface-2: var(--c-ink-800); --bg-overlay: rgba(0, 0, 0, .65); --fg-text: #eaf3fb; --fg-muted: #a9c6dd; --fg-faint: #6f8aa0; --border-soft: rgba(146, 191, 226, .14); --border-strong: rgba(146, 191, 226, .30); --accent-fg: #ffffff; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --shadow-md: 0 10px 30px rgba(0, 0, 0, .45); --shadow-lg: 0 22px 60px rgba(0, 0, 0, .55); } }