/* tokens.css — Design tokens (custom properties) */

:root {
    /* ── Spacing ────────────────────────────────────────── */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

    /* ── Typography ─────────────────────────────────────── */
    --font-ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, monospace;
    --font-code: var(--font-mono); /* alias compat */
    --text-2xs: 10px; --text-xs: 12px; --text-sm: 14px; --text-base: 15px;
    --text-lg: 17px; --text-xl: 21px; --text-2xl: 26px;
    --weight-normal: 400; --weight-medium: 500; --weight-semi: 600;
    --weight-bold: 700; --weight-heavy: 800; --weight-black: 900;

    /* ── Radius ─────────────────────────────────────────── */
    --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
    --radius-full: 9999px;

    /* ── Layout ─────────────────────────────────────────── */
    --sidebar-w: 240px;
    --sidebar-w-icon: 56px;
    --bottom-nav-h: 64px;
    --content-max: 1400px;
    --content-pad: 24px;

    /* ── Transitions ────────────────────────────────────── */
    --tr-fast: 150ms ease;
    --tr-normal: 250ms ease;
    --tr-slow: 350ms ease;

    /* ── Z-index ────────────────────────────────────────── */
    --z-sidebar: 50;
    --z-drawer-backdrop: 90;
    --z-drawer: 100;
    --z-bottom-nav: 80;
    --z-toast: 200;
}

/* ════════════════════════════════════════════════════════════
   DARK THEME — Sport Performance
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    /* Backgrounds — slightly cool-tinted, not pure grey */
    --bg-main: #0b0c0f;
    --bg-card: #12131a;
    --bg-card-alt: #181a22;
    --bg-elevated: #1e2028;

    /* Borders */
    --border-color: #262836;
    --border-dash: #2e3040;
    --border-subtle: #1c1e28;

    /* Text */
    --text-main: #eaedf2;
    --text-muted: #7a8194;
    --text-dim: #454a5c;

    /* ── Accent: Teal/Cyan — energy, water, performance ── */
    --accent-blue: #4eadda;
    --accent-green: #36c27a;
    --accent-red: #e05454;
    --accent-yellow: #e0a830;
    --accent-teal: #2dd4a8;

    /* ── Sport discipline colors (vivid) ── */
    --sport-none-bg: #0b0c0f;   --sport-none-dot: #333;
    --sport-swim-bg: rgba(78,173,218,0.15);  --sport-swim-dot: #4eadda;
    --sport-bike-bg: rgba(224,168,48,0.15);  --sport-bike-dot: #e0a830;
    --sport-run-bg:  rgba(240,130,50,0.15);  --sport-run-dot:  #f08232;
    --sport-renf-bg: rgba(168,100,230,0.15); --sport-renf-dot: #a864e6;

    /* Charts */
    --chart-line-1: #4eadda;
    --chart-line-2: #e0a830;
    --chart-line-3: #e05454;
    --chart-fill: rgba(78,173,218,0.08);
    --chart-grid: rgba(255,255,255,0.06);

    /* TSB zones */
    --tsb-risk: #e05454;
    --tsb-optimal: #36c27a;
    --tsb-grey: #555;
    --tsb-transition: #e0a830;
    --tsb-fresh: #4eadda;

    /* Status — vibrant */
    --status-green: #36c27a;    --status-green-bg: rgba(54,194,122,0.12);
    --status-orange: #f08232;   --status-orange-bg: rgba(240,130,50,0.12);
    --status-red: #e05454;      --status-red-bg: rgba(224,84,84,0.12);
    --status-grey: #5a5f70;     --status-grey-bg: rgba(90,95,112,0.10);

    /* Sidebar — dark sport feel */
    --sidebar-bg: #0d0e12;
    --sidebar-border: #1c1e28;
    --sidebar-hover: #181a24;
    --sidebar-active: rgba(45,212,168,0.10);
    --sidebar-active-text: #2dd4a8;

    /* Bottom nav */
    --bottom-nav-bg: #0d0e12;
    --bottom-nav-border: #1c1e28;

    /* Drawer */
    --drawer-backdrop: rgba(0,0,0,0.65);

    /* Chat compat aliases */
    --surface-0: #0b0c0f;
    --surface-1: #10111a;
    --surface-2: #1a1c26;
    --surface-3: #242630;
    --text: #eaedf2;
    --border: #262836;
    --accent: #2dd4a8;
    --danger: #e05454;
}

/* ════════════════════════════════════════════════════════════
   LIGHT THEME — Race Morning
   ════════════════════════════════════════════════════════════ */
[data-theme="light"] {
    /* Backgrounds — clean white with subtle warmth */
    --bg-main: #f4f5f7;
    --bg-card: #ffffff;
    --bg-card-alt: #f8f9fb;
    --bg-elevated: #eef0f4;

    /* Borders */
    --border-color: #d2d5dc;
    --border-dash: #c4c8d0;
    --border-subtle: #e4e6ec;

    /* Text */
    --text-main: #151720;
    --text-muted: #555a6e;
    --text-dim: #8b90a0;

    /* Accents — deepened for contrast on white */
    --accent-blue: #1a78b8;
    --accent-green: #148a52;
    --accent-red: #c03030;
    --accent-yellow: #9a7010;
    --accent-teal: #0d9b78;

    /* Sport colors */
    --sport-none-bg: #fff;        --sport-none-dot: #ddd;
    --sport-swim-bg: rgba(26,120,184,0.10);   --sport-swim-dot: #1a78b8;
    --sport-bike-bg: rgba(154,112,16,0.10);   --sport-bike-dot: #9a7010;
    --sport-run-bg:  rgba(200,100,20,0.10);   --sport-run-dot:  #c86414;
    --sport-renf-bg: rgba(128,60,190,0.10);   --sport-renf-dot: #803cbe;

    /* Charts */
    --chart-line-1: #1a78b8;
    --chart-line-2: #9a7010;
    --chart-line-3: #c03030;
    --chart-fill: rgba(26,120,184,0.06);
    --chart-grid: rgba(0,0,0,0.06);

    /* TSB zones */
    --tsb-risk: #c03030;
    --tsb-optimal: #148a52;
    --tsb-grey: #999;
    --tsb-transition: #9a7010;
    --tsb-fresh: #1a78b8;

    /* Status */
    --status-green: #148a52;    --status-green-bg: rgba(20,138,82,0.08);
    --status-orange: #c86414;   --status-orange-bg: rgba(200,100,20,0.08);
    --status-red: #c03030;      --status-red-bg: rgba(192,48,48,0.08);
    --status-grey: #8b90a0;     --status-grey-bg: rgba(139,144,160,0.06);

    /* Sidebar */
    --sidebar-bg: #ebedf2;
    --sidebar-border: #d6d8e0;
    --sidebar-hover: #e2e4ea;
    --sidebar-active: rgba(13,155,120,0.10);
    --sidebar-active-text: #0d9b78;

    /* Bottom nav */
    --bottom-nav-bg: #ebedf2;
    --bottom-nav-border: #d6d8e0;

    /* Drawer */
    --drawer-backdrop: rgba(0,0,0,0.25);

    /* Chat compat aliases */
    --surface-0: #f4f5f7;
    --surface-1: #ebedf2;
    --surface-2: #e2e4ea;
    --surface-3: #d6d8e0;
    --text: #151720;
    --border: #d2d5dc;
    --accent: #0d9b78;
    --danger: #c03030;
}