/* ============================================================
   Gambit - Design tokens
   A calm, premium chess-club system: deep forest-green field, crisp
   white card surfaces, classic green board, one green accent, gold
   reserved for achievement/promotion moments. System sans for UI;
   Roboto Mono for chess data only. 8px spacing rhythm; soft, low,
   green-tinted shadows; quick, non-bouncy motion.
   ============================================================ */

:root {
    /* ---- Brand green ramp ---------------------------------- */
    --green-950: #0f2c20; /* deepest shadow green                */
    --green-900: #14352a; /* footer / deep panels                */
    --green-800: #1b4332; /* PAGE BASE - the Gambit forest green */
    --green-700: #245741; /* raised dark panel / hover on dark   */
    --green-600: #2d6a4f; /* ACCENT - primary actions, links     */
    --green-500: #40916c; /* hover / brighter accent             */
    --green-400: #52b788; /* active highlight                    */
    --green-300: #74c69d; /* tints, success wash                 */
    --green-100: #d8f0e4; /* faint green fill on white           */

    /* ---- Gold (achievements / premium accent, used sparingly) */
    --gold-600: #c2882b;
    --gold-500: #d4a13c; /* trophy / streak / "promote" accent  */
    --gold-300: #e6c477;

    /* ---- Neutrals ------------------------------------------ */
    --white: #ffffff;
    --paper: #f8faf9; /* muted off-white inset               */
    --mist: #eef2f0; /* inset wells, table stripes          */
    --cloud: #e6ebe8; /* dividers on light                   */
    --stone-300: #d3dad6; /* strong border on light              */
    --stone-500: #98a39c; /* disabled text / icons               */
    --ink-700: #38463f; /* body text on light                  */
    --ink-800: #243029; /* secondary headings                  */
    --ink-900: #16241d; /* primary headings (greenish black)   */

    /* ---- Chessboard squares (classic green theme) ---------- */
    --board-light: #eeeed2;
    --board-dark: #769656;
    --board-light-active: #f6f680; /* last-move / select on light */
    --board-dark-active: #bbcb45; /* last-move / select on dark  */
    --board-check: rgba(157, 2, 8, 0.55);

    /* ---- Semantic status ----------------------------------- */
    --danger-600: #9d0208; /* loss / resign / error               */
    --danger-100: #fbe4e5;
    --warning-600: #e85d04; /* low time / caution                  */
    --warning-100: #fdeadd;
    --success-600: #2d6a4f; /* win / confirm (brand green)         */
    --success-100: #d8f0e4;
    --info-600: #2c6e8f; /* neutral notice / sync               */
    --info-100: #dcebf3;

    /* ---- Surfaces ------------------------------------------ */
    --surface-page: var(--green-800);
    --surface-page-deep: var(--green-900);
    --surface-card: var(--white);
    --surface-muted: var(--paper);
    --surface-inset: var(--mist);
    --surface-dark: var(--green-700);

    /* ---- Text on light surfaces ---------------------------- */
    --text-heading: var(--ink-900);
    --text-body: var(--ink-700);
    --text-muted: #6b7a72;
    --text-faint: var(--stone-500);

    /* ---- Text on the dark green field ---------------------- */
    --text-on-dark: #ffffff;
    --text-on-dark-muted: rgba(255, 255, 255, 0.72);
    --text-on-dark-faint: rgba(255, 255, 255, 0.55);

    /* ---- Accent -------------------------------------------- */
    --accent: var(--green-600);
    --accent-hover: var(--green-700);
    --accent-active: var(--green-900);
    --accent-soft: var(--green-100);
    --on-accent: #ffffff;

    /* ---- Borders & lines ----------------------------------- */
    --border-subtle: #e7ece9;
    --border: #dde3df;
    --border-strong: var(--stone-300);
    --border-on-dark: rgba(255, 255, 255, 0.16);

    /* ---- Focus --------------------------------------------- */
    --focus-ring: rgba(45, 106, 79, 0.4);
    --focus-ring-on-dark: rgba(116, 198, 157, 0.55);

    /* ---- Type: families ------------------------------------ */
    --font-sans:
        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
        'Apple Color Emoji', sans-serif;
    --font-display: var(--font-sans);
    --font-mono: ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, Consolas, monospace;

    /* ---- Type: scale (1.0 = 16px) -------------------------- */
    --text-xs: 0.75rem; /* 12 - captions, coordinates        */
    --text-sm: 0.875rem; /* 14 - labels, secondary UI         */
    --text-base: 1rem; /* 16 - body                         */
    --text-lg: 1.125rem; /* 18 - lead / large body            */
    --text-xl: 1.25rem; /* 20 - card titles                  */
    --text-2xl: 1.5rem; /* 24 - section titles               */
    --text-3xl: 2rem; /* 32 - page titles                  */
    --text-4xl: 2.625rem; /* 42 - hero sub                     */
    --text-5xl: 3.5rem; /* 56 - hero display                 */

    /* ---- Type: weights ------------------------------------- */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* ---- Type: line heights -------------------------------- */
    --leading-tight: 1.1;
    --leading-snug: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    /* ---- Type: letter spacing ------------------------------ */
    --tracking-tight: -0.02em;
    --tracking-snug: -0.01em;
    --tracking-normal: 0;
    --tracking-wide: 0.04em;
    --tracking-wider: 0.12em;

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

    /* ---- Container widths ---------------------------------- */
    --container-sm: 640px;
    --container-md: 900px;
    --container-lg: 1200px;
    --container-xl: 1400px;
    --gutter: var(--space-6);

    /* ---- Control heights (44px min touch target) ----------- */
    --control-sm: 36px;
    --control-md: 44px;
    --control-lg: 52px;

    /* ---- Corner radii -------------------------------------- */
    --radius-xs: 3px; /* chips, ticks                        */
    --radius-sm: 4px; /* buttons, inputs                     */
    --radius-md: 8px; /* cards (default)                     */
    --radius-lg: 12px; /* large cards / modals                */
    --radius-xl: 16px; /* hero panels                         */
    --radius-pill: 999px; /* tags, avatars, switches             */

    /* ---- Shadows (soft, low, green-tinted) ----------------- */
    --shadow-xs: 0 1px 2px rgba(15, 44, 32, 0.08);
    --shadow-sm: 0 1px 3px rgba(15, 44, 32, 0.12);
    --shadow-md: 0 2px 8px rgba(15, 44, 32, 0.14);
    --shadow-lg: 0 8px 24px rgba(15, 44, 32, 0.16);
    --shadow-xl: 0 18px 48px rgba(8, 24, 17, 0.34); /* modals on dark */
    --shadow-focus: 0 0 0 3px var(--focus-ring);

    /* ---- Borders ------------------------------------------- */
    --border-width: 1px;
    --border-card: var(--border-width) solid var(--border-subtle);

    /* ---- Motion -------------------------------------------- */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 120ms;
    --dur-base: 180ms;
    --dur-slow: 280ms;
    --transition: all var(--dur-base) var(--ease-out);
}