/* tokens.css — design tokens (Phase 4.1: trading-terminal foundation). * * Adopts the varunnidhi.com design language (design-language.html): a warm, * dark-first system built on a surface ramp + hairlines (no drop shadows), a * single signal-orange accent, three type families, and one house easing. * Dark is the default (:root); [data-theme="light"] overrides every colour at * full parity. The active theme is set on before first paint by * js/theme-init.js — no flash. * * Deliberate divergence from the portfolio DL's "one accent only" rule: a * trading terminal legitimately needs semantic pos/neg/warn colours. They are * retained here, but are for signed values and state only — never decoration. * * The pre-4.1 legacy aliases (--bg, --text, --border, --radius, …) are gone: * phases 4.2–4.5 migrated every component onto the primary ramp, and the dead * aliases were retired in 4.5. Components reference variables only — never raw hex. */ :root { color-scheme: dark; /* — Surfaces (darkest → lightest) — */ --canvas: #0a0b0d; /* page background, recessed inputs/wells */ --surface: #131419; /* cards, panels, header */ --surface-2: #1b1c22; /* code blocks, insets that sit above a card */ /* — Lines / hairlines (carry depth in place of shadow) — */ --line: rgba(255, 255, 255, 0.08); /* default hairline */ --line-strong: rgba(255, 255, 255, 0.16); /* dividers, ghost buttons, hover */ /* — Ink (text) — */ --ink: #f4f4f5; /* headings, primary text, button labels */ --ink-muted: #9b9da6; /* body copy, descriptions */ --ink-faint: #61636c; /* captions, mono micro-labels, disabled */ /* — Accent (the one spark) — */ --accent: #ff5d2e; /* CTAs, links, active state, focus rings */ --accent-soft: #ff8b66; /* primary-button hover (lighter in dark) */ --accent-tint: color-mix(in srgb, var(--accent) 14%, var(--surface)); /* active-row / active-chip fill */ /* — Financial semantics (retained divergence; signed values + state only) — */ --pos: #3fb950; --neg: #f85149; --warn: #f5a524; /* — Atmosphere — */ --grid-line: rgba(255, 255, 255, 0.035); --grain-opacity: 0.35; --grain-blend: overlay; --skeleton: rgba(255, 255, 255, 0.055); --scrollbar-thumb: #2c2d34; --scrollbar-thumb-hover: #3c3d45; /* — Type families — */ --font-display: "Bricolage Grotesque", "Geist", ui-sans-serif, sans-serif; --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; /* — Type scale — */ --fs-0: 0.8rem; --fs-1: 0.9rem; --fs-2: 1rem; --fs-3: 1.25rem; --fs-4: 1.5rem; /* — Layout — */ --wrap: 78rem; /* shell content width — wider/denser than the old blog column */ --cmdbar-h: 60px; /* sticky command-bar height — sticky data headers pin below it */ /* — Spacing — */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2.5rem; /* — Radii — */ --r-sm: 6px; /* nav chips, logo tile, icon buttons (square) */ --r-md: 8px; /* inputs, small wells */ --r-lg: 12px; /* compact cards, code blocks */ --r-xl: 16px; /* panels, large cards, dialog */ --r-pill: 999px; /* buttons, pills, tags */ /* — Motion (non-themed) — */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* the house easing */ --dur-fast: 0.2s; /* hovers, colour/border transitions */ --dur-mid: 0.3s; /* arrow nudges, theme cross-fade */ --dur-reveal: 0.8s; /* scroll-in reveal */ } [data-theme="light"] { color-scheme: light; --canvas: #f4f3ef; /* warm cream, not white */ --surface: #ffffff; --surface-2: #eceae3; --line: rgba(20, 21, 24, 0.1); --line-strong: rgba(20, 21, 24, 0.2); --ink: #16171a; --ink-muted: #565860; --ink-faint: #8b8d95; --accent: #e8460f; /* deeper for AA contrast on cream */ --accent-soft: #c93c0d; /* darker on hover in light mode */ --accent-tint: color-mix(in srgb, var(--accent) 10%, var(--surface)); --pos: #1a7f37; /* AA-legible greens/reds on cream */ --neg: #cf222e; --warn: #9a6700; --grid-line: rgba(20, 21, 24, 0.055); --grain-opacity: 0.22; --grain-blend: multiply; --skeleton: rgba(20, 21, 24, 0.06); --scrollbar-thumb: #cdccc4; --scrollbar-thumb-hover: #b6b4aa; }