/* ============================================================ Santro AI — 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: #0B0F0D; --st-bg-1: #101613; --st-bg-2: #15201A; --st-border: #1E2822; --st-border-strong: #2C3A32; --st-ink: #DDE6E0; --st-ink-dim: #7E8C84; --st-ink-faint: #5A665F; --st-green: #3BE08F; --st-green-ink: #06120C; --st-red: #FF5A57; /* risk only — never decoration */ --st-amber: #F2B33D; --st-link-hover: #7FEDB6; --st-focus-ring: rgba(59, 224, 143, 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 */ } /* 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); } /* 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; } .ds-v2 ::selection { background: rgba(59, 224, 143, 0.25); } /* numbers: always mono + tabular */ .ds-v2 .num, .ds-v2 [data-num] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } }