/* ╔════════════════════════════════════════════════════════════╗ * ║ Trading Arbor · Design Tokens ║ * ║ v2.0 · Jun 2026 — compass rebrand (blue #2E64ED, navy ║ * ║ #012973, Hanken Grotesk + Bricolage Grotesque) ║ * ╠════════════════════════════════════════════════════════════╣ * ║ ║ * ║ Drop this file at the top of your global stylesheet. ║ * ║ ║ * ║ Theme toggles via [data-theme="dark"|"light"] on . ║ * ║ Default is light. Dark mode is REQUIRED on every product ║ * ║ surface — see the toggle snippet in INTEGRATION.md. ║ * ║ ║ * ║ Naming convention: ║ * ║ ║ * ║ --ta-{category}-{subgroup}-{variant} ║ * ║ ║ * ║ Categories: ║ * ║ color colors ║ * ║ font typeface stacks ║ * ║ fs font-size ║ * ║ fw font-weight ║ * ║ tracking letter-spacing ║ * ║ radius border-radius ║ * ║ space gap / padding scale ║ * ║ shadow box-shadow ║ * ║ ║ * ║ Subgroups inside `color`: ║ * ║ bg page / row tints ║ * ║ surface cards / panels ║ * ║ border dividers, hairlines ║ * ║ text ink (foreground typography) ║ * ║ brand cobalt scale (50/100/400/500/600) ║ * ║ accent semantic aliases to brand ║ * ║ money the ONLY colored-data system ║ * ║ status warn (caution) + future states ║ * ║ wordmark brand wordmark fill ║ * ║ ║ * ╚════════════════════════════════════════════════════════════╝ */ /* ───────────────────────────────────────────────────────────── * THEME · light (default) * ─────────────────────────────────────────────────────────── */ :root, :root[data-theme="light"] { /* ─── Surfaces ─────────────────────────────────────────── */ --ta-color-bg: #F5F7FB; /* page background (cool off-white) */ --ta-color-bg-alt: #EEF2F8; /* subtle row tint, hover surface */ --ta-color-surface: #FFFFFF; /* cards */ --ta-color-surface-raised: #FAFBFD; /* card header band, table head */ /* ─── Borders ──────────────────────────────────────────── */ --ta-color-border: #E4E9F1; /* default dividers, hairlines */ --ta-color-border-strong: #D2DAE6; /* inputs, prominent dividers */ /* ─── Text (ink) ───────────────────────────────────────── */ --ta-color-text: #0D173D; /* ink — headings, primary copy */ --ta-color-text-muted: #3A4358; /* body copy */ --ta-color-text-subtle: #6B7488; /* meta, labels, helpers */ --ta-color-text-hint: #9AA3B5; /* placeholders, disabled */ /* ─── Brand · Trading Arbor blue scale ─────────────────── * * Canonical palette from the brand guide. The compass + * * primary action / links / focus all key off --brand-500. */ --ta-color-brand-50: #EEF3FE; /* tint fills */ --ta-color-brand-100: #E4ECFE; /* soft fills, badge backgrounds */ --ta-color-brand-400: #5E86F2; /* hover ring, focus */ --ta-color-brand-500: #2E64ED; /* PRIMARY brand color (ta-blue) */ --ta-color-brand-600: #1F4FD6; /* hover / active */ /* ─── Brand navy ───────────────────────────────────────── * Reversed-logo background, dark brand panels, OG/social * card. NOT the dark-theme UI surface (that stays the near- * black navy stack below for legibility). */ --ta-color-navy: #012973; /* ─── Accent (semantic aliases) ────────────────────────── */ --ta-color-accent: var(--ta-color-brand-500); --ta-color-accent-hover: var(--ta-color-brand-600); --ta-color-accent-soft: var(--ta-color-brand-50); --ta-color-accent-ring: var(--ta-color-brand-400); /* ─── Money (FUNCTIONAL — the only colored-data rule) ──── * * Every dollar value uses --ta-color-money-gain. * P+L losses use --ta-color-money-loss. * Tickers, quantities, percentages stay neutral. * ──────────────────────────────────────────────────────── */ --ta-color-money-gain: #10A05B; --ta-color-money-gain-soft: #E3F5EB; --ta-color-money-loss: #DC2626; --ta-color-money-loss-soft: #FCE7E7; /* ─── Status ───────────────────────────────────────────── */ --ta-color-warn: #D97706; --ta-color-warn-soft: #FEF3C7; /* ─── Benchmark (SPY overlay) ───────────────────────────── * Used by EquityChartV2 in shared/console_react.html for the * SPY comparison line. Slate-gray so it reads as "neutral * benchmark" without competing with cobalt accent or the * gain/loss money colors for visual weight. */ --ta-color-spy: #5B6478; /* ─── Wordmark fill ────────────────────────────────────── */ --ta-color-wordmark: #0D173D; /* ─── Shadows (subtle, two-stop) ───────────────────────── */ --ta-shadow-1: 0 1px 2px rgba(14,23,38,0.04), 0 1px 1px rgba(14,23,38,0.03); --ta-shadow-2: 0 1px 2px rgba(14,23,38,0.04), 0 4px 12px rgba(14,23,38,0.05); --ta-shadow-3: 0 1px 2px rgba(14,23,38,0.04), 0 8px 24px rgba(14,23,38,0.06); --ta-shadow-focus: 0 0 0 3px rgba(46,100,237,0.20); } /* ───────────────────────────────────────────────────────────── * THEME · dark (required on every product surface) * ─────────────────────────────────────────────────────────── */ :root[data-theme="dark"] { /* Surfaces — navy stack */ --ta-color-bg: #0B1220; --ta-color-bg-alt: #0F1729; --ta-color-surface: #131B2E; --ta-color-surface-raised: #1A2440; /* Borders — semi-transparent so they ride any surface */ --ta-color-border: rgba(255,255,255,0.06); --ta-color-border-strong: rgba(255,255,255,0.10); /* Text — high-contrast whites */ --ta-color-text: #F2F5FA; --ta-color-text-muted: rgba(242,245,250,0.78); --ta-color-text-subtle: rgba(242,245,250,0.55); --ta-color-text-hint: rgba(242,245,250,0.36); /* Brand — soft fills lifted to alpha tints, * * accent/hover lifted for AA contrast on dark surfaces */ --ta-color-brand-50: rgba(46,100,237,0.12); --ta-color-brand-100: rgba(46,100,237,0.20); --ta-color-brand-400: #5E86F2; --ta-color-brand-500: #5E86F2; --ta-color-brand-600: #85A5F5; --ta-color-navy: #012973; --ta-color-accent: var(--ta-color-brand-500); --ta-color-accent-hover: var(--ta-color-brand-600); --ta-color-accent-soft: var(--ta-color-brand-50); --ta-color-accent-ring: var(--ta-color-brand-400); /* Money — saturated for dark backgrounds */ --ta-color-money-gain: #22E07A; --ta-color-money-gain-soft: rgba(34,224,122,0.14); --ta-color-money-loss: #FF6B6B; --ta-color-money-loss-soft: rgba(255,107,107,0.14); /* Status */ --ta-color-warn: #F5A623; --ta-color-warn-soft: rgba(245,166,35,0.14); /* Benchmark (SPY overlay) — lighter slate on dark theme so the * dashed comparison line reads above the surface without going * neon-bright. */ --ta-color-spy: #A4ADC2; /* Wordmark — flips to white (reversed lockup on dark) */ --ta-color-wordmark: #F2F5FA; /* Shadows — deeper on dark to read over surface lift */ --ta-shadow-1: 0 1px 2px rgba(0,0,0,0.35); --ta-shadow-2: 0 1px 2px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.40); --ta-shadow-3: 0 1px 2px rgba(0,0,0,0.35), 0 16px 40px rgba(0,0,0,0.45); --ta-shadow-focus: 0 0 0 3px rgba(94,134,242,0.32); } /* ───────────────────────────────────────────────────────────── * STATIC TOKENS (theme-independent) * Type, sizes, weights, tracking, radius, spacing. * ─────────────────────────────────────────────────────────── */ :root { /* ─── Type ─────────────────────────────────────────────── * * Brand guide: * * • UI + body → Hanken Grotesk (humanist grotesque) * * • Numbers / data / tickers → Bricolage Grotesque, always * * with font-variant-numeric: tabular-nums so columns line * * up. --ta-font-mono is aliased to it because this app's * * "mono" token is used for tabular DATA, not code. * * • Literal code only → --ta-font-code (true monospace). */ --ta-font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --ta-font-num: "Bricolage Grotesque", "Hanken Grotesk", -apple-system, sans-serif; --ta-font-mono: var(--ta-font-num); /* data/tickers/money → Bricolage */ --ta-font-code: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* ─── Font weight ──────────────────────────────────────── */ --ta-fw-regular: 400; --ta-fw-medium: 500; --ta-fw-semibold: 600; /* ─── Tracking (letter-spacing) ────────────────────────── */ --ta-tracking-tight: -0.02em; /* headings */ --ta-tracking-display: -0.025em; /* hero display */ --ta-tracking-caps: 0.08em; /* small-caps labels */ --ta-tracking-mono: 0.04em; /* mono tickers */ /* ─── Font size scale ──────────────────────────────────── */ --ta-fs-10: 10.5px; --ta-fs-meta: 11px; /* small-caps labels */ --ta-fs-mono: 12px; /* dense mono data */ --ta-fs-body-s: 12.5px; /* secondary body */ --ta-fs-body: 13.5px; /* default body */ --ta-fs-body-l: 15px; /* lead body */ --ta-fs-h3: 17px; /* card title */ --ta-fs-h2: 22px; /* section heading */ --ta-fs-h1: 28px; /* page heading */ --ta-fs-display: 40px; /* hero / marketing */ /* ─── Border radius (5px GLOBAL — non-negotiable) ──────── */ --ta-radius: 5px; /* everything: cards/btn/input */ --ta-radius-sm: 3px; /* chip-internal accents only */ /* ─── Spacing scale ────────────────────────────────────── */ --ta-space-1: 4px; --ta-space-2: 8px; --ta-space-3: 12px; --ta-space-4: 16px; --ta-space-5: 20px; --ta-space-6: 24px; --ta-space-8: 32px; --ta-space-10: 48px; --ta-space-12: 64px; /* ─── Motion ───────────────────────────────────────────── * * Reach for these instead of hard-coded durations. * * Keep animations short and subtle — no bouncing, no overshoot.* * Respects prefers-reduced-motion below. * * ──────────────────────────────────────────────────────── */ --ta-duration-fast: 120ms; /* hovers, focus rings */ --ta-duration-base: 200ms; /* fade-ins, modal open */ --ta-duration-slow: 320ms; /* drawers, large transitions */ --ta-duration-flash: 600ms; /* number-update flash decay */ --ta-ease-out: cubic-bezier(0.2, 0.7, 0.3, 1); --ta-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ta-ease-linear: linear; } /* ───────────────────────────────────────────────────────────── * REDUCED MOTION * Respect OS-level "reduce motion" preference. We don't kill * every transition — we shorten them so the UI still feels * responsive, just without sweeping movement. * ─────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --ta-duration-fast: 0ms; --ta-duration-base: 0ms; --ta-duration-slow: 0ms; --ta-duration-flash: 0ms; } } /* ───────────────────────────────────────────────────────────── * BODY DEFAULTS * ─────────────────────────────────────────────────────────── */ html, body { background: var(--ta-color-bg); color: var(--ta-color-text-muted); font-family: var(--ta-font-sans); font-size: var(--ta-fs-body); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ───────────────────────────────────────────────────────────── * BRAND WORDMARK · use anywhere the brand name appears in product. * The icon mark is for favicon + OS contexts ONLY. * ─────────────────────────────────────────────────────────── */ .ta-wordmark { font-family: var(--ta-font-sans); font-weight: var(--ta-fw-semibold); letter-spacing: -0.02em; color: var(--ta-color-wordmark); display: inline-block; line-height: 1; } /* ───────────────────────────────────────────────────────────── * MONEY RULE · THE ONLY FUNCTIONAL COLOR RULE * * Any dollar value → .ta-money (green by default). * P+L losses → .ta-money--loss (red). * * Tickers / engine names / quantities / percentages stay neutral. * Background fills, borders, and chrome NEVER use these colors. * ─────────────────────────────────────────────────────────── */ .ta-money, .ta-money--gain { color: var(--ta-color-money-gain); font-family: var(--ta-font-num); font-variant-numeric: tabular-nums; font-weight: var(--ta-fw-medium); } .ta-money--loss { color: var(--ta-color-money-loss); font-family: var(--ta-font-num); font-variant-numeric: tabular-nums; font-weight: var(--ta-fw-medium); } /* ╔════════════════════════════════════════════════════════════╗ * ║ LEGACY TOKEN ALIAS BLOCK · v0.114.1 ║ * ╠════════════════════════════════════════════════════════════╣ * ║ ║ * ║ Maps the pre-refresh --color-* / --font-* / --space-* / ║ * ║ --radius-* / --shadow-* / --gradient-* token names to ║ * ║ their --ta-* equivalents so consumers that haven't been ║ * ║ migrated yet (web_dashboard.py embedded templates, ║ * ║ stripe_webhook rendered HTML, trader-app-shell.css, ║ * ║ trader-auth-shell.css, marketing.html, backtest.html, ║ * ║ offline.html, arbor-base.css class rules) keep resolving ║ * ║ after arbor-tokens.css is deleted. ║ * ║ ║ * ║ This is the back-compat shim for the design refresh — ║ * ║ every alias is intentional. When a consumer file gets ║ * ║ migrated to use --ta-* directly, the corresponding alias ║ * ║ here can be deleted. Once every alias is unused, this ║ * ║ whole block goes away. ║ * ║ ║ * ║ Hue choices: surfaces, borders, text, money, status — all ║ * ║ forwarded to --ta-*. BRAND now resolves to the Trading ║ * ║ Arbor blue (#2E64ED) in literal hex form so every legacy ║ * ║ consumer (login, signup, /account, /backtest, ║ * ║ /transparency, embedded templates) carries the real brand ║ * ║ color without each needing an individual migration. The ║ * ║ cobalt→cyan gradient is retired: the mark is a solid-blue ║ * ║ compass, so the "accent" family collapses into the blue ║ * ║ scale (no cyan literals remain). ║ * ║ ║ * ╚════════════════════════════════════════════════════════════╝ */ :root, :root[data-theme="light"] { /* Surfaces */ --color-bg-page: var(--ta-color-bg); --color-bg-card: var(--ta-color-surface); --color-bg-card-elevated: var(--ta-color-surface-raised); --color-bg-input: var(--ta-color-surface); --color-bg-overlay: rgba(14, 23, 38, 0.55); --color-surface: var(--ta-color-surface); /* Borders */ --color-border-subtle: var(--ta-color-border); --color-border-strong: var(--ta-color-border-strong); --color-border: var(--ta-color-border); /* Text */ --color-text-primary: var(--ta-color-text); --color-text-secondary: var(--ta-color-text-muted); --color-text-muted: var(--ta-color-text-subtle); --color-text-inverse: #ffffff; --color-text-link: #2E64ED; /* Trading Arbor blue */ --color-on-brand: #ffffff; /* Brand — Trading Arbor blue (#2E64ED). These legacy --color-brand-* names are consumed by not-yet-migrated embedded templates; they now resolve to the canonical brand so login / signup / /account / /backtest / /transparency all carry the real brand color. The old cobalt→cyan gradient is gone: the mark is a solid-blue compass, so the "accent" family collapses into the blue scale (no cyan). */ --color-brand-primary: #2E64ED; --color-brand-primary-soft: #5E86F2; --color-brand-primary-strong: #1F4FD6; --color-brand-accent: #5E86F2; --color-brand-accent-soft: #93B2F7; --color-brand-accent-strong: #1F4FD6; --color-brand-navy: #012973; --color-brand-slate: var(--ta-color-text-subtle); --color-brand-mist: var(--ta-color-bg); /* Money + status */ --color-positive: var(--ta-color-money-gain); --color-positive-soft: var(--ta-color-money-gain-soft); --color-negative: var(--ta-color-money-loss); --color-negative-soft: var(--ta-color-money-loss-soft); --color-warning: var(--ta-color-warn); --color-warning-soft: var(--ta-color-warn-soft); /* --color-info shares the brand hue — a few consumers paint info badges with this name. */ --color-info: #2E64ED; --color-info-soft: rgba(46, 100, 237, 0.10); /* Shadows (light) */ --shadow-sm: var(--ta-shadow-1); --shadow-md: var(--ta-shadow-2); --shadow-lg: var(--ta-shadow-3); /* Glow halo keyed to the brand blue so a button's halo matches its own fill. */ --shadow-glow-brand: 0 4px 16px rgba(46, 100, 237, 0.35); /* Hero gradient — light, brand-blue tint */ --gradient-hero: radial-gradient(ellipse at 50% 0%, #E4ECFE 0%, var(--ta-color-bg) 70%); } :root[data-theme="dark"] { /* Surfaces */ --color-bg-page: var(--ta-color-bg); --color-bg-card: var(--ta-color-surface); --color-bg-card-elevated: var(--ta-color-surface-raised); --color-bg-input: var(--ta-color-surface); --color-bg-overlay: rgba(11, 18, 32, 0.78); --color-surface: var(--ta-color-surface); /* Borders */ --color-border-subtle: var(--ta-color-border); --color-border-strong: var(--ta-color-border-strong); --color-border: var(--ta-color-border); /* Text */ --color-text-primary: var(--ta-color-text); --color-text-secondary: var(--ta-color-text-muted); --color-text-muted: var(--ta-color-text-subtle); --color-text-inverse: #ffffff; --color-text-link: #7FA0F5; /* brand blue lifted for dark */ --color-on-brand: #ffffff; /* Brand — Trading Arbor blue, lifted to brighter neighbors of the same family so it reads against the navy dark surfaces. No cyan: the "accent" family collapses into the blue scale. */ --color-brand-primary: #5E86F2; --color-brand-primary-soft: #85A5F5; --color-brand-primary-strong: #2E64ED; --color-brand-accent: #5E86F2; --color-brand-accent-soft: #85A5F5; --color-brand-accent-strong: #2E64ED; --color-brand-navy: #012973; --color-brand-slate: var(--ta-color-text-subtle); --color-brand-mist: var(--ta-color-bg); /* Money + status */ --color-positive: var(--ta-color-money-gain); --color-positive-soft: var(--ta-color-money-gain-soft); --color-negative: var(--ta-color-money-loss); --color-negative-soft: var(--ta-color-money-loss-soft); --color-warning: var(--ta-color-warn); --color-warning-soft: var(--ta-color-warn-soft); /* --color-info shares the brand hue (lifted for dark) */ --color-info: #5E86F2; --color-info-soft: rgba(94, 134, 242, 0.12); /* Shadows (dark — heavier so they read over surface lift) */ --shadow-sm: var(--ta-shadow-1); --shadow-md: var(--ta-shadow-2); --shadow-lg: var(--ta-shadow-3); /* Glow keyed to the brand blue so a button's halo matches its fill. */ --shadow-glow-brand: 0 4px 16px rgba(46, 100, 237, 0.40); /* Hero gradient — dark brand-blue bloom */ --gradient-hero: radial-gradient(ellipse at 50% 0%, rgba(46, 100, 237, 0.20) 0%, var(--ta-color-bg) 70%); } :root { /* ─── Typography ─────────────────────────────────────────── * * --font-family-mono is the DATA font (Bricolage, tabular-nums) * for money / tickers / tables. --font-family-code is the only * true-monospace, reserved for literal code blocks. */ --font-family-sans: var(--ta-font-sans); --font-family-num: var(--ta-font-num); --font-family-mono: var(--ta-font-mono); --font-family-code: var(--ta-font-code); --font-weight-light: 300; --font-weight-regular: var(--ta-fw-regular); --font-weight-medium: var(--ta-fw-medium); --font-weight-semibold: var(--ta-fw-semibold); --font-weight-bold: 700; /* Sizes — mapped to the closest ta-* rung. Some are pixel-for- * pixel; a couple were slightly off (sm 13px vs body-s 12.5px, * xxl 44px vs display 40px) and use literals to preserve the * exact legacy size and avoid silently reflowing any consumer * that pinned a font-size for layout. */ --font-size-xs: var(--ta-fs-meta); /* 11px */ --font-size-sm: 13px; --font-size-base: var(--ta-fs-body-l); /* 15px */ --font-size-md: var(--ta-fs-h3); /* 17px */ --font-size-lg: var(--ta-fs-h2); /* 22px */ --font-size-xl: var(--ta-fs-h1); /* 28px */ --font-size-xxl: 44px; --font-size-display: 96px; /* Line heights — legacy literals; ta- doesn't define these */ --line-height-tight: 1.15; --line-height-normal: 1.5; --line-height-loose: 1.6; /* ─── Spacing (4px base, kept identical) ───────────────────── */ --space-xxs: var(--ta-space-1); /* 4px */ --space-xs: var(--ta-space-2); /* 8px */ --space-sm: var(--ta-space-3); /* 12px */ --space-md: var(--ta-space-4); /* 16px */ --space-lg: var(--ta-space-6); /* 24px */ --space-xl: var(--ta-space-8); /* 32px */ --space-xxl: var(--ta-space-10); /* 48px */ --space-xxxl: var(--ta-space-12); /* 64px */ /* ─── Radius (all collapse to 5px per INTEGRATION.md §0.1) ── */ --radius-sm: var(--ta-radius-sm); /* 3px */ --radius-md: var(--ta-radius); /* 5px */ --radius-lg: var(--ta-radius); /* 5px (was 8px) */ --radius-xl: var(--ta-radius); /* 5px (was 12px) */ --radius-pill: 999px; /* ─── Z-index scale (theme-independent; ta- doesn't define) ── */ --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; /* ─── Motion ───────────────────────────────────────────────── */ --duration-fast: var(--ta-duration-fast); --duration-normal: var(--ta-duration-base); --duration-slow: var(--ta-duration-slow); --easing-standard: var(--ta-ease-in-out); /* ─── Gradients (brand) ────────────────────────────────────── * * The brand mark is a solid-blue compass — no cyan. These tokens * stay all-blue (base → hover) for any consumer painting button * sheens / hero washes via background-image. The wordmark is now * artwork (a PNG lockup), so --gradient-wordmark is retained only * as a back-compat alias and matches the blue ramp. */ --gradient-brand: linear-gradient(135deg, #2E64ED 0%, #1F4FD6 100%); --gradient-brand-blue: linear-gradient(135deg, #2E64ED 0%, #5E86F2 100%); --gradient-brand-cyan: linear-gradient(135deg, #5E86F2 0%, #93B2F7 100%); --gradient-wordmark: linear-gradient(135deg, #2E64ED 0%, #1F4FD6 100%); }