/* ==========================================================================
   Chess It Out -- design tokens
   ==========================================================================
   This is the ONLY file in which a colour is written down. Every other
   stylesheet consumes tokens from here. (The seven social-network brand
   colours in landing_page.css are the single deliberate exception -- those
   are fixed by the networks themselves.)

   TO TRY A NEW PALETTE: edit the SEEDS block below and nothing else.
   Everything -- surfaces, borders, text, hovers, the board highlights --
   is derived from those seeds with color-mix().
   ========================================================================== */

:root {
    /* ---------------------------------------------------------- SEEDS ---- */
    --seed-bg: #15171a;      /* page background; drives every surface + border */
    --seed-ink: #e9ecef;     /* text; drives every muted/faint text tone       */
    /* Brand und Accent sind derzeit dieselbe Farbe: das Gruen ist raus, es
       laeuft alles ueber das Gold. Die Variable bleibt, damit die zwei Rollen
       (Identitaetsfarbe vs. Hervorhebung) getrennt bleiben und man spaeter nur
       hier wieder auseinandergehen muss. */
    --seed-brand: #d9b45b;   /* war #2f7268 (Teal)                             */
    --seed-accent: #d9b45b;  /* the gold highlight colour + board highlights   */
    --seed-danger: #cf5a52;
    --seed-success: #58a86a;
    --seed-warning: #d99a3f;

    /* ------------------------------------------------------- SURFACES ---- */
    --bg: var(--seed-bg);
    --surface-1: color-mix(in srgb, var(--seed-bg) 93%, var(--seed-ink));
    --surface-2: color-mix(in srgb, var(--seed-bg) 88%, var(--seed-ink));
    --surface-3: color-mix(in srgb, var(--seed-bg) 81%, var(--seed-ink));
    --surface-brand: color-mix(in srgb, var(--seed-brand) 20%, var(--seed-bg));
    /* Helle Flaeche fuer das Vote-Control. Die Figurensaetze sind fuer helle
       Felder gezeichnet -- auf dunklem Grund waere der schwarze Koenig eine
       Silhouette. Statt eines Feldes je Figur ist deshalb das ganze Element hell. */
    --vote-surface: color-mix(in srgb, var(--seed-ink) 74%, var(--seed-bg));
    --vote-surface-hover: color-mix(in srgb, var(--seed-ink) 60%, var(--seed-bg));
    /* Schrift auf so einer hellen Flaeche -- die normalen Textfarben sind fuer
       dunklen Grund gemacht und kaemen dort auf 1.5:1. */
    --text-on-light: color-mix(in srgb, var(--seed-bg) 90%, black);
    --text-on-light-muted: color-mix(in srgb, var(--seed-bg) 78%, var(--seed-ink));
    --surface-accent: color-mix(in srgb, var(--seed-accent) 16%, var(--seed-bg));

    /* Translucent layers (scrims, board overlay) */
    --scrim-soft: color-mix(in srgb, var(--seed-bg) 40%, transparent);
    --scrim: color-mix(in srgb, var(--seed-bg) 72%, transparent);
    --scrim-strong: color-mix(in srgb, var(--seed-bg) 88%, transparent);

    /* --------------------------------------------------------- BORDERS --- */
    --border: color-mix(in srgb, var(--seed-bg) 84%, var(--seed-ink));
    --border-strong: color-mix(in srgb, var(--seed-bg) 70%, var(--seed-ink));
    --border-brand: color-mix(in srgb, var(--seed-brand) 60%, var(--seed-bg));
    --border-accent: color-mix(in srgb, var(--seed-accent) 45%, var(--seed-bg));

    /* ------------------------------------------------------------ TEXT --- */
    --text: var(--seed-ink);
    --text-muted: color-mix(in srgb, var(--seed-ink) 64%, var(--seed-bg));
    --text-faint: color-mix(in srgb, var(--seed-ink) 42%, var(--seed-bg));
    /* Solange --seed-brand das helle Gold ist, muss die Schrift darauf dunkel
       sein: das fruehere Fast-Weiss kaeme auf Gold auf 1.8:1 Kontrast (auf dem
       Teal waren es 5.1:1). Wird die Brandfarbe wieder dunkel, hier zurueck auf
       color-mix(in srgb, var(--seed-ink) 95%, white). */
    --text-on-brand: color-mix(in srgb, var(--seed-bg) 90%, black);
    --text-on-accent: color-mix(in srgb, var(--seed-bg) 90%, black);

    /* ----------------------------------------------------------- BRAND --- */
    --brand: var(--seed-brand);
    --brand-hover: color-mix(in srgb, var(--seed-brand) 84%, white);
    --brand-active: color-mix(in srgb, var(--seed-brand) 86%, black);
    --brand-soft: color-mix(in srgb, var(--seed-brand) 16%, var(--seed-bg));

    --accent: var(--seed-accent);
    --accent-hover: color-mix(in srgb, var(--seed-accent) 85%, white);
    --accent-active: color-mix(in srgb, var(--seed-accent) 86%, black);
    --accent-soft: color-mix(in srgb, var(--seed-accent) 14%, var(--seed-bg));

    /* ---------------------------------------------------------- STATUS --- */
    --danger: var(--seed-danger);
    --danger-hover: color-mix(in srgb, var(--seed-danger) 85%, white);
    --danger-soft: color-mix(in srgb, var(--seed-danger) 15%, var(--seed-bg));
    --success: var(--seed-success);
    --warning: var(--seed-warning);

    /* ----------------------------------------------------------- BOARD --- */
    /* chessground highlight colours -- applied in the override block at the
       bottom of game_base.css. The vendored chessground CSS is never edited. */
    --board-lastmove: color-mix(in srgb, var(--seed-accent) 52%, transparent);
    --board-selected: color-mix(in srgb, var(--seed-accent) 66%, transparent);
    --board-dest: color-mix(in srgb, var(--seed-accent) 62%, transparent);
    --board-dest-solid: var(--seed-accent);
    --board-check: color-mix(in srgb, var(--seed-danger) 60%, transparent);
    /* Standoff reveal flash */
    --board-reveal: color-mix(in srgb, var(--seed-accent) 40%, transparent);
    --board-reveal-glow: color-mix(in srgb, var(--seed-accent) 75%, transparent);

    /* ------------------------------------------------------ TYPOGRAPHY --- */
    --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'Inter', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo,
                 Consolas, monospace;

    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-md: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.375rem;
    --fs-2xl: 1.75rem;
    --fs-3xl: 2.25rem;

    --lh-tight: 1.2;
    --lh-normal: 1.55;

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* --------------------------------------------------------- SPACING --- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* ---------------------------------------------------------- SHAPE ---- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    --radius-full: 999px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);

    --ring: 0 0 0 3px color-mix(in srgb, var(--seed-accent) 45%, transparent);

    --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 280ms cubic-bezier(0.4, 0, 0.2, 1);

    /* --------------------------------------------------------- LAYERS ---- */
    --z-board: 1;
    --z-iframe: 2;
    --z-overlay: 3;
    --z-popup: 4;
    --z-scrim: 900;
    --z-sidebar: 1000;
    --z-burger: 1001;

    /* ------------------------------------------------- BOARD-RELATIVE ---- */
    /* The game views size themselves off the board rather than off rem, which
       is how they stay responsive without a single media query. Keep it. */
    --board_size: min(60vh, 100vw);
    --margin_standard: calc(0.01 * var(--board_size));
    --font-size-small: calc(0.02 * var(--board_size));
    --font-size-medium: calc(0.03 * var(--board_size));
    --font-size-large: calc(0.04 * var(--board_size));

    /* Height held free below the board for the controls (#controls in
       game_base.css). Must stay >= the tallest in-game stack -- vote control,
       skip toggle, #send-btn and #resign-btn -- or the board starts resizing
       between states again.

       Two terms because the stack itself has two: the skip toggle and the gaps
       are rem-based, while the vote control's labels and both buttons are sized
       off --board_size. Measured against the real stack it runs ~20px of slack
       at every viewport from 390px to 1200px tall; that slack is deliberate, it
       is what absorbs a different default font size. Raising it only costs the
       board those pixels -- getting it too low costs the board its stability. */
    --controls-reserve: calc(12.5rem + 0.14 * var(--board_size));

    /* --------------------------------------------------------- SIDEBAR --- */
    --sidebar-width: 20rem;
    --burger-size: 2.75rem;
    --burger-inset: var(--space-3);
}

