/**
 * Chess Academy — Design Tokens
 *
 * Every visual value is defined here. Never hardcode values in components.
 * Supports light and dark themes via data-theme attribute.
 *
 * Brand direction: deep indigo-violet primary with a warm brass accent.
 * Chosen deliberately to read as premium/editorial and to sit apart from the
 * corporate blue and club green used across the rest of the chess-site space.
 */

:root,
[data-theme="light"] {
    /* ── Primary Palette (indigo-violet) ──────────────────── */
    --color-primary-50:  hsl(250, 100%, 97%);
    --color-primary-100: hsl(250, 95%, 93%);
    --color-primary-200: hsl(250, 90%, 86%);
    --color-primary-300: hsl(250, 85%, 75%);
    --color-primary-400: hsl(252, 80%, 66%);
    --color-primary-500: hsl(255, 72%, 56%);
    --color-primary-600: hsl(258, 68%, 47%);
    --color-primary-700: hsl(260, 70%, 38%);
    --color-primary-800: hsl(262, 72%, 27%);
    --color-primary-900: hsl(265, 75%, 17%);

    /* ── Accent (brass / warm gold) ───────────────────────── */
    --color-accent-300: hsl(42, 95%, 78%);
    --color-accent-400: hsl(40, 92%, 62%);
    --color-accent-500: hsl(38, 92%, 52%);
    --color-accent-600: hsl(34, 90%, 44%);

    /* ── Semantic Colors ──────────────────────────────────── */
    --color-success: hsl(158, 64%, 38%);
    --color-success-bg: hsl(158, 60%, 95%);
    --color-warning: hsl(38, 92%, 48%);
    --color-warning-bg: hsl(38, 92%, 95%);
    --color-danger:  hsl(354, 70%, 50%);
    --color-danger-bg: hsl(354, 70%, 96%);
    --color-danger-hover: hsl(354, 70%, 42%);
    --color-info:    hsl(205, 80%, 48%);
    --color-info-bg: hsl(205, 80%, 95%);

    /* ── Neutral / Surface (subtly warm, never cold gray) ─── */
    --color-bg:           hsl(250, 40%, 98.5%);
    --color-surface:      hsl(0, 0%, 100%);
    --color-surface-alt:  hsl(250, 30%, 96.5%);
    --color-surface-sunk: hsl(250, 28%, 94%);
    --color-border:       hsl(250, 18%, 88%);
    --color-border-light: hsl(250, 20%, 93%);

    /* ── Text ─────────────────────────────────────────────── */
    --color-text:         hsl(255, 28%, 13%);
    --color-text-secondary: hsl(252, 12%, 42%);
    --color-text-tertiary:  hsl(252, 10%, 56%);
    --color-text-disabled:  hsl(252, 8%, 72%);
    --color-text-inverse:   hsl(0, 0%, 100%);

    /* ── Focus / Selection / Rings ────────────────────────── */
    --color-focus:     hsl(255, 85%, 60%);
    --color-selection: hsl(250, 90%, 92%);
    --ring-primary:    0 0 0 3px hsla(255, 72%, 56%, 0.18);
    --ring-danger:     0 0 0 3px hsla(354, 70%, 50%, 0.18);

    /* ── Brand Gradients ──────────────────────────────────── */
    --gradient-brand: linear-gradient(135deg, hsl(252, 80%, 62%) 0%, hsl(262, 72%, 40%) 100%);
    --gradient-brass: linear-gradient(135deg, hsl(42, 95%, 62%) 0%, hsl(34, 90%, 48%) 100%);
    --gradient-ink:   linear-gradient(160deg, hsl(258, 45%, 16%) 0%, hsl(262, 55%, 10%) 100%);

    /* ── Board Sizing ─────────────────────────────────────────
     * One value governs the board on every solving page, so the daily
     * puzzle and an individual puzzle are always the same size.
     *
     * It is capped by viewport HEIGHT, not just the width of whatever column
     * it sits in — a square element sized only by width grows as tall as its
     * container is wide, which is what made the board overflow the window on
     * the wide-column puzzle page. The subtracted allowance covers the sticky
     * header, section padding, and the controls row beneath the board; the
     * clamp floor keeps it usable on short/landscape screens.
     */
    --board-chrome: 17rem;                 /* header + padding + heading + controls */
    --board-size: clamp(17rem, calc(100vh - var(--board-chrome)), 32rem);

    /* ── Board Colors (independent of theme) ──────────────── */
    --board-light: hsl(38, 38%, 82%);
    --board-dark:  hsl(28, 35%, 58%);
    --board-highlight: hsla(55, 100%, 50%, 0.45);
    --board-move-hint: hsla(0, 0%, 0%, 0.12);
    --board-check: hsla(0, 100%, 50%, 0.5);

    /* ── Spacing Scale ────────────────────────────────────── */
    --space-1:  0.25rem;  /* 4px  */
    --space-2:  0.5rem;   /* 8px  */
    --space-3:  0.75rem;  /* 12px */
    --space-4:  1rem;     /* 16px */
    --space-5:  1.5rem;   /* 24px */
    --space-6:  2rem;     /* 32px */
    --space-8:  3rem;     /* 48px */
    --space-10: 4rem;     /* 64px */
    --space-12: 6rem;     /* 96px */
    --space-16: 8rem;     /* 128px */

    /* ── Typography ───────────────────────────────────────── */
    --font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;

    --text-xs:   0.75rem;   /* 12px */
    --text-sm:   0.875rem;  /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg:   1.125rem;  /* 18px */
    --text-xl:   1.25rem;   /* 20px */
    --text-2xl:  1.5rem;    /* 24px */
    --text-3xl:  2rem;      /* 32px */
    --text-4xl:  2.5rem;    /* 40px */
    --text-5xl:  3rem;      /* 48px */
    --text-6xl:  3.75rem;   /* 60px */

    --leading-tight:  1.2;
    --leading-snug:   1.35;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    --tracking-tight: -0.02em;
    --tracking-wide:  0.04em;

    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;
    --weight-extrabold: 800;

    /* ── Border Radius ────────────────────────────────────── */
    --radius-sm:   0.25rem;   /* 4px  */
    --radius-md:   0.5rem;    /* 8px  */
    --radius-lg:   0.75rem;   /* 12px */
    --radius-xl:   1rem;      /* 16px */
    --radius-2xl:  1.5rem;    /* 24px */
    --radius-full: 9999px;

    /* ── Shadows (tinted with the brand hue, never flat black) */
    --shadow-none: none;
    --shadow-sm:   0 1px 2px hsla(255, 30%, 20%, 0.06);
    --shadow-md:   0 4px 8px hsla(255, 30%, 20%, 0.07), 0 1px 3px hsla(255, 30%, 20%, 0.06);
    --shadow-lg:   0 12px 20px hsla(255, 30%, 20%, 0.09), 0 4px 8px hsla(255, 30%, 20%, 0.05);
    --shadow-xl:   0 24px 40px hsla(255, 30%, 20%, 0.12), 0 8px 16px hsla(255, 30%, 20%, 0.06);
    --shadow-primary: 0 1px 2px hsla(258, 68%, 35%, 0.28), 0 4px 12px hsla(255, 72%, 50%, 0.22);
    --shadow-primary-lg: 0 2px 4px hsla(258, 68%, 35%, 0.3), 0 10px 24px hsla(255, 72%, 50%, 0.3);

    /* ── Transitions ──────────────────────────────────────── */
    --duration-fast:   120ms;
    --duration-normal: 180ms;
    --duration-slow:   300ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

    /* ── Z-Index Layers ───────────────────────────────────── */
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-overlay:   300;
    --z-modal:     400;
    --z-toast:     500;
    --z-tooltip:   600;

    /* ── Header surface (used by the sticky nav blur) ─────── */
    --color-header-bg: hsla(250, 60%, 100%, 0.82);
}

