/* ============================================================ Yebeba — semantic design tokens ------------------------------------------------------------ ONE source, FOUR surfaces (web-light, web-dark, mobile-light, mobile-dark). Components reference these var names ONLY — never a raw hex, never a primitive. Flip [data-theme] and every surface follows. Light values live under :root. Dark values REPOINT the same variable names under [data-theme="dark"]. The toggle is a one-attribute flip on . Primitives (raw palette) are included at the top for reference, but COMPONENTS MUST NOT USE THEM — use the --* semantic names. Full primitive documentation: primitives.md ============================================================ */ :root { /* --- primitives · navy (brand) family --------------------- */ --p-navy-900: #0A141B; --p-navy-800: #0E1A23; --p-navy-700: #112B3C; /* Yebeba navy — brand anchor */ --p-navy-600: #16384D; --p-navy-500: #1D4A63; --p-navy-400: #2D6F8F; /* interaction blue (navy-family) */ --p-navy-300: #4A93BC; --p-navy-200: #8FB6CC; --p-navy-100: #CFE0E7; /* --- primitives · gold (hue-locked ~40°) ------------------ */ --p-gold-deep: #A9761F; --p-gold: #D79B36; /* Yebeba gold — NOT callabash orange #D4842A */ --p-gold-bright: #E3AC4C; /* --- primitives · green (hue-locked ~163°) ---------------- */ --p-green-deep: #17513F; --p-green: #1F6B57; /* Yebeba green */ --p-green-bright: #3FA588; /* dark-surface tuned, same hue */ /* --- primitives · neutrals -------------------------------- */ --p-white: #FFFFFF; --p-cream: #FFFAF2; --p-sand: #F6EFE4; --p-line: #D7DDE3; --p-line-strong: #B9C4CD; --p-ink: #17212B; --p-slate: #5F6B76; --p-silver: #98A4AD; /* dark neutrals (near-black, navy-tinted — not callabash #0F1117) */ --p-ink-900: #0A141B; --p-ink-850: #0E1A23; --p-ink-800: #122029; --p-ink-750: #172A37; --p-ink-700: #1B2530; /* warm-tinted dark surface */ --p-ink-600: #26343F; --p-ink-500: #3A4B57; --p-mist-100: #E8EEF2; --p-mist-200: #9DB0BC; --p-mist-300: #6B7D89; /* --- primitives · status ---------------------------------- */ --p-danger: #B3402F; --p-danger-bright: #E5735F; --p-warning: #B4791A; /* ========================================================== SEMANTIC TOKENS — LIGHT (component-facing; use these) ========================================================== */ --surface: var(--p-white); --surface-raised: var(--p-white); /* distinguished by --shadow-e1 */ --surface-sunken: #F4F6F8; --surface-warm: var(--p-sand); /* warm section bands, price band */ --surface-inverse: var(--p-navy-700);/* hero / total bar / dark panels */ --content: var(--p-ink); --content-muted: var(--p-slate); --content-subtle: var(--p-silver); --content-inverse: var(--p-white); /* text on --surface-inverse */ --border: var(--p-line); --border-strong: var(--p-line-strong); --brand: var(--p-navy-700); --brand-content: var(--p-white); --accent: var(--p-navy-400); /* interactive blue: CTAs, links */ --accent-content: var(--p-white); --accent-hover: #25607C; --arrival: var(--p-gold); /* gold: kickers, active step, loaner */ --arrival-content: var(--p-navy-800); --success: var(--p-green); --success-content: var(--p-white); --danger: var(--p-danger); --danger-content: var(--p-white); --warning: var(--p-warning); --warning-content: var(--p-white); --focus-ring: var(--p-navy-400); /* --- non-color primitives (theme-invariant) --------------- */ --font-head: 'Satoshi', ui-sans-serif, system-ui, sans-serif; --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif; --text-display: 3.25rem; /* 52 */ --text-h1: 2.125rem; /* 34 */ --text-h2: 1.4375rem;/* 23 */ --text-h3: 1.0625rem;/* 17 */ --text-lead: 1rem; /* 16 */ --text-body: 0.875rem; /* 14 */ --text-small: 0.78125rem;/* 12.5 */ --text-label: 0.6875rem;/* 11 */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --gutter: 22px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; --radius-round: 50%; --shadow-e1: 0 2px 10px rgba(10,30,50,.07); --shadow-e2: 0 6px 20px rgba(10,30,50,.08); --shadow-e3: 0 16px 44px rgba(10,30,50,.16); --ring-focus: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 32%, transparent); } /* ========================================================== SEMANTIC TOKENS — DARK (repoint the SAME names) Genuine Yebeba dark: gold hue-identical, green same hue brightened for AA on near-black, accent blue same hue. Every value below cleared WCAG AA on its own surface. ========================================================== */ [data-theme="dark"] { --surface: var(--p-ink-850); /* #0E1A23 */ --surface-raised: var(--p-ink-750); /* #172A37 — lighter than surface */ --surface-sunken: var(--p-ink-900); /* #0A141B — deeper than surface */ --surface-warm: var(--p-ink-700); /* warm-tinted dark band */ --surface-inverse: var(--p-ink-750); /* panels invert toward raised */ --content: var(--p-mist-100); /* #E8EEF2 on #0E1A23 → 14.6:1 */ --content-muted: var(--p-mist-200); /* #9DB0BC → 7.0:1 */ --content-subtle: var(--p-mist-300); /* #6B7D89 → 3.6:1 (large/again UI only) */ --content-inverse: var(--p-mist-100); --border: var(--p-ink-600); /* #26343F */ --border-strong: var(--p-ink-500); /* #3A4B57 */ --brand: var(--p-navy-500); /* #1D4A63 — visible navy panel on dark */ --brand-content: var(--p-mist-100); --accent: var(--p-navy-300); /* #4A93BC — SAME hue as light #2D6F8F */ --accent-content: var(--p-navy-900); /* dark text on bright accent → AA */ --accent-hover: #63A6CC; --arrival: var(--p-gold); /* #D79B36 — HUE UNCHANGED, 7.3:1 on dark */ --arrival-content: var(--p-navy-900); --success: var(--p-green-bright);/* #3FA588 — same hue, 5.9:1 on dark */ --success-content: var(--p-navy-900); --danger: var(--p-danger-bright);/* #E5735F — 5.1:1 on dark */ --danger-content: var(--p-navy-900); --warning: var(--p-gold-bright);/* #E3AC4C — 8.6:1 on dark */ --warning-content: var(--p-navy-900); --focus-ring: var(--p-navy-300); --shadow-e1: 0 2px 10px rgba(0,0,0,.45); --shadow-e2: 0 6px 20px rgba(0,0,0,.5); --shadow-e3: 0 16px 44px rgba(0,0,0,.6); }