/* ============================================================
   RushChess — design tokens
   Restrained professional system. Two themes (dark default,
   light), three densities. No decorative gradients or glows.
   ============================================================ */

:root {
  /* ---- typography ---- */
  --font-ui: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-mono: "Cascadia Mono", Consolas, "SF Mono", monospace;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;   /* body */
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-20: 20px;
  --lh-tight: 1.25;
  --lh-body: 1.45;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- spacing (4px base) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;

  /* density multipliers applied to control heights & paddings */
  --ctl-h: 26px;          /* normal density control height */
  --row-h: 24px;          /* list row height */
  --panel-pad: var(--sp-3);

  /* ---- radii: small and consistent. no pill cards ---- */
  --rad-1: 3px;           /* controls */
  --rad-2: 5px;           /* menus, dialogs */

  /* ---- z layers ---- */
  --z-dock: 10;
  --z-toolbar: 20;
  --z-menu: 900;
  --z-dialog: 1000;
  --z-palette: 1100;
  --z-toast: 1200;

  /* ---- motion ---- */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --t-fast: 90ms;
  --t-med: 160ms;
}

:root[data-density="compact"] { --ctl-h: 22px; --row-h: 20px; --panel-pad: var(--sp-2); --fs-13: 12px; }
:root[data-density="spacious"] { --ctl-h: 30px; --row-h: 28px; --panel-pad: var(--sp-4); }

/* ============================================================
   DARK THEME (default)
   ============================================================ */
:root, :root[data-theme="dark"] {
  color-scheme: dark;

  --bg-app: #16181d;        /* app chrome / rails */
  --bg-panel: #1d2026;      /* panel bodies */
  --bg-inset: #16181d;      /* wells: lists, inputs, notation */
  --bg-raised: #262a32;     /* menus, dialogs, popovers */
  --bg-hover: rgba(255, 255, 255, 0.055);
  --bg-active: rgba(255, 255, 255, 0.09);
  --bg-selected: #2c3648;   /* selected rows/tabs */

  --border: #2c313a;        /* structural borders */
  --border-strong: #3a4150;
  --focus-ring: #5b82d8;

  --text: #d7dce4;
  --text-secondary: #9aa3b2;
  --text-faint: #6b7482;
  --text-inverse: #16181d;

  --accent: #5b82d8;        /* single accent. used sparingly */
  --accent-hover: #6d92e4;
  --accent-text: #8fb0f0;

  --ok: #4e9a5e;
  --warn: #c2953f;
  --err: #c25555;
  --ok-text: #7ec48d;
  --warn-text: #d8b36a;
  --err-text: #e08a8a;

  --eval-white: #e8eaee;
  --eval-black: #3a3f4a;

  --shadow-menu: 0 4px 18px rgba(0, 0, 0, 0.45);
  --shadow-dialog: 0 10px 40px rgba(0, 0, 0, 0.55);

  --scrollbar: #3a4150;

  /* board defaults (overridden by board theme setting) */
  --sq-light: #e3d3b5;
  --sq-dark: #a8845f;
  --sq-lastmove: rgba(205, 165, 60, 0.42);
  --sq-selected: rgba(205, 165, 60, 0.65);
  --sq-target: rgba(20, 24, 30, 0.32);
  --sq-check: rgba(214, 79, 79, 0.85);
  --sq-premove: rgba(91, 130, 216, 0.45);
  --board-border: #14161a;
}

/* ============================================================
   LIGHT THEME
   ============================================================ */
:root[data-theme="light"] {
  color-scheme: light;

  --bg-app: #ececef;
  --bg-panel: #f7f7f8;
  --bg-inset: #ffffff;
  --bg-raised: #ffffff;
  --bg-hover: rgba(20, 30, 50, 0.05);
  --bg-active: rgba(20, 30, 50, 0.09);
  --bg-selected: #dbe5f5;

  --border: #d4d6db;
  --border-strong: #b9bdc6;
  --focus-ring: #3a66c4;

  --text: #24272e;
  --text-secondary: #5a6272;
  --text-faint: #8b93a2;
  --text-inverse: #ffffff;

  --accent: #3a66c4;
  --accent-hover: #2f57ab;
  --accent-text: #2f57ab;

  --ok: #3d8a4e;
  --warn: #a87e2a;
  --err: #b54444;
  --ok-text: #2e7a3f;
  --warn-text: #8a6a20;
  --err-text: #a13a3a;

  --eval-white: #f2f3f5;
  --eval-black: #464c58;

  --shadow-menu: 0 4px 16px rgba(30, 35, 45, 0.18);
  --shadow-dialog: 0 10px 36px rgba(30, 35, 45, 0.25);

  --scrollbar: #c2c6ce;

  --sq-light: #ead9b9;
  --sq-dark: #b08c66;
  --sq-lastmove: rgba(200, 158, 50, 0.45);
  --sq-selected: rgba(200, 158, 50, 0.7);
  --sq-target: rgba(30, 34, 40, 0.3);
  --sq-check: rgba(200, 60, 60, 0.85);
  --sq-premove: rgba(58, 102, 196, 0.4);
  --board-border: #8d8f96;
}