/* ============================================================ FLUENTIAL WEALTH — DESIGN TOKENS v1.1 · Aug 2026 ------------------------------------------------------------ Dark-first. `:root` is the brand's home theme (midnight navy, as shipped in every client report). Light mode is a first-class override for email, print collateral and light-context embeds. Theme wiring: → dark (default) → light (explicit) OS light preference → light, unless data-theme="dark" Chart palettes are machine-validated (OKLCH lightness band, chroma floor, CVD ΔE ≥ 8 adjacent, normal-vision ΔE ≥ 15, contrast ≥ 3:1 vs surface). Do not reorder or "refresh" them. ============================================================ */ :root { /* ---------- primitives · navy (the brand ground) ---------- */ --navy-950: #0a0f1c; /* page-behind, video letterbox */ --navy-900: #0f1729; /* base surface — THE brand navy */ --navy-850: #131c30; /* chart panel, donut hole */ --navy-800: #16203a; /* gradient mid */ --navy-750: #1a2847; /* gradient end */ --navy-700: #223052; /* hover on panels */ --navy-600: #2c3d66; /* pressed, strong line on dark */ /* ---------- primitives · ink on navy ---------- */ --ink-100: #eef2f9; /* primary text on dark */ --ink-200: #c3cee0; /* body copy on dark */ --ink-400: #8b9ab5; /* labels, secondary on dark */ --ink-500: #63718f; /* footers, dashes on dark (large text only) */ /* ---------- primitives · paper (light ground, cool-biased) ---------- */ --paper-50: #ffffff; --paper-100: #f7f8fa; /* light bg */ --paper-200: #eff2f6; /* light panel */ --paper-300: #e2e7ee; /* light line-strong, dividers */ /* ---------- primitives · ink on paper ---------- */ --slate-900: #0f1729; /* primary text on light = brand navy */ --slate-700: #3c485f; /* body copy on light (9.2:1 on white) */ --slate-500: #5b6880; /* muted on light (5.6:1 on white) */ --slate-400: #7d8aa3; /* faint on light — large text only */ /* ---------- primitives · emerald (the accent) ---------- */ --emerald-300: #6ee7b7; --emerald-400: #34d399; /* brand accent — report green */ --emerald-500: #10b981; /* borders, pills on dark */ --emerald-600: #059669; --emerald-700: #047857; /* accent TEXT on light (5.5:1 on white) */ --emerald-800: #065f46; /* ---------- primitives · support hues (report accents, dark-tuned) ---------- */ --teal-400: #2dd4bf; --amber-400: #fbbf24; --red-400: #f87171; --violet-400: #a78bfa; --blue-400: #60a5fa; --sky-400: #38bdf8; /* light-tuned equivalents — WCAG AA as text on white */ --teal-600: #0f766e; --amber-600: #8a5d00; /* 5.8:1 */ --red-600: #b91c1c; /* 6.5:1 */ --violet-600: #7557c1; /* 5.4:1 */ --blue-600: #1d4ed8; /* ============================================================ SEMANTIC — DARK (default) ============================================================ */ --bg: var(--navy-900); --bg-behind: var(--navy-950); --bg-gradient: linear-gradient(135deg, #0f1729 0%, #16203a 45%, #1a2847 100%); --surface: rgba(255,255,255,.035); /* card fill */ --surface-2: rgba(255,255,255,.06); /* nested / hover card */ --panel: var(--navy-850); /* solid panel (charts, code) */ --line: rgba(255,255,255,.09); --line-strong: rgba(255,255,255,.16); --line-faint: rgba(255,255,255,.05); --ink: var(--ink-100); --ink-2: var(--ink-200); --muted: var(--ink-400); --faint: var(--ink-500); --ink-inverse: var(--navy-900); /* text on accent-filled elements */ --accent: var(--emerald-400); --accent-strong: var(--emerald-500); --accent-soft: rgba(52,211,153,.14); --accent-line: rgba(52,211,153,.45); --pos: var(--emerald-400); --pos-soft: rgba(52,211,153,.14); --warn: var(--amber-400); --warn-soft: rgba(251,191,36,.11); --warn-line: rgba(251,191,36,.45); --neg: var(--red-400); --neg-soft: rgba(248,113,113,.14); --neg-line: rgba(248,113,113,.5); --info: var(--sky-400); --meta: var(--violet-400); /* ISIN / metadata lines */ --focus-ring: 0 0 0 2px var(--navy-900), 0 0 0 4px var(--emerald-400); --shadow-card: none; /* dark mode separates by border, not shadow */ --shadow-float: 0 12px 32px rgba(0,0,0,.45); --logo-filter: none; /* white lockups as supplied */ /* ---------- charts · categorical (multi-series; fixed order, never cycled) ---------- */ --chart-1: #00ae77; /* emerald */ --chart-2: #0092cb; /* sky */ --chart-3: #c08700; /* amber */ --chart-4: #8669d5; /* violet */ --chart-5: #00a895; /* teal */ --chart-6: #d85456; /* red */ --chart-other: #6e829e; /* fold-in slot: always last, always labelled */ /* ---------- charts · sequential (magnitude, one hue) ---------- */ --seq-1: #1d5e40; --seq-2: #0d7c53; --seq-3: #12a068; --seq-4: #41c58b; --seq-5: #8ae7bb; /* ---------- charts · diverging (loss ← neutral → gain; label the poles) ---------- */ --div-neg: #d85456; --div-mid: #6e829e; --div-pos: #00ae77; /* ---------- charts · chrome ---------- */ --chart-grid: rgba(255,255,255,.09); --chart-axis: var(--ink-400); --chart-label: var(--ink-200); /* ---------- quartile chips (report language: A best → D worst) ---------- */ --q-a: var(--emerald-400); --q-a-soft: rgba(52,211,153,.2); --q-a-line: rgba(52,211,153,.5); --q-b: var(--teal-400); --q-b-soft: rgba(45,212,191,.16); --q-b-line: rgba(45,212,191,.42); --q-c: var(--amber-400); --q-c-soft: rgba(251,191,36,.16); --q-c-line: rgba(251,191,36,.45); --q-d: var(--red-400); --q-d-soft: rgba(248,113,113,.16); --q-d-line: rgba(248,113,113,.5); --q-n: var(--ink-500); --q-n-soft: rgba(255,255,255,.04); --q-n-line: rgba(255,255,255,.09); /* ============================================================ TYPE ============================================================ */ /* Wordmark is always the supplied image — never typeset it. */ --font-display: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* fluid web scale (landing page, dashboards) */ --text-xs: 0.75rem; /* 12 — footers, fine print */ --text-sm: 0.875rem; /* 14 — captions, table body */ --text-base: 1rem; /* 16 — body */ --text-lg: 1.125rem; /* 18 — lede */ --text-xl: 1.3125rem; /* 21 — card titles */ --text-2xl: 1.625rem; /* 26 — section heads */ --text-3xl: clamp(1.75rem, 1.2rem + 2vw, 2.375rem); /* h2 */ --text-4xl: clamp(2.125rem, 1.4rem + 3vw, 3.125rem); /* h1 */ --text-hero: clamp(2.625rem, 1.6rem + 4.5vw, 4.5rem); /* display serif */ --text-stat: clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem); /* big numbers, weight 300 */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-body: 1.55; --leading-loose: 1.62; --track-display: -0.02em; /* headings */ --track-stat: -0.03em; /* large numbers (pair with weight 300) */ --track-eyebrow: 0.13em; /* uppercase eyebrows */ --track-label: 0.07em; /* table headers, small caps labels */ /* ============================================================ SPACE · RADIUS · MOTION ============================================================ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --radius-sm: 6px; /* verdicts, tags */ --radius-md: 8px; /* pills, actions, notes */ --radius-lg: 11px; /* cards — the report radius */ --radius-xl: 13px; /* reveal blocks, hero panels */ --radius-pill: 999px; /* breakpoints — for JS/matchMedia use; media queries repeat the px literally (custom properties cannot parameterise @media). 640 phone→large phone · 960 nav collapse · 1200 content max-width */ --bp-sm: 640px; --bp-md: 960px; --bp-lg: 1200px; --dur-fast: 120ms; /* hover, focus */ --dur-base: 200ms; /* state changes */ --dur-slow: 320ms; /* panels, accordions */ --dur-reveal: 600ms; /* scroll reveals, page-load */ --dur-count: 900ms; /* number count-ups (video & web) */ --dur-draw: 800ms; /* chart draw-in; stagger series by 60ms */ --ease-standard: cubic-bezier(.2,.6,.2,1); --ease-out: cubic-bezier(.16,1,.3,1); --ease-in: cubic-bezier(.6,0,.8,.2); } /* ============================================================ SEMANTIC — LIGHT ============================================================ */ [data-theme="light"] { color-scheme: light; } :root, [data-theme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: var(--paper-100); --bg-behind: var(--paper-200); --bg-gradient: linear-gradient(135deg, #ffffff 0%, #f7f8fa 45%, #eff2f6 100%); --surface: var(--paper-50); --surface-2: var(--paper-200); --panel: var(--paper-50); --line: rgba(15,23,41,.12); --line-strong: rgba(15,23,41,.22); --line-faint: rgba(15,23,41,.06); --ink: var(--slate-900); --ink-2: var(--slate-700); --muted: var(--slate-500); --faint: var(--slate-400); --ink-inverse: #ffffff; --accent: var(--emerald-700); --accent-strong: var(--emerald-800); /* hover keeps 7.7:1 with white text */ --accent-soft: rgba(4,120,87,.10); --accent-line: rgba(4,120,87,.35); --pos: var(--emerald-700); --pos-soft: rgba(4,120,87,.10); --warn: var(--amber-600); --warn-soft: rgba(138,93,0,.10); --warn-line: rgba(138,93,0,.35); --neg: var(--red-600); --neg-soft: rgba(185,28,28,.08); --neg-line: rgba(185,28,28,.35); --info: var(--blue-600); --meta: var(--violet-600); --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px var(--emerald-600); --shadow-card: 0 1px 2px rgba(15,23,41,.05), 0 6px 20px rgba(15,23,41,.07); --shadow-float: 0 16px 40px rgba(15,23,41,.16); --logo-filter: brightness(0) saturate(100%) invert(8%) sepia(18%) saturate(2400%) hue-rotate(197deg) brightness(96%); /* or simply swap to the *-navy.png lockups */ --chart-1: #00925d; --chart-2: #007db4; --chart-3: #ac7500; --chart-4: #7557c1; --chart-5: #008c7a; --chart-6: #c04447; --chart-other: #576a86; --seq-1: #63c795; --seq-2: #25a873; --seq-3: #00885a; --seq-4: #0b6644; --seq-5: #123f2c; --div-neg: #c04447; --div-mid: #8895ab; --div-pos: #00925d; --chart-grid: rgba(15,23,41,.10); --chart-axis: var(--slate-500); --chart-label: var(--slate-700); --q-a: var(--emerald-700); --q-a-soft: rgba(4,120,87,.12); --q-a-line: rgba(4,120,87,.4); --q-b: var(--teal-600); --q-b-soft: rgba(15,118,110,.10); --q-b-line: rgba(15,118,110,.35); --q-c: var(--amber-600); --q-c-soft: rgba(138,93,0,.10); --q-c-line: rgba(138,93,0,.35); --q-d: var(--red-600); --q-d-soft: rgba(185,28,28,.08); --q-d-line: rgba(185,28,28,.35); --q-n: var(--slate-500); --q-n-soft: rgba(15,23,41,.04); --q-n-line: rgba(15,23,41,.12); } } [data-theme="light"] { --bg: var(--paper-100); --bg-behind: var(--paper-200); --bg-gradient: linear-gradient(135deg, #ffffff 0%, #f7f8fa 45%, #eff2f6 100%); --surface: var(--paper-50); --surface-2: var(--paper-200); --panel: var(--paper-50); --line: rgba(15,23,41,.12); --line-strong: rgba(15,23,41,.22); --line-faint: rgba(15,23,41,.06); --ink: var(--slate-900); --ink-2: var(--slate-700); --muted: var(--slate-500); --faint: var(--slate-400); --ink-inverse: #ffffff; --accent: var(--emerald-700); --accent-strong: var(--emerald-800); /* hover keeps 7.7:1 with white text */ --accent-soft: rgba(4,120,87,.10); --accent-line: rgba(4,120,87,.35); --pos: var(--emerald-700); --pos-soft: rgba(4,120,87,.10); --warn: var(--amber-600); --warn-soft: rgba(138,93,0,.10); --warn-line: rgba(138,93,0,.35); --neg: var(--red-600); --neg-soft: rgba(185,28,28,.08); --neg-line: rgba(185,28,28,.35); --info: var(--blue-600); --meta: var(--violet-600); --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px var(--emerald-600); --shadow-card: 0 1px 2px rgba(15,23,41,.05), 0 6px 20px rgba(15,23,41,.07); --shadow-float: 0 16px 40px rgba(15,23,41,.16); --logo-filter: brightness(0) saturate(100%) invert(8%) sepia(18%) saturate(2400%) hue-rotate(197deg) brightness(96%); --chart-1: #00925d; --chart-2: #007db4; --chart-3: #ac7500; --chart-4: #7557c1; --chart-5: #008c7a; --chart-6: #c04447; --chart-other: #576a86; --seq-1: #63c795; --seq-2: #25a873; --seq-3: #00885a; --seq-4: #0b6644; --seq-5: #123f2c; --div-neg: #c04447; --div-mid: #8895ab; --div-pos: #00925d; --chart-grid: rgba(15,23,41,.10); --chart-axis: var(--slate-500); --chart-label: var(--slate-700); --q-a: var(--emerald-700); --q-a-soft: rgba(4,120,87,.12); --q-a-line: rgba(4,120,87,.4); --q-b: var(--teal-600); --q-b-soft: rgba(15,118,110,.10); --q-b-line: rgba(15,118,110,.35); --q-c: var(--amber-600); --q-c-soft: rgba(138,93,0,.10); --q-c-line: rgba(138,93,0,.35); --q-d: var(--red-600); --q-d-soft: rgba(185,28,28,.08); --q-d-line: rgba(185,28,28,.35); --q-n: var(--slate-500); --q-n-soft: rgba(15,23,41,.04); --q-n-line: rgba(15,23,41,.12); } /* ============================================================ BASELINE APPLICATION (optional but recommended) ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-reveal: 0ms; --dur-count: 0ms; --dur-draw: 0ms; } }