/* PONDELTA design tokens. The palette is ponsfamily's: lime #d4fc50 on near-black #0d0d0d, with #111 as the on-accent ink. The token *roles* follow a terminal layout - a background, three raised surfaces, three line weights and three text tiers - so a component can be written once and re-skinned by swapping this file. Dark is the default. Light is opt-in via [data-theme="light"] on , and every token is redefined there: a token that only exists in one block is a colour that breaks when the theme flips. */ :root { /* surfaces */ --bg: #0d0d0d; --panel: #141414; --raised: #1a1a1a; --raised-2: #212121; --wash: #101010; /* lines, lightest to heaviest */ --line: #242424; --line-2: #323232; --line-3: #454545; /* text tiers */ --ink-bright: #f2f2f2; --ink: #d8d8d8; --ink-2: #9a9a9a; --ink-3: #6d6d6d; --ink-dim: rgba(242, 242, 242, 0.12); --text: var(--ink-bright); --text-2: var(--ink-2); --text-3: var(--ink-3); /* the accent: ponsfamily lime */ --lime: #d4fc50; --lime-bright: #e2ff66; --lime-deep: #2a3a14; --lime-dim: rgba(212, 252, 80, 0.14); --lime-tint: rgba(212, 252, 80, 0.06); --on-lime: #111111; --grad-lime: linear-gradient(180deg, #e2ff66, #8fae2a); --grad-accent: linear-gradient(135deg, #d4fc50, #9fe07a); /* semantic */ --pos: #7ee08a; --pos-text: #7ee08a; --neg: #ff6b5e; --warn: #f5c451; /* charts */ --chart-up: var(--pos); --chart-down: var(--neg); --chart-grid: #1a1a1a; --chart-axis: #2e2e2e; --chart-text: #6d6d6d; --chart-vol: #262626; --chart-cross: var(--lime); --band-fill: rgba(212, 252, 80, 0.13); --band-edge: var(--lime); --band-own-fill: rgba(242, 242, 242, 0.05); --band-own-edge: var(--ink); /* brand mark */ --mark-body: #d8d8d8; --mark-apex: var(--lime); /* radii */ --r-full: 999px; --r-lg: 18px; --r-md: 12px; --r-sm: 9px; /* type */ --f-mono: var(--font-mono, 'JetBrains Mono'), ui-monospace, SFMono-Regular, Menlo, monospace; --f-sans: var(--font-sans, 'Inter'), ui-sans-serif, system-ui, -apple-system, sans-serif; --f-display: var(--font-display, 'Space Grotesk'), var(--f-sans); --track: 0.14em; --fs-display: clamp(40px, 6vw, 78px); --fs-h1: clamp(28px, 4vw, 44px); --fs-h2: clamp(22px, 3vw, 30px); --fs-h3: 20px; --fs-body: 16px; --fs-micro: 10px; --lh-body: 1.65; /* motion */ --dur: 0.16s; --dur-press: 0.12s; --ease: cubic-bezier(0.4, 0, 0.2, 1); /* depth */ --sheen: rgba(242, 242, 242, 0.06); --glass-bg: rgba(20, 20, 20, 0.55); --glass-line: rgba(255, 255, 255, 0.09); --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.07); --glass-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.7); --glow-lime: 0 0 0 1px rgba(212, 252, 80, 0.16), 0 8px 30px -8px rgba(212, 252, 80, 0.22); --glow-lime-strong: 0 0 0 1px rgba(212, 252, 80, 0.3), 0 10px 40px -8px rgba(212, 252, 80, 0.36); --card-wash: linear-gradient(180deg, rgba(212, 252, 80, 0.05), transparent 42%); --edge-glow: rgba(212, 252, 80, 0.45); /* layout */ --rail-w: 56px; --rail-w-open: 212px; --topbar-h: 66px; --positions-max-h: 620px; } :root[data-theme='light'] { --bg: #f2f3f0; --panel: #fbfbfa; --raised: #e9ebe5; --raised-2: #dfe2da; --wash: #f0f1ee; --line: #dcded6; --line-2: #c7cabf; --line-3: #adb1a4; --ink-bright: #14160f; --ink: #2b2e24; --ink-2: #5b5f51; --ink-3: #7a7e70; --ink-dim: rgba(20, 22, 15, 0.1); /* On a light ground the lime is unreadable as text, so text-weight accents drop to a darker olive while fills keep the brand lime. */ --lime: #7d9c14; --lime-bright: #6d8a0d; --lime-deep: #f3ffd4; --lime-dim: rgba(125, 156, 20, 0.18); --lime-tint: rgba(125, 156, 20, 0.08); --on-lime: #111111; --grad-lime: linear-gradient(180deg, #d4fc50, #9cbb2c); --grad-accent: linear-gradient(135deg, #b7e13a, #7d9c14); --pos: #2f8a48; --pos-text: #2f8a48; --neg: #c94f43; --warn: #a97a10; --chart-grid: #e4e6de; --chart-axis: #c7cabf; --chart-text: #6b7062; --chart-vol: #e0e3da; --chart-cross: #7d9c14; --band-fill: rgba(125, 156, 20, 0.16); --band-edge: #7d9c14; --band-own-fill: rgba(43, 46, 36, 0.05); --band-own-edge: var(--ink); --mark-body: #3a3f31; --mark-apex: #7d9c14; --sheen: rgba(20, 22, 15, 0.05); --glass-bg: rgba(251, 251, 250, 0.6); --glass-line: rgba(20, 22, 15, 0.08); --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.7); --glass-shadow: 0 18px 50px -24px rgba(20, 22, 15, 0.3); --glow-lime: 0 0 0 1px rgba(125, 156, 20, 0.16), 0 8px 24px -10px rgba(125, 156, 20, 0.28); --glow-lime-strong: 0 0 0 1px rgba(125, 156, 20, 0.26), 0 10px 30px -10px rgba(125, 156, 20, 0.4); --card-wash: linear-gradient(180deg, rgba(125, 156, 20, 0.06), transparent 42%); --edge-glow: rgba(125, 156, 20, 0.45); } /* The lime is bright enough to strobe on a dark ground; soften the glow for anyone who has asked for less motion and contrast. */ @media (prefers-reduced-motion: reduce) { :root { --dur: 0s; --dur-press: 0s; } }