/* ══════════════════════════════════════════════════════════════════════════
   FIT-VERSE DESIGN SYSTEM — Design Tokens
   Single source of truth for colors, type, spacing, radii, motion.
   Extracted from the live PWA (v0.9.1168), Phantom A theme default.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Fonts (Google) ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Barlow:wght@300;400;500;600;700;800&display=swap');

:root {
    /* ── Typography ── */
    --font-display: 'Orbitron', 'Eurostile', monospace;      /* UPPERCASE. Tabs, titles, numbers, timer display, stat readouts */
    --font-body:    'Barlow', 'Inter', system-ui, sans-serif; /* Body copy, labels, buttons (secondary), forms */

    /* ── Phantom A — default theme (dark, violet-magenta) ── */
    --bg-primary:   #0a0e17;   /* Ambient canvas */
    --bg-secondary: #0a0e17;   /* Panels (unified w/ ambient in Phantom A) */
    --bg-panel:     #141b2d;   /* Card interior fill — used inside plasma-button pseudo-elements */
    --bg-elevated:  #181f33;   /* Hover state on panels */
    --body-grad:    none;

    --accent-cyan:    #9d8df1;  /* Primary accent (legacy name; actual hue is violet in Phantom A) */
    --accent-magenta: #d166d1;  /* Secondary accent — used in gradient headlines */
    --accent-sub:     #b8c4ff;  /* Tertiary — sparingly */

    --accent-rgb:     157, 141, 241;
    --accent2-rgb:    209, 102, 209;

    --text-primary:   #f0eeff;  /* High-contrast body text */
    --text-secondary: #b8b0d8;  /* Muted labels, inactive tabs */
    --timer-display:  #ddd6fe;  /* Near-white lavender for giant countdown digits */

    /* ── Glow (derived from accent) ── */
    --glow:      rgba(157, 141, 241, 0.55);
    --glow-soft: rgba(157, 141, 241, 0.2);

    /* ── White alpha scale (the --wN system — neutral surface ramp) ── */
    /* Used for hairline borders, subtle card fills, hover states. Works
       identically on any theme because everything's alpha over ambient. */
    --w3:  rgba(255,255,255,0.03);
    --w6:  rgba(255,255,255,0.06);
    --w8:  rgba(255,255,255,0.08);
    --w10: rgba(255,255,255,0.10);
    --w12: rgba(255,255,255,0.12);
    --w15: rgba(255,255,255,0.15);
    --w20: rgba(255,255,255,0.20);
    --w25: rgba(255,255,255,0.25);

    /* ── Semantic status colors ── */
    --ok:      #4ade80;
    --warn:    #fbbf24;
    --danger:  #f44336;
    --info:    var(--accent-cyan);

    /* ── Radii ── */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 8px;    /* Buttons, chips */
    --r-lg: 12px;   /* Cards, sheets interior */
    --r-xl: 16px;   /* Modal panels */
    --r-pill: 999px;

    /* ── Spacing (rem-based; root = 16px) ── */
    --s-0:  0;
    --s-1:  0.15rem;  /*  2.4px */
    --s-2:  0.3rem;   /*  4.8px */
    --s-3:  0.45rem;  /*  7.2px — tab-btn padding-y */
    --s-4:  0.6rem;   /*  9.6px */
    --s-5:  0.8rem;   /* 12.8px */
    --s-6:  1rem;     /*   16px */
    --s-7:  1.2rem;
    --s-8:  1.5rem;
    --s-9:  2rem;

    /* ── Elevation (dark-mode appropriate — soft + luminous) ── */
    --elev-1: 0 1px 3px rgba(0,0,0,0.3);
    --elev-2: 0 2px 8px rgba(0,0,0,0.4);
    --elev-3: 0 8px 24px rgba(0,0,0,0.5);
    --elev-modal: 0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.4);

    /* ── Motion ── */
    --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 0.15s;
    --dur-base: 0.22s;
    --dur-slow: 0.4s;

    /* ── Hit target floor (PWA on mobile) ── */
    --hit: 44px;
}

/* ── Daylight theme (opt-in via html.light-theme) ── */
html.light-theme {
    --bg-primary:   #F2F1ED;   /* Canvas */
    --bg-secondary: #F2F1ED;
    --bg-panel:     #FAF9F6;   /* Card */
    --bg-elevated:  #FEFDFB;   /* Elevated card / button */
    --body-grad:    none;

    --accent-cyan:    #0075a0;
    --accent-magenta: #b81250;
    --accent-sub:     #5347c4;

    --accent-rgb:  0, 117, 160;
    --accent2-rgb: 184, 18, 80;

    --text-primary:   #1a1c28;
    --text-secondary: #504F4B;
    --timer-display:  #0075a0;

    --glow:      rgba(0, 117, 160, 0.3);
    --glow-soft: rgba(0, 117, 160, 0.12);

    --w3:  rgba(0,0,0,0.03);
    --w6:  rgba(0,0,0,0.05);
    --w8:  rgba(0,0,0,0.07);
    --w10: rgba(0,0,0,0.08);
    --w12: rgba(0,0,0,0.10);
    --w15: rgba(0,0,0,0.12);
    --w20: rgba(0,0,0,0.15);
    --w25: rgba(0,0,0,0.18);

    --elev-1: 0 1px 4px rgba(0,0,0,0.06);
    --elev-2: 0 2px 8px rgba(0,0,0,0.08);
    --elev-3: 0 8px 24px rgba(0,0,0,0.12);
    --elev-modal: 0 20px 60px rgba(0,0,0,0.2);
}

/* ──────────────────────────────────────────────────────────────────
   ALTERNATE THEMES — opt-in by adding class to <html>.
   All four dark themes and the light theme ship with the app.
   ────────────────────────────────────────────────────────────────── */

html.theme-fitverseX {
    --bg-primary: #0a0e17; --bg-secondary: #141b2d;
    --accent-cyan: #00d9ff; --accent-magenta: #ff006e; --accent-sub: #9d8df1;
    --text-primary: #ffffff; --text-secondary: #ccd6e8;
    --accent-rgb: 0,217,255; --accent2-rgb: 255,0,110;
    --glow: rgba(0,217,255,0.55); --glow-soft: rgba(0,217,255,0.2);
    --body-grad: linear-gradient(160deg,#0a0e17 0%,#0f1a2e 40%,#0a1220 70%,#0a0e17 100%);
}

html.theme-ocean {
    --bg-primary: #060d15; --bg-secondary: #0c1a2a;
    --accent-cyan: #00b4d8; --accent-magenta: #ff7eb3; --accent-sub: #48cae4;
    --text-primary: #e8f4f8; --text-secondary: #7ea8b8;
    --accent-rgb: 0,180,216; --accent2-rgb: 255,126,179;
    --glow: rgba(0,180,216,0.5); --glow-soft: rgba(0,180,216,0.18);
    --body-grad: linear-gradient(135deg,#060d15 0%,#081828 100%);
}

html.theme-phantomZ {
    --bg-primary: #0b0b18; --bg-secondary: #13132a;
    --accent-cyan: #9d8df1; --accent-magenta: #d166d1; --accent-sub: #b8c4ff;
    --text-primary: #f0eeff; --text-secondary: #b8b0d8;
    --accent-rgb: 157,141,241; --accent2-rgb: 209,102,209;
    --glow: rgba(157,141,241,0.55); --glow-soft: rgba(157,141,241,0.2);
    --body-grad: linear-gradient(135deg,#0b0b18 0%,#1a1035 50%,#0b0b18 100%);
}