/* ============================================================ Energy Trade — design tokens v2.0.0-phase0 (ds_v2) GENERATED FROM tokens.json — do not hand-edit values here. PHASE 0: definitions only. Every rule is scoped to .ds-v2, which is applied by flags.js ONLY when the ds_v2 flag is on. With the flag off (default) this file changes zero pixels. ============================================================ */ @layer ds-v2 { :root { /* ---- color · web (Terminal Green) ---- */ --st-bg-0: #0F0D0B; --st-bg-1: #161310; --st-bg-2: #201A15; --st-border: #28221E; --st-border-strong: #3A322C; --st-ink: #E6E2DD; --st-ink-dim: #8C847E; --st-ink-faint: #665F5A; --st-green: #F5A623; --st-green-ink: #120C02; --st-red: #FF5A57; /* risk only — never decoration */ --st-amber: #F2B33D; --st-link-hover: #FFCF7A; --st-focus-ring: rgba(245, 166, 35, 0.45); /* ---- color · glass (iOS + share cards only) ---- */ --gl-bg: #04070D; --gl-panel: rgba(125, 160, 255, 0.06); --gl-border: rgba(140, 175, 255, 0.16); --gl-ink: #E9EEF8; --gl-ink-dim: #8B96AF; --gl-accent: #6ED2FF; --gl-accent-ink: #04121C; --gl-up: #46DB9B; --gl-down: #FF5A57; /* matches --st-red risk system — no pink drift */ --gl-warn: #F5B84A; --gl-glow: 0 0 60px rgba(110, 210, 255, 0.10); /* ---- color · share-card heat (Contrarian scale) ---- */ --sc-heat-green: #2BD576; --sc-heat-amber: #FFB020; --sc-heat-red: #FF4438; /* ---- font families ---- */ --font-sans: 'IBM Plex Sans', -apple-system, Helvetica, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --font-editorial: 'Newsreader', Georgia, serif; /* research routes only */ /* ---- type scale (font shorthand) ---- */ --t-display: 700 52px/1.05 var(--font-sans); --t-h1: 700 32px/1.15 var(--font-sans); --t-h2: 600 22px/1.25 var(--font-sans); --t-h3: 600 17px/1.3 var(--font-sans); --t-body: 400 14px/1.6 var(--font-sans); --t-small: 400 12px/1.5 var(--font-sans); --t-num-lg: 600 32px/1.1 var(--font-mono); /* scales 32-72 for hero stats */ --t-num: 400 13px/1.4 var(--font-mono); --t-label: 500 10px/1.2 var(--font-mono); --ls-tight: -0.02em; --ls-label: 0.14em; /* ---- spacing / sizing ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --row-h: 36px; --row-touch: 52px; --gutter: 28px; --gutter-mobile: 16px; /* ---- radius ---- */ --r-control: 4px; --r-card: 4px; --r-pill: 999px; --r-glass: 18px; /* iOS + share cards only — never web terminal */ } /* ---- Energy Trade DAYLIGHT palette (light mode) ---- Same semantic tokens, light values: green-graphite institutional — never blue. html.ds-v2[data-theme="light"] (0-2-1) outranks the :root defaults above AND every legacy html[data-theme="light"] palette (0-1-1), so light mode stays Energy Trade regardless of stylesheet load order. AA on --st-bg-0: green #128A52 ≈4.7:1, ink #17201A ≈14:1, amber #8F6A14 ≈4.8:1, red ≈4.6:1. */ html.ds-v2[data-theme="light"] { color-scheme: light; --st-bg-0: #F5F7F4; --st-bg-1: #ECF0EB; --st-bg-2: #E3E9E2; --st-border: #D3DBD2; --st-border-strong: #B9C4B8; --st-ink: #17201A; --st-ink-dim: #4E5C52; --st-ink-faint: #78847B; --st-green: #128A52; --st-green-ink: #FFFFFF; --st-red: #C2413D; /* risk only — never decoration */ --st-amber: #8F6A14; --st-link-hover: #0B6B3D; --st-focus-ring: rgba(18, 138, 82, 0.4); } /* Everything below applies ONLY inside a .ds-v2 scope (set on by flags.js when ds_v2 is enabled). */ .ds-v2 { background: var(--st-bg-0); color: var(--st-ink); font: var(--t-body); font-family: var(--font-sans); /* native controls (checkbox/radio/progress/range) follow the brand — never blue */ accent-color: var(--st-green); } /* links: santro green, never browser blue */ .ds-v2 a { color: var(--st-green); text-decoration: none; } .ds-v2 a:hover { color: var(--st-link-hover); } .ds-v2 :focus-visible { outline: 2px solid var(--st-focus-ring); outline-offset: 1px; } /* belt-and-suspenders: any UA-drawn focus ring (plain :focus, programmatic focus) is recolored green — the browser default is #005FCC blue. */ .ds-v2 :focus { outline-color: var(--st-focus-ring); } .ds-v2 ::selection { background: var(--st-focus-ring); } /* numbers: always mono + tabular */ .ds-v2 .num, .ds-v2 [data-num] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } }