/* ============================================================ ECOSPHERE DESIGN SYSTEM — TOKENS 4 themes (petrol · terra · meridian · horizon) × 2 modes (light · dark) Usage: The accent is the ONE themeable knob. Severity is semantic and fixed. ============================================================ */ /* ---------- Mode-independent primitives ---------- */ :root { /* Type */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-ui: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif; --font-data: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace; /* Fixed rem type scale (product register: 1.166 ratio) */ --text-xs: 0.72rem; /* 11.5px captions, provenance chips */ --text-sm: 0.8125rem; /* 13px secondary UI, table body */ --text-base: 0.875rem; /* 14px primary UI */ --text-md: 1rem; /* 16px emphasized body */ --text-lg: 1.1875rem; /* 19px panel titles */ --text-xl: 1.4375rem; /* 23px page titles (display face) */ --text-2xl: 1.75rem; /* 28px section heroes */ --text-3xl: 2.25rem; /* 36px briefing headlines */ --text-num-lg: 1.625rem; /* 26px stat numerals (data face) */ /* Spacing (4px base) */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; /* Radii */ --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-full: 999px; /* Z-scale (semantic) */ --z-dropdown: 100; --z-sticky: 200; --z-backdrop: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* quint-ish */ --dur-fast: 150ms; --dur-base: 200ms; --dur-slow: 250ms; /* Severity — BADGE colors (ratified brand; never themed, never color-alone) */ --sev-low: #2F9E44; --sev-atrisk: #F5A623; --sev-stressed: #E03131; --sev-stranded: #862E9C; } /* ---------- Theme accents (the one knob) + light-mode neutrals ---------- */ [data-theme="petrol"] { --accent: #0E7C7B; --accent-strong: #0A5F5E; --accent-ink-on: #FFFFFF; --ink: #1F2D2E; --ink-2: #435152; --muted: #5C6B6B; --border: #DCE4E4; --border-strong: #C2CFCF; --surface: #FFFFFF; --surface-2: #F0F4F4; --bg: #F6F8F8; } [data-theme="terra"] { --accent: #C25E2E; --accent-strong: #9C4A22; --accent-ink-on: #FFFFFF; --ink: #2E2924; --ink-2: #4E463D; --muted: #6F665C; --border: #E8E0D5; --border-strong: #D4C8B8; --surface: #FFFFFF; --surface-2: #F3EEE6; --bg: #FAF7F3; } [data-theme="meridian"] { --accent: #0F8A4D; --accent-strong: #0B6B3B; --accent-ink-on: #FFFFFF; --ink: #22272B; --ink-2: #444C53; --muted: #5A6570; --border: #DDE3E0; --border-strong: #C4CDC8; --surface: #FFFFFF; --surface-2: #EDF2EF; --bg: #F4F6F5; } [data-theme="horizon"] { --accent: #4149B8; --accent-strong: #333A94; --accent-ink-on: #FFFFFF; --ink: #23263A; --ink-2: #454962; --muted: #61667F; --border: #E0E2EC; --border-strong: #C8CBDC; --surface: #FFFFFF; --surface-2: #EEF0F6; --bg: #F5F6FA; } /* ---------- Light mode (default) ---------- */ :root, [data-mode="light"] { --accent-soft: color-mix(in oklab, var(--accent) 12%, var(--surface)); --accent-subtle: color-mix(in oklab, var(--accent) 6%, var(--bg)); --focus-ring: color-mix(in oklab, var(--accent) 55%, transparent); --shadow-1: 0 1px 2px rgb(15 30 30 / 0.06); --shadow-2: 0 2px 8px rgb(15 30 30 / 0.09); --shadow-3: 0 8px 28px rgb(15 30 30 / 0.14); --scrim: rgb(20 27 27 / 0.4); /* Severity — CHART FILLS, validated on light surfaces */ --sev-low-fill: #2F9E44; --sev-atrisk-fill: #C07C0A; --sev-stressed-fill: #E03131; --sev-stranded-fill: #862E9C; /* Severity tint rows/areas */ --sev-low-tint: rgb(47 158 68 / 0.10); --sev-atrisk-tint: rgb(192 124 10 / 0.10); --sev-stressed-tint: rgb(224 49 49 / 0.10); --sev-stranded-tint: rgb(134 46 156 / 0.10); /* Categorical series (fixed order, never cycled) — validated */ --cat-1: #4263EB; --cat-2: #0C93A9; --cat-3: #C2255C; --cat-4: #E8590C; --cat-5: #7048E8; /* Chart scaffolding */ --grid-line: color-mix(in oklab, var(--ink) 9%, transparent); --axis-line: color-mix(in oklab, var(--ink) 28%, transparent); --chart-label: var(--muted); /* Sequential ramp endpoints derive from accent */ --seq-min: color-mix(in oklab, var(--accent) 12%, var(--surface)); --seq-max: var(--accent-strong); --uncertainty-band: color-mix(in oklab, var(--accent) 14%, transparent); } /* ---------- Dark mode ---------- */ [data-mode="dark"] { --ink: #E8EEED; --ink-2: #B9C4C3; --muted: #8FA09F; --border: rgb(233 240 239 / 0.14); --border-strong: rgb(233 240 239 / 0.26); --surface: #1A2323; --surface-2: #212B2B; --bg: #141B1B; --accent-soft: color-mix(in oklab, var(--accent) 24%, var(--surface)); --accent-subtle: color-mix(in oklab, var(--accent) 12%, var(--bg)); --focus-ring: color-mix(in oklab, var(--accent) 65%, transparent); --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-2: 0 2px 10px rgb(0 0 0 / 0.5); --shadow-3: 0 10px 32px rgb(0 0 0 / 0.6); --scrim: rgb(0 0 0 / 0.55); --sev-low-fill: #3FAE54; --sev-atrisk-fill: #C17E08; --sev-stressed-fill: #E5484D; --sev-stranded-fill: #A34FBE; --sev-low-tint: rgb(63 174 84 / 0.16); --sev-atrisk-tint: rgb(193 126 8 / 0.16); --sev-stressed-tint: rgb(229 72 77 / 0.16); --sev-stranded-tint: rgb(163 79 190 / 0.16); --cat-1: #5C7CFA; --cat-2: #189FB4; --cat-3: #E64980; --cat-4: #E8590C; --cat-5: #9775FA; --grid-line: rgb(233 240 239 / 0.09); --axis-line: rgb(233 240 239 / 0.3); --seq-min: color-mix(in oklab, var(--accent) 20%, var(--surface)); --seq-max: color-mix(in oklab, var(--accent) 70%, white); --uncertainty-band: color-mix(in oklab, var(--accent) 22%, transparent); } /* Dark surfaces tinted toward each theme's hue */ [data-mode="dark"][data-theme="terra"] { --surface:#241F1A; --surface-2:#2B2620; --bg:#1B1713; --ink:#EFE9E2; --ink-2:#C7BEB2; --muted:#A2988A; } [data-mode="dark"][data-theme="meridian"]{ --surface:#1B2320; --surface-2:#222B27; --bg:#151B18; --ink:#E9EEEB; --ink-2:#BBC6C0; --muted:#91A099; } [data-mode="dark"][data-theme="horizon"] { --surface:#1D1F2E; --surface-2:#242637; --bg:#171826; --ink:#E9EAF2; --ink-2:#BCBFD2; --muted:#9297B0; }