/* ============================================================ No Code — Foundations Color, type, radius, shadow, motion tokens. ============================================================ */ /* Google Fonts loaded via in HTML for parallel critical-path delivery */ :root { /* ─── Core palette ─────────────────────────────────────────── */ --ink: #16161A; /* near-black, primary text & buttons */ --ink-80: rgba(22,22,26,0.8); --ink-50: rgba(22,22,26,0.5); --ink-20: rgba(22,22,26,0.2); --ink-10: rgba(22,22,26,0.1); --paper: #FFFFFF; /* canvas */ --paper-soft: #FAFAFC; /* sublte off-white card / hover */ --paper-mute: #F9F9F9; /* sidebar, panels */ --line: #E8E8E8; /* primary divider */ --line-soft: #EFEFF1; /* secondary divider, chip bg */ --line-faint: #F3F2F5; /* selected row, subtle fill */ /* ─── Accents (used sparingly) ─────────────────────────────── */ /* Primary accent — brand GREEN, sampled from the deck logo/badges. Contrast note: --accent (#74AA1E) is ~2.8:1 on white — decorative only (halos, dots, borders, soft tints). For TEXT on white or WHITE text on a green fill, use --accent-strong (#4F7A12, ~5.1:1) which clears WCAG AA. */ --accent: #74AA1E; --accent-80: rgba(116,170,30,0.8); --accent-20: rgba(116,170,30,0.2); --accent-soft: rgba(116,170,30,0.15); --accent-strong: #4F7A12; /* deeper green (text, logo halo, illustration) */ --accent-haze: #A3C96B; /* lighter green / radial gradients */ /* Legacy aliases — kept so older code keeps working. Point at blue. */ --violet: var(--accent); --violet-80: var(--accent-80); --violet-20: var(--accent-20); --violet-bright: var(--accent-strong); --violet-haze: var(--accent-haze); --red: #C90003; /* destructive, sell, error */ --red-80: rgba(201,0,3,0.8); --red-20: rgba(201,0,3,0.2); --red-soft: #FFE8E8; /* loss zone tint */ --green: #0A9700; /* gain, buy, ok */ --green-soft: #DBF7EF; /* gain zone tint */ --blue: #0065ED; /* link, neutral data */ --orange: #E25700; /* warn / sentiment heat */ --magenta: #F57AFE; /* secondary data series */ /* Token-icon brand chips (from Figma; opt-in for crypto data) */ --chip-eth: #627EEB; --chip-btc: #F7931A; --chip-sol: #9945FF; /* ─── Semantic surface tokens ──────────────────────────────── */ --bg: var(--paper); --bg-elev: var(--paper-soft); --bg-mute: var(--paper-mute); --bg-tint: var(--line-faint); --fg: var(--ink); --fg-mute: var(--ink-50); --fg-faint: var(--ink-20); --fg-invert: #FFFFFF; --border: var(--line); --border-strong: var(--ink); --border-soft: var(--line-soft); --focus: var(--violet); /* ─── Type scale ──────────────────────────────────────────── */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-display: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; --font-ui: "DM Sans", "Inter", sans-serif; --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace; --fs-display: 64px; /* hero on cover/marketing only */ --fs-marketing-h1: 48px; /* marketing/landing only */ --fs-marketing-h2: 32px; /* marketing/landing only */ --fs-h1: 24px; /* in-product max */ --fs-h2: 20px; --fs-h3: 18px; --fs-h4: 16px; --fs-h5: 14px; --fs-body: 16px; --fs-ui: 14px; /* default UI label */ --fs-meta: 12px; --fs-micro: 10px; /* widget axis labels */ --fs-tag: 8px; /* uppercased tag */ /* line-heights */ --lh-tight: 1.0; --lh-snug: 1.2; --lh-body: 1.3; --lh-loose: 1.5; /* letter-spacing */ --tr-tight: -0.03em; /* display only */ --tr-snug: -0.01em; /* h-levels */ --tr-normal: 0; --tr-wide: 0.06em; /* tags */ /* ─── Spacing (4px base) ──────────────────────────────────── */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; /* ─── Radius ──────────────────────────────────────────────── */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; /* sidebar, web buttons, cards-mini */ --r-lg: 12px; --r-xl: 16px; /* big cards, alerts, message bubbles */ --r-pill: 18px; /* inputs */ --r-full: 9999px; /* mobile primary buttons */ /* ─── Shadows ─────────────────────────────────────────────── */ /* Elevation 1 — buttons, hover states (very soft, vertically stacked) */ --shadow-1: 0 3px 6px rgba(0,0,0,0.06), 0 12px 12px rgba(0,0,0,0.04), 0 20px 16px rgba(0,0,0,0.02); /* Elevation 2 — popovers, dropdowns */ --shadow-2: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.08); /* Elevation 3 — modals, command-k, hovering widget */ --shadow-3: 0 4px 12px rgba(0,0,0,0.06), 0 24px 48px rgba(0,0,0,0.10); /* Inner highlight for raised surfaces */ --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6); /* ─── Motion ─────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur: 180ms; --dur-slow: 280ms; /* ─── Layout ─────────────────────────────────────────────── */ --sidebar-w: 52px; --sidebar-w-expanded: 240px; --content-max: 1280px; } /* Dark surface tokens (ash / charcoal) — used by dark widgets only */ [data-theme="dark"] { --bg: #2B2121; --bg-elev: #2D2D31; --bg-mute: #1E1E22; --bg-tint: rgba(255,255,255,0.04); --fg: #FFFFFF; --fg-mute: rgba(255,255,255,0.6); --fg-faint: rgba(255,255,255,0.3); --border: rgba(255,255,255,0.1); --border-soft: rgba(255,255,255,0.06); } /* ─── Semantic typography (apply directly to elements) ──────── */ html { color-scheme: light; } body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, .h1 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); margin: 0; } h2, .h2 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); margin: 0; } h3, .h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-snug); margin: 0; } h4, .h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-snug); margin: 0; } h5, .h5 { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-h5); line-height: var(--lh-snug); margin: 0; } .body { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); } .label { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-ui); line-height: 1; } .ui { font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-ui); line-height: var(--lh-snug); } .meta { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-meta); line-height: var(--lh-loose); color: var(--fg-mute); } .tag { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-tag); line-height: 1; letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--fg-mute); } .mono { font-family: var(--font-mono); font-weight: 500; font-size: 15px; line-height: var(--lh-snug); } /* numeric / tabular figures everywhere we show prices, percentages */ .num { font-feature-settings: "tnum" 1, "lnum" 1; }