/* ────────────────────────────────────────────────────────────────────
   XOTLIST — Brand tokens
   Source of truth: BRAND.md
   Single :root layer. Imported by style.css. Never duplicated.
   Edit here → update BRAND.md → bump version comment below.
   ──────────────────────────────────────────────────────────────────── */

:root {

    /* ── COLOR ─────────────────────────────────────────────────────── */

    /* Surface (4-step elevation on dark canvas) */
    --color-bg:           #0d0d0d;
    --color-surface:      #161618;
    --color-surface-2:    #1c1c1e;
    --color-surface-3:    #242426;

    /* Borders */
    --color-border:       rgba(255,255,255,0.07);
    --color-border-2:     rgba(255,255,255,0.13);

    /* Text */
    --color-text:         rgba(255,255,255,0.92);
    --color-text-2:       rgba(255,255,255,0.55);
    --color-text-3:       rgba(255,255,255,0.30);
    --color-text-4:       rgba(255,255,255,0.12);
    --color-muted:        rgba(255,255,255,0.40);

    /* Brand — primary chromatic anchor (≥24px surfaces) */
    --color-accent:       #F0506C;            /* surface coral — links, badges, focus rings, body UI ≥24px. hsl(350°, 84%, 63%) */
    --color-accent-hover: #CE333B;            /* warmer-darker companion for hover/active */
    --color-accent-on:    #0d0d0d;            /* text color when placed ON accent surface (black, AAA-pass) */
    --color-accent-soft:  rgba(240,80,108,0.08); /* soft tint for accent backgrounds */

    /* Brand — high-density signal (≤32px brand identifiers) */
    --color-signal:       #FF0F6F;            /* electric magenta — favicon, app icon, OG tile, masthead bell ping. Reserved for ≤32px — needs maximum visual signal at small sizes. NEVER use on body UI. */

    /* Brand — semantic specialty (reserved roles) */
    --color-gold:         #c9a227;            /* awards / Pro tier */
    --color-green:        #1db954;            /* streaming-link affordance */

    /* ── TYPOGRAPHY ────────────────────────────────────────────────── */

    --font-primary:       'Satoshi', system-ui, -apple-system, sans-serif;
    --font-tabular:       'Barlow Condensed', Impact, sans-serif;     /* sports scores / fixtures / tabular only */
    --font-condensed:     'Barlow Condensed', 'Barlow', sans-serif;              /* score tickers */

    /* Type scale — Tailwind-aligned. Pick from this list. */
    --text-3xs:           0.625rem;          /* 10px */
    --text-2xs:           0.6875rem;         /* 11px */
    --text-xs:            0.75rem;           /* 12px */
    --text-sm:            0.875rem;          /* 14px */
    --text-base:          1rem;              /* 16px */
    --text-md:            1.125rem;          /* 18px */
    --text-lg:            1.25rem;           /* 20px */
    --text-xl:            1.5rem;            /* 24px */
    --text-2xl:           1.875rem;          /* 30px */
    --text-3xl:           2.25rem;           /* 36px */
    --text-4xl:           3rem;              /* 48px */
    --text-5xl:           3.75rem;           /* 60px */
    --text-6xl:           4.5rem;            /* 72px */

    /* Line height */
    --lh-tight:           1.1;
    --lh-snug:            1.25;
    --lh-normal:          1.3;
    --lh-base:            1.5;
    --lh-relaxed:         1.6;

    /* Letter-spacing */
    --tracking-tighter:   -0.05em;
    --tracking-tight:     -0.025em;
    --tracking-normal:    0;
    --tracking-wide:      0.05em;
    --tracking-wider:     0.1em;
    --tracking-widest:    0.15em;

    /* Legacy (do not remove until full type-scale migration is done) */
    --font-size-base:     16px;
    --line-height-base:   1.6;

    /* ── SPACING ───────────────────────────────────────────────────── */

    --space-0:            0;
    --space-1:            0.25rem;            /* 4px */
    --space-2:            0.5rem;              /* 8px */
    --space-3:            0.75rem;             /* 12px */
    --space-4:            1rem;                /* 16px */
    --space-5:            1.25rem;             /* 20px */
    --space-6:            1.5rem;              /* 24px */
    --space-8:            2rem;                /* 32px */
    --space-10:           2.5rem;              /* 40px */
    --space-12:           3rem;                /* 48px */
    --space-16:           4rem;                /* 64px */
    --space-20:           5rem;                /* 80px */
    --space-24:           6rem;                /* 96px */

    /* Legacy aliases — keep until templates migrate */
    --spacing-xs:         var(--space-1);
    --spacing-sm:         var(--space-2);
    --spacing-md:         var(--space-4);
    --spacing-lg:         var(--space-8);
    --spacing-xl:         var(--space-16);
    --gap:                var(--space-6);

    /* ── LAYOUT ────────────────────────────────────────────────────── */

    --xot-max:            1280px;
    --xot-narrow:         768px;
    --xot-wide:           1440px;
    --max-width:          var(--xot-max);

    /* ── RADIUS ────────────────────────────────────────────────────── */

    --radius-none:        0;
    --radius-sm:          4px;
    --radius-md:          8px;
    --radius-lg:          10px;                /* canonical card radius */
    --radius-xl:          16px;
    --radius-2xl:         24px;
    --radius-full:        9999px;

    /* ── SHADOW ────────────────────────────────────────────────────── */

    --shadow-sm:          0 2px 8px rgba(0,0,0,0.30);
    --shadow-md:          0 4px 16px rgba(0,0,0,0.40);
    --shadow-lg:          0 6px 24px rgba(0,0,0,0.50);
    --shadow-xl:          0 12px 36px rgba(0,0,0,0.50);
    --shadow-2xl:         0 16px 40px rgba(0,0,0,0.65);

    /* ── ICON SIZE ─────────────────────────────────────────────────── */

    --icon-xs:            12px;
    --icon-sm:            16px;
    --icon-md:            20px;
    --icon-lg:            24px;
    --icon-xl:            32px;

    /* ── MOTION ────────────────────────────────────────────────────── */

    --motion-fast:        0.15s;
    --motion-base:        0.20s;
    --motion-medium:      0.30s;
    --motion-slow:        0.40s;
    --motion-slower:      0.60s;

    --ease-out:           cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:        cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring:        cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Z-INDEX ───────────────────────────────────────────────────── */

    --z-base:             0;
    --z-rail:             10;
    --z-header:           50;
    --z-modal:            100;
    --z-modal-content:    110;
    --z-toast:            200;
    --z-overlay:          9999;

}

/* Reduced motion — accessibility */
@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-fast:    0.01s;
        --motion-base:    0.01s;
        --motion-medium:  0.01s;
        --motion-slow:    0.01s;
        --motion-slower:  0.01s;
    }
}