/* Design tokens — the only place colours, radii and fonts are defined. */
:root {
    /* Vibe: Dark Glassmorphism Neon */
    --primary: #0ea5e9;
    --primary-glow: rgba(14, 165, 233, 0.5);
    /* Light accent for text on dark surfaces (8.37:1 on cards). Was used in
       ~17 places but never defined, so those fell back to inherited white/grey. */
    --primary-light: #38bdf8;
    --secondary: #8b5cf6;
    --secondary-glow: rgba(139, 92, 246, 0.5);
    /* --secondary as text is 4.23:1 on cards, 3.83:1 on its own 10% tint;
       this lighter violet is 6.59:1 / 5.95:1. Use it for violet text. */
    --secondary-text: #a78bfa;
    --success: #10b981;
    --danger: #f43f5e;
    /* --danger on its own 10% tint is 4.47:1 and white on --danger 3.67:1:
       red text on red tints uses --danger-text (6.10:1), white-text red fills
       use --danger-fill (white 4.70:1). */
    --danger-text: #fb7185;
    --danger-fill: #e11d48;
    --warning: #f59e0b;

    --bg-base: #030712;
    --bg-surface: rgba(17, 24, 39, 0.92);
    --bg-surface-hover: rgba(31, 41, 55, 0.8);
    /* Fully opaque version of --bg-surface, used for modal/popup
       dialog panels specifically — --bg-surface's 0.7 alpha lets
       whatever's behind it show through, which reads as "washed
       out" on a full-screen popup (Edit Performance Data, Manage
       Mapped Data, Map to my sales data, etc.). Same color, alpha 1. */
    --bg-surface-solid: rgb(17, 24, 39);

    --text-main: #f8fafc;
    --text-muted: #a9b6c9;
    --border: rgba(51, 65, 85, 0.5);

    /* Filled primary actions. White on --primary is 2.77:1, so filled
       buttons use the deeper gradient (white 5.93:1 → 7.10:1) or dark
       ink on the bright fill (6.84:1). */
    --cta-gradient: linear-gradient(135deg, #0369a1, #6d28d9);
    --on-primary: #04121c;

    /* What hover/press states actually change — used instead of
       `transition: all`, which also animated layout properties. */
    --ui-transition-props: color, background-color, border-color, box-shadow, opacity, transform;

    --font-main: 'Outfit', sans-serif;
    /* Type scale — Apple's text-style ladder. Every font size in the
       app should be one of these eight steps. */
    --fs-caption2: 11px;
    --fs-caption1: 12px;
    --fs-footnote: 13px;
    --fs-subhead: 15px;
    --fs-body: 17px;
    --fs-title2: 22px;
    --fs-title1: 28px;
    --fs-largetitle: 34px;
    --card-radius: 24px;
}