/* ═══════════════════════════════════════════════════════════════════════ LETLOU ENERGY — DESIGN TOKENS (COMPLETE) ─────────────────────────────────────────────────────────────────────── Four-tier token architecture: Tier 0 Primitives --p-* Tier 1 Adaptive surfaces --surface-* Tier 2 Semantic mapping --[section]-bg, --footer-bg, etc. Tier 3 Content-on-surface --on-[surface]-[role] Rule: components reference Tier 2/3 only. Never use Tier 0 directly in a component file. Tier 1 feeds Tier 2. Tier 0 feeds Tier 1. THEMATIC TRANSLATION: Light Mode: White + Off-white + Navy + Amber Dark Mode: Almost Black + Dark Brown + Parchment + Amber KEY RULE: Navy disappears entirely in dark mode. It is replaced by: - Parchment for attention-grabbing surfaces (CTAs, Promise Band, Patent) - Various dark surfaces for depth (headers, footers, section headers) ═══════════════════════════════════════════════════════════════════════ */ :root { /* ════════════════════════════════════════════════════════════════════ TIER 0 — PRIMITIVES Raw colour values. No light-dark() here. Never used in components. ════════════════════════════════════════════════════════════════════ */ /* ── Brand ── */ --p-navy: #122C4B; --p-navy-deep: #0a1a2e; --p-navy-darker: #0E2342; --p-navy-mid: #1a3a5c; --p-amber: #F8A61F; --p-amber-hover: #E09310; --p-white: #FFFFFF; --p-parchment: #F7F0E3; --p-ink: #1A1208; /* ── Dark mode surfaces (warm neutrals) ── */ --p-dark-50: #0F0F0A; --p-dark-100: #1A1A12; --p-dark-200: #252318; --p-dark-300: #302E22; /* ── Warm grays (light mode text/surface) ── */ --p-gray-900: #1A1208; --p-gray-700: #5C5449; --p-gray-500: #8C8278; --p-gray-300: #C8BFB2; --p-gray-200: #F4F6F9; --p-gray-100: #F7F4EF; /* ── Career slab colours ── */ /* ── Career persona seeds (static colour identity per track) ── */ --p-seed-student: #10b981; --p-seed-prof: #F8A61F; --p-seed-site: #ef4444; /* Red */ --p-seed-corp: #5460DE; --p-seed-lead: #ec4899; /* Rose */ /* ── Accent ramps ── */ --p-teal-50: #E1F5EE; --p-teal-200: #5DCAA5; --p-teal-500: #1C9A78; --p-teal-600: #0F6E56; --p-teal-700: #0B5A46; --p-teal-800: #085041; --p-purple-50: #EEEDFE; --p-purple-200: #AFA9EC; --p-purple-600: #534AB7; --p-purple-800: #3C3489; --p-purple-900: #26215C; --p-coral-50: #FAECE7; --p-coral-200: #F0997B; --p-coral-600: #993C1D; --p-coral-800: #712B13; --p-coral-900: #4A1B0C; --p-amber-50: #FAEEDA; --p-amber-200: #FAC775; --p-amber-600: #EF9F27; --p-amber-800: #633806; --p-indigo-50: #ECEFFE; --p-indigo-300: #8B95F0; --p-indigo-500: #5460DE; --p-indigo-700: #3241C0; --p-teal-cyan-600: #0E7490; --p-teal-cyan-400: #67D4E8; --p-copper-500: #C07A3E; --p-hydro-light: #1A5C99; --p-hydro-dark: #7ab8f5; /* ── Semantic functional colours ── */ --p-error: #C0392B; --p-error-dark: #F87171; --p-error-bg: #FEF2F2; --p-error-bg-dark: #2C0F0F; --p-success: #0F6E56; --p-success-dark: #5DCAA5; /* ════════════════════════════════════════════════════════════════════ STRUCTURAL TOKENS — spacing, type, shape, motion ════════════════════════════════════════════════════════════════════ */ --header-height: 68px; --font-display: 'Barlow Condensed', 'Georgia', serif; --font-body: 'Barlow', 'Segoe UI', system-ui, sans-serif; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --transition: 0.18s ease; --transition-fast: 0.12s ease; --transition-normal: 0.22s ease; --transition-slow: 0.4s ease; /* Shorthand aliases */ --ink: var(--on-surface-text); --muted: var(--on-surface-text-muted); --hint: var(--on-surface-text-hint); --b: var(--on-surface-border); --b-s: var(--on-surface-border-soft); --off: var(--surface-raised); --trans: var(--transition-normal); --rlg: var(--radius-lg); /* ════════════════════════════════════════════════════════════════════ TIER 1 — ADAPTIVE SURFACES The complete surface map based on the original light-mode design. TRANSLATION RULES: White (#FFFFFF) → Almost Black (#0F0F0A) Cool grey (#F4F6F9) → Dark Brown (#252318) Navy (#122C4B) → Parchment (#F7F0E3) for CTAs/attention Navy (#122C4B) → Dark Brown (#1A1A12) for depth (section headers) Navy (#122C4B) → Almost Black (#0F0F0A) for headers/footers Deep Navy (#0a1a2e) → Almost Black (#0F0F0A) Amber (#F8A61F) → Amber (#F8A61F) — stays consistent ════════════════════════════════════════════════════════════════════ */ color-scheme: light dark; /* ── Palette 1: The Flip-Palette (White ↔ Dark) ── */ --surface-base: light-dark(#FFFFFF, #0F0F0A); /* Body background */ --surface-default: light-dark(#FFFFFF, #1D1B14); /* Cards, forms, modals — sits between base and raised */ --surface-raised: light-dark(#F4F6F9, #252318); /* Section backgrounds */ --surface-card: light-dark(#FFFFFF, #302E22); /* Cards with elevated separation */ /* ── Palette 2: The Inversion Palette (Navy ↔ Parchment) ── Navy in light mode becomes Parchment in dark mode. Used for CTAs, Promise Band, Patent Spotlight, bottom CTAs. */ --surface-inversion: light-dark(#122C4B, #F7F0E3); /* ── Palette 3: Navy → Dark Surface (Depth) ── Navy in light mode becomes a dark surface in dark mode (but NOT parchment — it stays dark to provide visual depth). */ --surface-elevated: light-dark(#122C4B, #1A1A12); /* Section headers */ --surface-anchor: light-dark(#122C4B, #0F0F0A); /* Headers, footers, heroes */ --surface-anchor-deep: light-dark(#0a1a2e, #0F0F0A); /* Tickers, marquees */ /* ── Card border ── */ --surface-card-border: light-dark(rgba(18,44,75,0.12), rgba(248,166,31,0.15)); /* ════════════════════════════════════════════════════════════════════ TIER 2 — SEMANTIC SURFACE MAPPING ════════════════════════════════════════════════════════════════════ */ /* ── Layout ── */ --header-bg: var(--surface-default); /* White ↔ Dark Brown (solid, no glass) */ --footer-bg: var(--surface-anchor-deep); /* ── Section headers (dark-elevated) ── */ --section-header-bg: var(--surface-elevated); --section-header-stripe: light-dark(rgba(248,166,31,0.035), rgba(248,166,31,0.08)); --section-header-border: #F8A61F; /* ── Inversion sections (Navy ↔ Parchment) ── */ --promise-band-bg: var(--surface-inversion); --patent-spotlight-bg: var(--surface-inversion); --about-bottom-cta-bg: var(--surface-inversion); --cta-band-bg: var(--surface-inversion); --hub-contact-band-bg: var(--surface-inversion); /* ── Anchor sections (always dark) ── */ --mandate-rail-bg: var(--surface-elevated); --cred-marquee-bg: var(--surface-anchor-deep); --cred-tile-bg: light-dark(rgba(255,255,255,0.08), rgba(255,255,255,0.06)); --cred-tile-border: light-dark(rgba(255,255,255,0.16), rgba(255,255,255,0.11)); /* Cred tile accent colours — all tuned for legibility on deep navy/near-black bg */ --cred-blue-color: light-dark(#7ABCF0, #7ABCF0); /* sky blue */ --cred-blue-border: light-dark(rgba(122,188,240,0.28), rgba(122,188,240,0.22)); --cred-green-color: light-dark(#4ECBA8, #4ECBA8); /* mint teal */ --cred-purple-color: light-dark(#C4AEFF, #C4AEFF); /* soft lavender */ --cred-red-color: light-dark(#F5A087, #F5A087); /* warm coral */ --cred-red-border: light-dark(rgba(245,160,135,0.28), rgba(245,160,135,0.22)); --ticker-bg: var(--surface-anchor-deep); --hub-stats-bg: var(--surface-elevated); --modal-header-bg: var(--surface-elevated); --avail-strip-bg: var(--surface-anchor); --contact-avail-bg: var(--surface-anchor); --exp-filter-bg: var(--surface-default); /* ── Career slab adaptive surfaces ── */ --slab-student-bg: light-dark(rgba(16,185,129,0.10), rgba(16,185,129,0.14)); --slab-prof-bg: light-dark(rgba(248,166,31,0.10), rgba(248,166,31,0.14)); --slab-site-bg: light-dark(rgba(239,68,68,0.10), rgba(239,68,68,0.14)); --slab-corp-bg: light-dark(rgba(84,96,222,0.10), rgba(84,96,222,0.14)); --slab-lead-bg: light-dark(rgba(236,72,153,0.10), rgba(236,72,153,0.14)); --slab-mgt-bg: light-dark(rgba(248,166,31,0.10), rgba(248,166,31,0.14)); --slab-mgt-hover: light-dark(rgba(248,166,31,0.18), rgba(248,166,31,0.22)); /* ── Career slab foreground accents ── */ --slab-student-acc: light-dark(#0F6E56, #5DCAA5); --slab-prof-acc: light-dark(#B5602A, #FAC775); --slab-site-acc: light-dark(#991B1B, #FCA5A5); --slab-corp-acc: light-dark(#2B3A8C, #85B7EB); --slab-lead-acc: light-dark(#9D174D, #F9A8D4); /* ── Career slab hover backgrounds ── */ --slab-student-hover: light-dark(rgba(16,185,129,0.18), rgba(16,185,129,0.22)); --slab-prof-hover: light-dark(rgba(248,166,31,0.18), rgba(248,166,31,0.22)); --slab-site-hover: light-dark(rgba(239,68,68,0.18), rgba(239,68,68,0.22)); --slab-corp-hover: light-dark(rgba(84,96,222,0.18), rgba(84,96,222,0.22)); --slab-lead-hover: light-dark(rgba(236,72,153,0.18), rgba(236,72,153,0.22)); /* ── Interactive / form ── */ --overlay-bg: light-dark(rgba(10,26,46,0.75), rgba(0,0,0,0.75)); /* ── Shadows ── */ --shadow-sm: light-dark( 0 1px 6px rgba(18,44,75,0.08), 0 0 0 1px rgba(248,166,31,0.06), 0 2px 8px rgba(0,0,0,0.40) ); --shadow-md: light-dark( 0 4px 16px rgba(18,44,75,0.12), 0 0 0 1px rgba(248,166,31,0.08), 0 4px 20px rgba(0,0,0,0.50) ); --shadow-lg: light-dark( 0 8px 32px rgba(18,44,75,0.16), 0 0 0 1px rgba(248,166,31,0.10), 0 8px 32px rgba(0,0,0,0.60) ); --shadow-amber: light-dark( 0 6px 20px rgba(248,166,31,0.30), 0 6px 20px rgba(248,166,31,0.20) ); --shadow-navy: light-dark( 0 4px 16px rgba(18,44,75,0.10), 0 4px 16px rgba(0,0,0,0.40) ); /* ════════════════════════════════════════════════════════════════════ TIER 3 — CONTENT ON SURFACE ════════════════════════════════════════════════════════════════════ */ /* ── On standard/adaptive surfaces (White/Off-white ↔ Dark) ── */ --on-surface-text: light-dark(#1A1208, #EDE9DF); --on-surface-text-mid: light-dark(#3D3428, #CEC9BC); --on-surface-text-muted: light-dark(#5C5449, #A09B8E); --on-surface-text-hint: light-dark(#8C8278, #757068); --on-surface-text-heading: light-dark(#122C4B, #EDE9DF); --on-surface-interactive: light-dark(#122C4B, #F8A61F); --on-surface-interactive-hover: light-dark(#0E2342, #E09310); --on-surface-interactive-text: light-dark(#ffffff, #0a1a2e); --on-surface-border: light-dark(rgba(18,44,75,0.12), rgba(248,166,31,0.10)); --on-surface-border-soft: light-dark(rgba(18,44,75,0.07), rgba(248,166,31,0.06)); /* ── On dark-anchor surfaces (always dark) ── */ --on-dark-text: rgba(255,255,255,0.90); --on-dark-text-muted: rgba(255,255,255,0.65); --on-dark-text-faint: rgba(255,255,255,0.45); --on-dark-text-strong: rgba(255,255,255,0.95); --on-dark-accent: #F8A61F; --on-dark-border: rgba(255,255,255,0.12); --on-dark-border-faint: rgba(255,255,255,0.07); --on-dark-surface: rgba(255,255,255,0.06); /* ── On elevated surfaces (Section headers) ── */ --on-elevated-text: light-dark(rgba(255,255,255,0.90), #EDE9DF); --on-elevated-text-strong: light-dark(#FFFFFF, #1A1208); /* Full contrast on navy / dark navy on parchment */ --on-elevated-text-muted: light-dark(rgba(255,255,255,0.65), #A09B8E); --on-elevated-accent: #F8A61F; --on-elevated-border: light-dark(rgba(255,255,255,0.12), rgba(248,166,31,0.12)); /* ── On inversion surfaces (Navy ↔ Parchment) ── */ --on-inversion-text: light-dark(#FFFFFF, #122C4B); --on-inversion-text-muted: light-dark(rgba(255,255,255,0.70), rgba(18,44,75,0.70)); --on-inversion-text-faint: light-dark(rgba(255,255,255,0.50), rgba(18,44,75,0.50)); --on-inversion-text-heading:light-dark(#FFFFFF, #122C4B); --on-inversion-accent: #F8A61F; --on-inversion-border: light-dark(rgba(255,255,255,0.12), rgba(18,44,75,0.12)); --on-inversion-border-soft: light-dark(rgba(255,255,255,0.07), rgba(18,44,75,0.07)); /* Diagonal stripe on inversion surfaces */ --inversion-stripe: light-dark( rgba(255,255,255,0.035), rgba(18,44,75,0.05) ); /* Patent spotlight amber header bar */ --patent-header-bg: #F8A61F; --patent-header-text: #122C4B; /* ── Icon tokens ── */ --icon-default-bg: light-dark(#122C4B, #252318); --icon-default-color: light-dark(#FFFFFF, #F8A61F); /* ── Icon colour tokens ────────────────────────────────────────── Used by .career-path-icon, .svc-icon, and other icon containers across the site. These ensure consistent icon colours in both light and dark modes. ──────────────────────────────────────── */ --icon-tech-bg: var(--color-amber-tint); --icon-tech-color: var(--color-amber); --icon-field-bg: var(--teal-50); --icon-field-color: var(--teal-600); --icon-biz-bg: var(--indigo-50); --icon-biz-color: var(--indigo-500); --icon-mgt-bg: var(--indigo-50); --icon-mgt-color: var(--indigo-500); --icon-amber-bg: var(--color-amber-tint); --icon-amber-color: var(--color-amber); --icon-teal-bg: var(--teal-50); --icon-teal-color: var(--teal-600); --icon-indigo-bg: var(--indigo-50); --icon-indigo-color: var(--indigo-500); /* ════════════════════════════════════════════════════════════════════ COMPATIBILITY ALIASES — map old names to new names ════════════════════════════════════════════════════════════════════ */ /* ── Brand color aliases ── */ --color-navy: var(--p-navy); --color-navy-deep: var(--p-navy-deep); --color-navy-mid-solid: var(--p-navy-mid); --color-amber: var(--p-amber); --color-amber-hover: var(--p-amber-hover); --color-amber-tint: light-dark(rgba(248,166,31,0.12), rgba(248,166,31,0.18)); --color-amber-border: light-dark(rgba(248,166,31,0.35), rgba(248,166,31,0.50)); --color-amber-dark: var(--amber-800); --color-white: var(--p-white); /* ── Accent colour aliases ── */ --color-teal: var(--teal-600); --color-teal-dark: var(--teal-700); --color-purple: var(--purple-600); --color-purple-dark: var(--purple-800); --color-indigo: var(--indigo-500); --color-indigo-hover: var(--indigo-700); /* ── Old button aliases ── */ --btn-navy-bg: var(--on-surface-interactive); --btn-navy-bg-hover: var(--on-surface-interactive-hover); --btn-navy-text: var(--on-surface-interactive-text); /* ── Misc old aliases ── */ --color-text: var(--on-surface-text); --color-text-muted: var(--on-surface-text-muted); --color-text-hint: var(--on-surface-text-hint); --color-text-light: var(--on-dark-text-muted); --color-border: var(--on-surface-border); --color-border-soft: var(--on-surface-border-soft); --color-off-white: var(--surface-raised); --color-bg-alt: var(--surface-raised); --drawer-label-color: var(--nav-label-color); /* ── Nav / theme panel ── */ --nav-panel-bg: light-dark(#FFFFFF, #1D1B14); --nav-panel-border: light-dark(rgba(18,44,75,0.07), rgba(248,166,31,0.15)); --nav-panel-shadow: light-dark( 0 12px 40px rgba(18,44,75,0.16), 0 8px 24px rgba(0,0,0,0.50) ); --nav-option-color: light-dark(#122C4B, rgba(237,233,223,0.80)); --nav-option-border: light-dark(rgba(18,44,75,0.07), rgba(248,166,31,0.08)); --nav-option-active-bg: light-dark(rgba(248,166,31,0.12), rgba(248,166,31,0.10)); --btn-ghost-color: light-dark(rgba(255,255,255,0.95), rgba(237,233,223,0.92)); /* white on dark section-header */ --btn-ghost-border: light-dark(rgba(255,255,255,0.45), rgba(237,233,223,0.40)); /* matching border */ --theme-btn-color: light-dark(#122C4B, #EDE9DF); --hover-tint-bg: light-dark(rgba(248,166,31,0.12), rgba(248,166,31,0.08)); --active-label-color: light-dark(#FFFFFF, #F8A61F); --nav-label-color: light-dark(#122C4B, #EDE9DF); /* ── Experience filter bar ── */ --exp-filter-bg: var(--surface-default); --exp-filter-border: light-dark(rgba(18,44,75,0.07), rgba(248,166,31,0.10)); --exp-filter-shadow: light-dark( 0 1px 6px rgba(18,44,75,0.08), 0 2px 12px rgba(0,0,0,0.40) ); --exp-tab-color: light-dark(#3D3428, rgba(237,233,223,0.65)); --exp-tab-active-bg: light-dark(#122C4B, rgba(248,166,31,0.16)); --exp-tab-active-border: light-dark(#122C4B, rgba(248,166,31,0.35)); --filter-count-bg: var(--badge-navy-bg); --badge-navy-bg: light-dark(rgba(18,44,75,0.08), rgba(248,166,31,0.08)); /* ── Cookie banner ── */ --cookie-bg: light-dark(#0a1a2e, #1E1C14); /* Navy in light, warm dark in dark */ --cookie-text-muted: light-dark(rgba(255,255,255,0.72), rgba(237,233,223,0.80)); --cookie-text-faint: light-dark(rgba(255,255,255,0.50), rgba(237,233,223,0.55)); --cookie-text-hover: light-dark(rgba(255,255,255,0.82), rgba(237,233,223,0.92)); --cookie-border-faint: light-dark(rgba(255,255,255,0.07), rgba(248,166,31,0.10)); --cookie-border-dim: light-dark(rgba(255,255,255,0.05), rgba(248,166,31,0.07)); --cookie-border-hover: light-dark(rgba(255,255,255,0.28), rgba(248,166,31,0.40)); --cookie-surface-dim: light-dark(rgba(255,255,255,0.12), rgba(248,166,31,0.10)); --cookie-toggle-thumb: light-dark(rgba(255,255,255,0.45), rgba(237,233,223,0.45)); --cookie-toggle-hover: light-dark(rgba(255,255,255,0.30), rgba(248,166,31,0.25)); --cookie-shadow: 0 12px 48px rgba(0,0,0,0.50), 0 0 0 1px rgba(255,255,255,0.04) inset; --toggle-checked-thumb: light-dark(#0a1a2e, #1A1208); /* ── Scope form ── */ --scope-intro-bg: light-dark(rgba(14,116,144,0.05), rgba(14,116,144,0.10)); --sp-num-active-color: light-dark(#FFFFFF, #EDE9DF); /* ── Contact switcher ── */ --contact-sw-bg: light-dark(#F4F6F9, #1A1A12); --contact-sw-border: light-dark(rgba(18,44,75,0.07), rgba(248,166,31,0.10)); --contact-sw-btn-color: light-dark(#5C5449, rgba(237,233,223,0.60)); /* ── Mandate / role badge tokens ── */ --lta-bg: light-dark(var(--purple-50), rgba(196,191,250,0.12)); --lta-c: light-dark(#3C3489, #C4BFFA); --oe-bg: light-dark(var(--teal-50), rgba(125,214,184,0.12)); --oe-c: light-dark(#085041, #7DD6B8); --ie-bg: light-dark(var(--coral-50), rgba(251,146,60,0.12)); --ie-c: light-dark(#712B13, #F5C4B3); --adhoc-bg: var(--amber-50); --adhoc-c: var(--amber-800); --ta-bg: light-dark(rgba(14,116,144,0.12), rgba(14,116,144,0.22)); --ta-c: light-dark(#0E5C73, #67D4E8); /* ── Mandate selector dot tokens (scope form) ── */ --ms-dot-lta: var(--lta-c); --ms-dot-oe: var(--oe-c); --ms-dot-ie: var(--ie-c); --ms-dot-ta: var(--ta-c); /* ── News tag tokens ── */ --tag-announcement-bg: light-dark(rgba(248,166,31,0.12), rgba(248,166,31,0.12)); --tag-announcement-color: var(--amber-600); --tag-project-bg: light-dark(rgba(15,110,86,0.10), rgba(11,90,70,0.20)); --tag-project-color: var(--teal-600); --tag-technology-bg: light-dark(rgba(83,74,183,0.10), rgba(83,74,183,0.18)); --tag-technology-color: var(--purple-600); --tag-partnership-bg: light-dark(rgba(153,60,29,0.10), rgba(113,43,19,0.20)); --tag-partnership-color: var(--coral-600); /* ── Energy type tokens ── */ --solar-bg: light-dark(rgba(248,166,31,0.12), rgba(248,166,31,0.18)); --solar-c: var(--amber-800); --wind-bg: light-dark(rgba(14,110,86,0.10), rgba(11,90,70,0.20)); --wind-c: var(--teal-600); --biogas-bg: light-dark(rgba(83,74,183,0.10), rgba(83,74,183,0.18)); --biogas-c: var(--purple-800); --hydro-bg: light-dark(rgba(29,100,170,0.10), rgba(29,100,170,0.20)); --hydro-c: light-dark(#1A5C99, #7ab8f5); --multi-bg: light-dark(rgba(0,0,0,0.06), rgba(255,255,255,0.08)); --multi-c: light-dark(#5C5449, rgba(237,233,223,0.70)); /* ── Status & stage badge tokens ── */ --badge-ops-border: light-dark(rgba(34,197,94,0.40), rgba(34,197,94,0.30)); --badge-ops-color: light-dark(#0B5A46, #6ee7b7); --badge-neutral-border: light-dark(rgba(100,100,100,0.25), rgba(255,255,255,0.12)); --badge-fc-bg: light-dark(rgba(124,156,255,0.18), rgba(124,156,255,0.12)); --badge-fc-border: light-dark(rgba(124,156,255,0.35), rgba(124,156,255,0.25)); --badge-fc-color: light-dark(#3B5BA5, #b9c8ff); --badge-con-bg: light-dark(rgba(255,148,77,0.18), rgba(255,148,77,0.12)); --badge-con-border: light-dark(rgba(255,148,77,0.35), rgba(255,148,77,0.25)); --badge-con-color: light-dark(#7A3B0A, #ffb27a); --badge-com-bg: light-dark(rgba(167,139,250,0.18), rgba(167,139,250,0.12)); --badge-com-border: light-dark(rgba(167,139,250,0.35), rgba(167,139,250,0.25)); --badge-com-color: light-dark(#3C3489, #c4b5fd); --badge-stage-fc-bg: light-dark(rgba(99,102,241,0.10), rgba(99,102,241,0.16)); --badge-stage-fc-border: light-dark(rgba(99,102,241,0.25), rgba(99,102,241,0.30)); --badge-stage-con-bg: light-dark(rgba(234,88,12,0.10), rgba(234,88,12,0.16)); --badge-stage-con-border: light-dark(rgba(234,88,12,0.25), rgba(234,88,12,0.30)); --badge-stage-com-bg: light-dark(rgba(124,58,237,0.10), rgba(124,58,237,0.16)); --badge-stage-com-border: light-dark(rgba(124,58,237,0.25), rgba(124,58,237,0.30)); --badge-stage-feas-bg: light-dark(rgba(100,100,120,0.10), rgba(255,255,255,0.06)); --badge-stage-feas-border: light-dark(rgba(100,100,120,0.20), rgba(255,255,255,0.10)); --badge-stage-dec-bg: light-dark(rgba(100,100,100,0.10), rgba(255,255,255,0.06)); --badge-stage-dec-border: light-dark(rgba(100,100,100,0.20), rgba(255,255,255,0.10)); --color-stage-construction: light-dark(#9a3412, #FB923C); --color-stage-commissioning: light-dark(#5b21b6, #A78BFA); --color-tag-statutory: light-dark(#1a6040, #4DBE99); /* ── Semantic / functional tokens ── */ --color-error: light-dark(#C0392B, #F87171); --color-error-dark:light-dark(#991B1B, #FECACA); --color-error-bg: light-dark(#FEF2F2, #2C0F0F); /* ── Navy gradient ── */ --navy-gradient-bg: light-dark( linear-gradient(135deg, #122C4B 0%, #0a1a2e 100%), linear-gradient(135deg, #1A1A12 0%, #0F0F0A 100%) ); /* ── Remaining compatibility aliases ── */ --copper-500: #C07A3E; --indigo-700: #3241C0; --max: 1200px; /* ════════════════════════════════════════════════════════════════════ ACCENT PALETTE SHORTHAND TOKENS These map --teal-50, --teal-600 etc. to adaptive light-dark() pairs. Background (-50) tokens: pastel in light, dark-tinted in dark. Foreground (-600/-800) tokens: deep in light, bright/mid in dark. Used by: icon containers, MVP cards, mandate badges, career icons, tag chips, and anywhere an accent colour appears on a surface card. ════════════════════════════════════════════════════════════════════ */ /* ── Teal ── */ --teal-50: light-dark(#E1F5EE, rgba(92,202,165,0.14)); --teal-200: light-dark(#5DCAA5, #4ECBA8); --teal-500: light-dark(#1C9A78, #2BB88E); --teal-600: light-dark(#0F6E56, #4ECBA8); --teal-700: light-dark(#0B5A46, #3DB899); --teal-800: light-dark(#085041, #5DCAA5); /* ── Purple ── */ --purple-50: light-dark(#EEEDFE, rgba(175,169,236,0.14)); --purple-200: light-dark(#AFA9EC, #C4BFFA); --purple-600: light-dark(#534AB7, #AFA9EC); --purple-800: light-dark(#3C3489, #C4BFFA); --purple-900: light-dark(#26215C, #D4CFFF); /* ── Coral ── */ --coral-50: light-dark(#FAECE7, rgba(240,153,123,0.14)); --coral-200: light-dark(#F0997B, #F5C4B3); --coral-600: light-dark(#993C1D, #F0997B); --coral-800: light-dark(#712B13, #F5C4B3); --coral-900: light-dark(#4A1B0C, #FFDDD1); /* ── Indigo ── */ --indigo-50: light-dark(#ECEFFE, rgba(139,149,240,0.14)); --indigo-300: light-dark(#8B95F0, #A5AEFD); --indigo-500: light-dark(#5460DE, #8B95F0); --indigo-700: light-dark(#3241C0, #7B87EE); /* ── Amber ── */ --amber-50: light-dark(#FAEEDA, rgba(248,166,31,0.12)); --amber-200: light-dark(#FAC775, #F8C060); --amber-600: light-dark(#EF9F27, #F8A61F); --amber-800: light-dark(#633806, #E09310); } /* ── Theme application ── */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } html { transition: background-color 0.25s ease, color 0.25s ease; }