/* ============================================================================= * /lib/tokens.css — Adytum design tokens (single source of truth) * ============================================================================= * Locked palette per OPERATIONS_MAP §9.5 (2026-05-29 PM). * Phase 1 of the visual rebrand. Initial canary: /education/. * * Usage in a page: * * (or "dark") * * Then reference tokens via var(--color-*) or var(--font-*) etc. * * Pages with their own inline :root {} declarations will SHADOW these tokens. * Phase 3 progressively removes those local declarations. * ============================================================================= */ :root, [data-theme="light"] { /* --- Brand core (locked) --- */ --color-navy: #1e2954; /* primary */ --color-navy-deep: #0a1530; /* hero bg, dark surfaces */ --color-navy-soft: #e8ebf3; /* pale tint (active link, hover surface) */ --color-slate: #5a6e8a; /* CTA accent */ --color-slate-hover: #475878; /* CTA hover */ --color-slate-active:#3c4d6a; /* CTA active */ --color-slate-pale: #e8ebf3; /* dropdown hover, subtle surface */ --color-gold: #c8a800; /* emphasis only — reward / value callouts */ /* --- Semantic surfaces (light theme) --- */ --color-bg: #ffffff; --color-bg-soft: #fafbfd; /* off-white card / page bg (matches /education/) */ --color-surface: #f3f4f8; /* subtle elevated surface */ --color-surface-2: #ffffff; /* card on bg-soft */ --color-border: #d4d8e4; --color-divider: #e2e5ee; /* --- Semantic text --- */ --color-text: #1a1a2e; /* primary */ --color-text-muted: #5a5a72; /* secondary */ --color-text-faint: #8a8a9e; /* tertiary */ --color-text-inverse:#ffffff; /* text on navy bg */ /* --- Aliases for migration ergonomics (so older code reads cleanly) --- */ --color-primary: var(--color-navy); --color-primary-hover: var(--color-navy-deep); --color-primary-soft: var(--color-navy-soft); --color-accent: var(--color-slate); --color-accent-hover: var(--color-slate-hover); --color-accent-soft: var(--color-slate-pale); /* --- Typography (system sans everywhere; zero Google Fonts dependency) --- */ --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; --font-display: var(--font-body); --font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* --- Spacing (8px scale) --- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* --- Radii --- */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; --radius-pill: 999px; /* --- Shadows (navy-tinted, replaces BTB forest-tinted) --- */ --shadow-xs: 0 1px 2px rgba(30, 41, 84, 0.06); --shadow-sm: 0 2px 6px rgba(30, 41, 84, 0.08); --shadow-md: 0 6px 18px rgba(30, 41, 84, 0.10); --shadow-lg: 0 12px 36px rgba(30, 41, 84, 0.14); --shadow-xl: 0 24px 64px rgba(30, 41, 84, 0.18); /* --- Motion --- */ --motion-fast: 120ms cubic-bezier(.2,.8,.2,1); --motion-base: 180ms cubic-bezier(.2,.8,.2,1); --motion-slow: 280ms cubic-bezier(.2,.8,.2,1); } [data-theme="dark"] { /* Dark theme: invert surfaces, keep brand tokens */ --color-bg: #0a1530; --color-bg-soft: #111b3d; --color-surface: #1a2447; --color-surface-2: #1e2954; --color-border: #2a345a; --color-divider: #1e2440; --color-text: #ffffff; --color-text-muted: #b8c0d6; --color-text-faint: #8a8a9e; --color-navy-soft: #1e2954; /* on dark, "soft" = mid */ --color-slate-pale: #2a345a; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.40); --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.45); --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.50); } /* --- Reduced motion respect --- */ @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; } }