/* Winston V3 — design tokens. Calm, retail-grade fintech. Inter for prose, JetBrains Mono for numbers, warm-cream surface, single AI accent. Independent of V2 tokens so V2 stays untouched. */ :root { /* ── Surfaces — warm cream (calmer than V2's pure white) ────────────── */ --bg: #FBFAF7; --bg-soft: #F5F3EE; --surface: #FFFFFF; --surface-2: #F8F6F1; --surface-3: #EFEDE6; --surface-hover: #F2F0E9; --surface-active:#E8E5DC; /* ── Lines ──────────────────────────────────────────────────────────── */ --border: #E4E0D6; --border-strong: #C7C1B0; --hairline: rgba(0,0,0,0.06); /* ── Text ───────────────────────────────────────────────────────────── */ --ink: #1A1A1A; --ink-2: #2E2E2E; --ink-3: #4A4A4A; --ink-muted: #7A7770; --ink-faint: #ABA89F; --ink-inverse: #FFFFFF; /* ── Single AI accent — Winston's voice color ──────────────────────── */ --ai: #1F3F8F; /* deep, calm cobalt */ --ai-2: #2A4FAA; --ai-soft: rgba(31, 63, 143, 0.08); --ai-line: rgba(31, 63, 143, 0.20); --ai-glow: rgba(31, 63, 143, 0.30); /* ── Brand gold — used sparingly (logo, achievement chips) ─────────── */ --gold: #B88A3A; --gold-soft: rgba(184, 138, 58, 0.10); /* ── Money: up / down — always paired with sign + arrow, never alone */ --money-up: #15803D; --money-up-soft: rgba(21, 128, 61, 0.10); --money-up-line: rgba(21, 128, 61, 0.30); --money-down: #C8201F; --money-down-soft: rgba(200, 32, 31, 0.10); --money-down-line: rgba(200, 32, 31, 0.30); /* ── Mode badges — paper (calm) and live (loud) ────────────────────── */ --mode-paper: #538C5C; --mode-paper-soft: rgba(83, 140, 92, 0.12); --mode-paper-line: rgba(83, 140, 92, 0.35); --mode-live: #D97706; /* amber — never red (red = error) */ --mode-live-soft: rgba(217, 119, 6, 0.14); --mode-live-line: rgba(217, 119, 6, 0.45); /* ── Status: Winston dot ───────────────────────────────────────────── */ --status-ok: #15803D; --status-warn: #D97706; --status-err: #C8201F; --status-idle: #ABA89F; /* ── Caution / warn — destructive-but-reversible actions (cancel orders, pause engines). Distinct from --money-down which signals loss territory; --warn signals "you can undo this, but be sure". */ --warn: #D97706; --warn-soft: rgba(217, 119, 6, 0.14); --warn-line: rgba(217, 119, 6, 0.40); /* completes the warn family (cf. money/mode/ai -line) */ /* ── Sleeves (plain-English names rendered in copy) ────────────────── */ --sleeve-swing: #B88A3A; /* Swing — gold */ --sleeve-swing-soft: rgba(184, 138, 58, 0.12); --sleeve-scalp: #1F3F8F; /* Intraday — cobalt */ --sleeve-scalp-soft: rgba(31, 63, 143, 0.10); --sleeve-rotation: #0E8C8C; /* Rotation — teal (#319; dormant, no backend) */ --sleeve-rotation-soft: rgba(14, 140, 140, 0.10); --sleeve-short: #7C3AED; /* Hedge — violet */ --sleeve-short-soft: rgba(124, 58, 237, 0.10); --sleeve-options: #3D8B6A; /* Insurance — green */ --sleeve-options-soft: rgba(61, 139, 106, 0.12); --sleeve-reversion: #C25E4A; /* Reversion — terracotta (#418; dormant) */ --sleeve-reversion-soft: rgba(194, 94, 74, 0.10); --sleeve-trend: #2E7DC2; /* Trend — sky blue (7th; dormant) */ --sleeve-trend-soft: rgba(46, 125, 194, 0.10); --sleeve-income: #A23E8C; /* Income — plum (8th, the Wheel; dormant) */ --sleeve-income-soft: rgba(162, 62, 140, 0.10); --sleeve-pead: #B5495B; /* PEAD — rosewood (9th, post-earnings drift; dormant) */ --sleeve-pead-soft: rgba(181, 73, 91, 0.10); --sleeve-cta: #1B9E8A; /* Macro Trend — teal (10th, cross-asset trend; dormant) */ --sleeve-cta-soft: rgba(27, 158, 138, 0.10); --sleeve-momentum: #C2780E; /* Momentum — amber (11th, relative-strength leaders; dormant) */ --sleeve-momentum-soft: rgba(194, 120, 14, 0.10); /* ── Spacing (4px base) ────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* ── Typography ────────────────────────────────────────────────────── */ --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-display: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace; --type-xs: 12px; --type-sm: 13px; --type-base: 16px; --type-md: 17px; --type-lg: 20px; --type-xl: 24px; --type-2xl: 32px; --type-3xl: 40px; --type-hero: 56px; --type-hero-mobile: 44px; --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; --weight-black: 800; --tracking-tighter: -0.04em; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-wide: 0.02em; --tracking-widest: 0.10em; --leading-tight: 1.1; --leading-snug: 1.3; --leading-base: 1.55; /* ── Radius ────────────────────────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --radius-full: 999px; /* ── Shadow — very subtle. Calm products don't shadow loudly. ────── */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.03); --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03); --shadow-md: 0 4px 12px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.03); --shadow-lg: 0 12px 32px rgba(0,0,0,0.07), 0 4px 12px rgba(0,0,0,0.04); /* ── Motion ───────────────────────────────────────────────────────── */ --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 320ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ── Z-index ──────────────────────────────────────────────────────── */ --z-base: 1; --z-content: 10; --z-topbar: 50; --z-fab: 70; --z-sticky: 100; --z-popover: 200; --z-drawer: 200; --z-modal: 300; --z-toast: 400; /* ── Layout ───────────────────────────────────────────────────────── */ --sidebar-w: 240px; --top-bar-h: 56px; --bottom-nav-h: 64px; --last-action-footer-h: 22px; --bottom-stack-h: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px)); /* Slice 4-density (2026-05-27): tighter content-pad reclaims the ~40px wasted gutter on each side at narrative density. Dense + fluid screens use the wider --content-max-dense so data tables don't waste right-side whitespace on a 1920px viewport. Narrative cap stays at 1100px (~70-char line length) for read-heavy surfaces. */ --content-pad: var(--space-6); --content-pad-mobile: var(--space-4); --content-max: 1100px; --content-max-dense: 1600px; --tap-min: 48px; /* ── Breakpoints (canonical contract — see dashboard/docs/architecture/v3-responsive-layout.md). CSS custom properties can't be used inside @media queries themselves, but these are the single source of truth that media queries should match. --bp-sm: collapse top-bar labels, single-column layouts --bp-md: small tablet — two-column reflows --bp-lg: desktop — sidebar appears, bottom-nav hides --bp-xl: widescreen — relax max-width content gutters Only the values below may appear in new @media rules. */ --bp-sm: 600px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1400px; /* ── Semantic type roles (the one heading-type API) ───────────────────── Reference these — not the raw scale — for prose/heading type so a level's size/weight/tracking changes in one place. base.css applies them to h1–h6; ported component CSS should reach for these too. Ported verbatim from the design kit (colors_and_type.css). */ --h1-size: var(--type-3xl); --h1-weight: var(--weight-bold); --h1-tracking: var(--tracking-tighter); --h2-size: var(--type-2xl); --h2-weight: var(--weight-bold); --h2-tracking: var(--tracking-tight); --h3-size: var(--type-xl); --h3-weight: var(--weight-semi); --h3-tracking: var(--tracking-tight); --h4-size: var(--type-lg); --h4-weight: var(--weight-semi); --body-size: var(--type-base); --body-leading: var(--leading-base); --caption-size: var(--type-sm); --caption-color: var(--ink-muted); }