/* ─────────────────────────────────────────────────────────── AR3NA — Design Tokens The single source of truth for colour, type, space, motion. Used across all views. Edit here, propagates everywhere. ─────────────────────────────────────────────────────────── */ :root { /* ── Paper / ink ───────────────────────────────────────── */ --paper: #f4efe6; --paper-warm: #ebe4d7; --paper-deep: #e0d6c3; --paper-tint: #faf6ee; --ink: #1a1614; --ink-soft: #3d3631; --ink-mute: #8a7f73; --ink-faint: #b8ada0; /* ── Bot signature colours ─────────────────────────────── */ --coral: #ff6b5a; /* Claude */ --mint: #5ec9a8; /* GPT */ --periwinkle: #8b9eff; /* Gemini */ --buttercup: #f5c842; /* (Future) DeepSeek */ --lavender: #c9a0dc; /* (Future) Grok */ --rose: #f0a5b8; /* (Future) Qwen */ /* ── Semantic ──────────────────────────────────────────── */ --pos: #2d9970; --pos-tint: rgba(45,153,112,0.15); --neg: #d96a78; --neg-tint: rgba(217,106,120,0.15); --neutral: #8a7f73; --neutral-tint: rgba(138,127,115,0.15); /* ── Mode colours ──────────────────────────────────────── */ --mode-sandbox: var(--paper); --mode-paper: var(--buttercup); --mode-live: var(--coral); /* ── Surface roles ───────────────────────────────────── --surface-base = body / app background --surface-card = panels & cards (must contrast with base) In light mode, cards are the cleaner cream and base is the warmer cream — gives panels a slight cool lift. Dark mode inverts this: base is deepest, cards are lifted. */ --surface-base: var(--paper-warm); --surface-card: var(--paper); /* ── Accent roles ────────────────────────────────────── In light mode, coral is the everyday accent (warm, editorial, on-brand with Khaos cream backgrounds). Dark mode flips this to mint (cleaner on near-black). Components should reference --accent for the "primary" UI accent and --accent-alert only for warnings/alerts. */ --accent: var(--coral); --accent-alert: var(--coral); /* ── Shadows ───────────────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(26,22,20,0.04), 0 2px 6px rgba(26,22,20,0.04); --shadow-md: 0 2px 8px rgba(26,22,20,0.06), 0 8px 24px rgba(26,22,20,0.05); --shadow-lg: 0 4px 16px rgba(26,22,20,0.08), 0 16px 48px rgba(26,22,20,0.08); --shadow-glow-live: 0 0 0 4px rgba(255,107,90,0.15); /* ── Radii ─────────────────────────────────────────────── */ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 100px; /* ── Typography ────────────────────────────────────────── */ --font-display: 'Fraunces', 'Times New Roman', serif; --font-body: 'Söhne', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace; /* ── Motion ────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 200ms; --dur-med: 400ms; --dur-slow: 700ms; /* ── Layout ────────────────────────────────────────────── */ --maxw: 1920px; --pad: 32px; } /* ─────────────────────────────────────────────────────────── Dark mode Activated by setting `data-theme="dark"` on . Overrides only colour + shadow tokens; everything else (typography, motion, radii, layout) inherits unchanged. ─────────────────────────────────────────────────────────── */ [data-theme="dark"] { /* ── Paper / ink (depth-inverted from light mode) ──────── In light mode, panels sit DARKER than the body (they recede into the page). In dark mode, panels must sit LIGHTER than the body (they lift off the page). The separation between body and panel must be enough to read as elevation — too close and the cards vanish into the background. Reference: Hyperliquid, Linear, GitHub dark all use ~12-18 luminance points of separation. Hue chosen to be neutral charcoal — not blue-leaning. */ --paper: #08090c; /* page background, deepest void */ --paper-warm: #20222a; /* panels & cards — neutral charcoal */ --paper-deep: #2d2f38; /* hover & elevated surfaces */ --paper-tint: #04050609; /* deepest void (subtle insets) */ --ink: #f0ebe2; --ink-soft: #c8c0b3; --ink-mute: #847a6c; --ink-faint: #4a443c; /* ── Bot signatures — brightened for dark contrast ─────── Same hues, slightly higher luminance so they read as accents on the dark ground rather than receding into it. */ --coral: #ff7d6e; --mint: #7adcbf; --periwinkle: #a4b4ff; --buttercup: #f5d062; --lavender: #d4b3e3; --rose: #f3b5c4; /* ── Accent role overrides (dark mode) ────────────────── In dark mode, mint is the everyday accent — it's the premium-financial-dashboard signature colour and reads cleanly on near-black. Coral is reserved for live mode, alerts, and warnings only (it screams too loudly on dark to be the default everyday accent). */ --accent: var(--mint); --accent-alert: var(--coral); /* ── Semantic — adjusted for dark perceptual weight ────── */ --pos: #4cc492; --pos-tint: rgba(76,196,146,0.18); --neg: #e88592; --neg-tint: rgba(232,133,146,0.18); --neutral: #847a6c; --neutral-tint: rgba(132,122,108,0.18); /* ── Mode colours ─────────────────────────────────────── Sandbox uses warm paper, paper mode uses buttercup, live mode uses coral (intentionally — live mode SHOULD feel different / alarming). */ --mode-sandbox: var(--paper-warm); --mode-paper: var(--buttercup); --mode-live: var(--coral); /* ── Surface roles (flipped from light mode) ──────────── Body = deepest void. Cards = lifted near-black with a subtle 18-pt luminance jump so they read as elevated. */ --surface-base: var(--paper); --surface-card: var(--paper-warm); /* ── Shadows reimagined as glows ──────────────────────── Dropped shadows don't work on dark — they vanish. Instead, use subtle inset highlights and outer glow for the same depth perception. */ --shadow-sm: 0 1px 0 rgba(255,255,255,0.04) inset, 0 2px 8px rgba(0,0,0,0.4); --shadow-md: 0 1px 0 rgba(255,255,255,0.06) inset, 0 4px 16px rgba(0,0,0,0.5), 0 12px 32px rgba(0,0,0,0.3); --shadow-lg: 0 1px 0 rgba(255,255,255,0.08) inset, 0 8px 32px rgba(0,0,0,0.6), 0 24px 64px rgba(0,0,0,0.4); --shadow-glow-live: 0 0 0 4px rgba(255,125,110,0.25), 0 0 24px rgba(255,125,110,0.15); } /* Smooth crossfade when toggling themes. Limited to the handful of properties that actually transition cleanly — transitioning everything causes jank on element-hover. */ html { transition: background-color var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out); } body, .panel, .card, .module, .stat-tile { transition: background-color var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out); }