/* ── Dark Theme ─────────────────────────────────────────── */
[data-theme="dark"] {
    --color-primary-50:  hsl(258, 40%, 15%);
    --color-primary-100: hsl(258, 42%, 20%);
    --color-primary-200: hsl(256, 45%, 29%);
    --color-primary-300: hsl(254, 50%, 42%);
    --color-primary-400: hsl(252, 62%, 58%);
    --color-primary-500: hsl(252, 82%, 70%);
    --color-primary-600: hsl(250, 88%, 78%);
    --color-primary-700: hsl(250, 92%, 85%);
    --color-primary-800: hsl(250, 95%, 90%);
    --color-primary-900: hsl(250, 100%, 95%);

    --color-accent-300: hsl(42, 60%, 32%);
    --color-accent-400: hsl(40, 85%, 60%);
    --color-accent-500: hsl(40, 92%, 60%);
    --color-accent-600: hsl(38, 92%, 52%);

    --color-success: hsl(158, 58%, 52%);
    --color-success-bg: hsla(158, 50%, 40%, 0.16);
    --color-warning: hsl(38, 88%, 60%);
    --color-warning-bg: hsla(38, 80%, 50%, 0.16);
    --color-danger:  hsl(354, 75%, 65%);
    --color-danger-bg: hsla(354, 65%, 50%, 0.16);
    --color-danger-hover: hsl(354, 75%, 72%);
    --color-info:    hsl(205, 75%, 62%);
    --color-info-bg: hsla(205, 70%, 50%, 0.16);

    --color-bg:           hsl(255, 25%, 7%);
    --color-surface:      hsl(255, 22%, 10.5%);
    --color-surface-alt:  hsl(255, 20%, 14.5%);
    --color-surface-sunk: hsl(255, 24%, 8.5%);
    --color-border:       hsl(255, 15%, 24%);
    --color-border-light: hsl(255, 15%, 19%);

    --color-text:          hsl(250, 30%, 94%);
    --color-text-secondary: hsl(250, 12%, 68%);
    --color-text-tertiary:  hsl(250, 10%, 52%);
    --color-text-disabled:  hsl(250, 8%, 36%);
    --color-text-inverse:   hsl(255, 28%, 10%);

    --color-focus:     hsl(252, 90%, 72%);
    --color-selection: hsl(255, 45%, 28%);
    --ring-primary:    0 0 0 3px hsla(252, 82%, 70%, 0.25);
    --ring-danger:     0 0 0 3px hsla(354, 75%, 65%, 0.25);

    --gradient-brand: linear-gradient(135deg, hsl(252, 70%, 58%) 0%, hsl(262, 60%, 38%) 100%);
    --gradient-ink:   linear-gradient(160deg, hsl(255, 30%, 13%) 0%, hsl(258, 35%, 8%) 100%);

    --board-light: hsl(38, 30%, 72%);
    --board-dark:  hsl(28, 30%, 48%);

    --shadow-sm:   0 1px 2px hsla(0, 0%, 0%, 0.3);
    --shadow-md:   0 4px 8px hsla(0, 0%, 0%, 0.36), 0 1px 3px hsla(0, 0%, 0%, 0.24);
    --shadow-lg:   0 12px 20px hsla(0, 0%, 0%, 0.42), 0 4px 8px hsla(0, 0%, 0%, 0.3);
    --shadow-xl:   0 24px 40px hsla(0, 0%, 0%, 0.5), 0 8px 16px hsla(0, 0%, 0%, 0.34);
    --shadow-primary: 0 1px 2px hsla(0, 0%, 0%, 0.4), 0 4px 12px hsla(252, 70%, 40%, 0.4);
    --shadow-primary-lg: 0 2px 4px hsla(0, 0%, 0%, 0.4), 0 10px 24px hsla(252, 70%, 45%, 0.45);

    --color-header-bg: hsla(255, 24%, 9%, 0.82);
}

/* Mobile browsers grow/shrink the viewport as the URL bar hides, so 100vh
   overshoots the space actually visible. svh is the stable "small" height —
   used where supported, with the 100vh rule above as the fallback. */
@supports (height: 100svh) {
    :root {
        --board-size: clamp(17rem, calc(100svh - var(--board-chrome)), 32rem);
    }
}

/* Honour the OS preference when the user hasn't explicitly chosen a theme. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        color-scheme: dark;
    }
}

::selection {
    background: var(--color-selection);
    color: var(--color-text);
}