/* ───────────────────────────────────────────────────────────────── Arbor design tokens — single source of truth. ───────────────────────────────────────────────────────────────── Every color / font / spacing value the marketing site and trader app use is defined HERE and consumed via var(--token) elsewhere. To rebrand or theme-tune, edit this file and the change propagates everywhere on next page load. Naming convention: tokens are semantic, not decorative. --color-bg-page ← describes purpose ("page background") --color-positive ← describes meaning ("positive value: gain, success") --space-md ← describes scale rung ("medium spacing") Theming: light is the default (`:root`); dark is opt-in via `[data-theme="dark"]` on the element. The marketing site forces dark; the trader defaults to light with a user-togglable override (persisted to localStorage by arbor-base.css). Adding a new token: 1. Pick a semantic name (NOT --blue-500). Group it with similar tokens via the section comments below. 2. Define both light and dark values. If a token only makes sense in one theme (e.g. a glow), document the asymmetry with an inline comment. 3. Reference it in CSS as var(--your-token). ───────────────────────────────────────────────────────────── */ :root, [data-theme="light"] { /* ── Brand colors ────────────────────────────────────── Cobalt blue is the load-bearing brand color (#2563EB per brand guide). Cyan is the secondary accent (#22D3EE), used for the diagonal-slash mark + gradient sweeps on the wordmark and CTAs. The "soft" variants are lighter tints for hover states; "strong" variants are pressed/focus. Keep these stable across themes — brand identity shouldn't shift between modes. */ --color-brand-primary: #2563eb; /* tradingarbor cobalt (brand spec) */ --color-brand-primary-soft: #60a5fa; /* hover, lighter accents */ --color-brand-primary-strong: #1e40af; /* pressed, focus rings */ --color-brand-accent: #22d3ee; /* tradingarbor cyan (brand spec) */ --color-brand-accent-soft: #67e8f9; /* cyan hover / softer fills */ --color-brand-accent-strong: #0891b2; /* pressed, deeper cyan */ /* Brand neutrals from the brand guide. Used directly in places where the semantic tokens below would map to the wrong rung (e.g. the icon-mode dark navy plate behind the slash mark). */ --color-brand-navy: #0b1220; /* darkest brand surface */ --color-brand-slate: #94a3b8; /* mid-gray brand neutral */ --color-brand-mist: #f5f7fa; /* lightest brand neutral */ /* ── Surface backgrounds ─────────────────────────────── Page = outermost. Card = elevated panels (settings, plan cards, dialog). Card-elevated = hover/active card state. Input = form-control fill. */ --color-bg-page: #fafbfc; --color-bg-card: #ffffff; --color-bg-card-elevated: #f3f5f8; --color-bg-input: #ffffff; --color-bg-overlay: rgba(15, 21, 48, 0.55); /* modal backdrop */ /* ── Text colors ─────────────────────────────────────── Primary = body + headings. Secondary = labels, helper text. Muted = placeholders, captions, low-importance metadata. Inverse = text on a colored / accent background. */ --color-text-primary: #1a1f36; --color-text-secondary: #4a5160; --color-text-muted: #7a8294; --color-text-inverse: #ffffff; --color-text-link: var(--color-brand-primary); /* ── Borders + dividers ──────────────────────────────── Subtle = card borders, table rows. Strong = input borders, focus rings, emphasized dividers. */ --color-border-subtle: #e1e6ed; --color-border-strong: #c5cdd9; /* ── Semantic colors ────────────────────────────────── Stable across themes (a green is still a "win" in dark mode). The "soft" variants are translucent tints suitable for filled backgrounds (e.g. positive-trade row highlight). */ --color-positive: #16a34a; --color-positive-soft: rgba(22, 163, 74, 0.10); --color-negative: #dc2626; --color-negative-soft: rgba(220, 38, 38, 0.10); --color-warning: #d97706; --color-warning-soft: rgba(217, 119, 6, 0.10); --color-info: #2563eb; /* aligned with brand primary */ --color-info-soft: rgba(37, 99, 235, 0.10); /* ── Typography ─────────────────────────────────────── Sans for everything except numeric tables / code blocks. Mono for tabular numbers, code, inline command examples. */ --font-family-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-family-mono: "JetBrains Mono", ui-monospace, Menlo, Monaco, "Courier New", monospace; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 11px; --font-size-sm: 13px; --font-size-base: 15px; /* default body */ --font-size-md: 17px; /* card titles */ --font-size-lg: 22px; /* small section headers */ --font-size-xl: 28px; /* large section headers */ --font-size-xxl: 44px; /* hero h1 */ --font-size-display: 96px; /* wordmark */ --line-height-tight: 1.15; --line-height-normal: 1.5; --line-height-loose: 1.6; /* ── Spacing scale (4px base) ──────────────────────── */ --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-xxl: 48px; --space-xxxl: 64px; /* ── Radii ────────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-pill: 999px; /* ── Shadows ────────────────────────────────────────── Sm = light separation (cards on a page). Md = elevated panels (dropdowns, popovers). Lg = modal-tier elevation. Glow = brand-colored, used sparingly for primary CTAs. */ --shadow-sm: 0 1px 2px rgba(15, 21, 48, 0.05); --shadow-md: 0 4px 12px rgba(15, 21, 48, 0.08); --shadow-lg: 0 8px 32px rgba(15, 21, 48, 0.12); --shadow-glow-brand: 0 4px 16px rgba(37, 99, 235, 0.35); /* ── Background gradients ───────────────────────────── Used for the hero stage on the marketing site + decorative section dividers. Themes provide their own gradient stops since the dark "starfield" effect doesn't translate to a light background. --gradient-brand drives the iconic 3-slash mark + any CTA / accent that wants to read as "the brand color." Cobalt → cyan diagonal per the brand sheet. */ --gradient-hero: radial-gradient(ellipse at 50% 0%, #e6ecf9 0%, var(--color-bg-page) 70%); --gradient-wordmark: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-accent) 100%); --gradient-brand: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-accent) 100%); --gradient-brand-blue: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-primary-soft) 100%); --gradient-brand-cyan: linear-gradient(135deg, var(--color-brand-accent) 0%, var(--color-brand-accent-soft) 100%); /* ── Z-index scale ──────────────────────────────────── Reserve numeric levels so we don't get into a war of bumping z-index by 1 every time. */ --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; /* ── Transitions ────────────────────────────────────── Standard durations + easings. Prefer these over inline timing values so motion feels coherent across the app. */ --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --easing-standard: cubic-bezier(0.4, 0, 0.2, 1); } /* ──────────────────────────────────────────────────────── Dark theme — opt-in via [data-theme="dark"] on . Same token names; only the values shift. Brand colors, semantic colors, and structural tokens (spacing, fonts, radii) stay identical so layout doesn't reflow on theme change. ──────────────────────────────────────────────────────── */ [data-theme="dark"] { --color-bg-page: #0b1220; /* brand navy (matches brand spec) */ --color-bg-card: #131b2e; /* one rung lighter than page */ --color-bg-card-elevated: #1c2540; /* hover/active card */ --color-bg-input: #131b2e; --color-bg-overlay: rgba(11, 18, 32, 0.78); --color-text-primary: #f0f3ff; --color-text-secondary: rgba(220, 228, 255, 0.78); --color-text-muted: rgba(220, 228, 255, 0.55); /* text-inverse is the color used on top of saturated brand backgrounds (primary buttons, ribbons, badges). Stays white in both themes -- the brand color is too saturated for dark text to contrast cleanly. */ --color-text-inverse: #ffffff; --color-border-subtle: rgba(170, 198, 255, 0.12); --color-border-strong: rgba(170, 198, 255, 0.25); /* Semantic colors get a slight chroma boost in dark mode so they don't get muddy against the dark surfaces. */ --color-positive: #22e07a; --color-positive-soft: rgba(34, 224, 122, 0.12); --color-negative: #ff3b3b; --color-negative-soft: rgba(255, 59, 59, 0.12); --color-warning: #e3b341; --color-warning-soft: rgba(227, 179, 65, 0.10); --color-info: #58a6ff; --color-info-soft: rgba(88, 166, 255, 0.10); /* Shadows are softer + more colored in dark mode (a hard black drop-shadow on dark surfaces just disappears). */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6); --shadow-glow-brand: 0 4px 16px rgba(37, 99, 235, 0.35); /* Hero gradient: brand cobalt bloom over the navy void. */ --gradient-hero: radial-gradient(ellipse at 50% 0%, rgba(37, 99, 235, 0.18) 0%, var(--color-bg-page) 70%); /* Wordmark on dark: keep the cobalt → cyan brand gradient so the wordmark always reads as the brand color, not as text. */ --gradient-wordmark: linear-gradient(135deg, var(--color-brand-primary-soft) 0%, var(--color-brand-accent-soft) 100%); }