/* Browsers without color-mix() would fall back to unset tokens, so give the
   ones that carry the whole page a static fallback. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    :root {
        --surface-1: #1b1e22;
        --surface-2: #23272c;
        --surface-3: #2e333a;
        --surface-brand: #2e2a20;
        --vote-surface: #b2b5b8;
        --vote-surface-hover: #989b9e;
        --text-on-light: #131518;
        --text-on-light-muted: #444649;
        --surface-accent: #2e2a20;
        --scrim-soft: rgba(21, 23, 26, 0.40);
        --scrim: rgba(21, 23, 26, 0.72);
        --scrim-strong: rgba(21, 23, 26, 0.88);
        --border: #2b2f35;
        --border-strong: #3d434b;
        --border-brand: #6b5c33;
        --border-accent: #6b5c33;
        --text-muted: #9aa0a8;
        --text-faint: #6e747c;
        --text-on-brand: #131518;
        --text-on-accent: #131518;
        --brand-hover: #e2c477;
        --brand-active: #ba9a4e;
        --brand-soft: #262421;
        --accent-hover: #e2c477;
        --accent-active: #ba9a4e;
        --accent-soft: #262421;
        --danger-hover: #d8746d;
        --danger-soft: #2c1f1e;
        --board-lastmove: rgba(217, 180, 91, 0.52);
        --board-selected: rgba(217, 180, 91, 0.66);
        --board-dest: rgba(217, 180, 91, 0.62);
        --board-check: rgba(207, 90, 82, 0.6);
        --board-reveal: rgba(217, 180, 91, 0.4);
        --board-reveal-glow: rgba(217, 180, 91, 0.75);
        --ring: 0 0 0 3px rgba(217, 180, 91, 0.45);
    }
}