/* TGPlay design tokens — chess edition.
 *
 * Inherited from the TGPlay portal: oklch palette, hue 275 (purple brand),
 * Manrope/Inter typography. Plus chess-specific extensions:
 *   - amber hue 55 — accent for "your move", clocks under time pressure,
 *     tournament wins.
 *   - board palette — cream / espresso wooden squares.
 *
 * This file declares only :root variables. It introduces no selectors and
 * cannot collide with existing styles. Safe to load alongside main.css.
 */

:root {
  /* hues — single knobs to recolour the whole palette */
  --hue-primary: 275;
  --hue-accent-live: 150;
  --hue-accent-hot: 18;
  --hue-chess: 55; /* amber */

  /* ink — cool near-blacks, layered backgrounds */
  --ink-0: oklch(0.11 0.018 265);
  --ink-1: oklch(0.15 0.020 265);
  --ink-2: oklch(0.19 0.022 265);
  --ink-3: oklch(0.24 0.024 265);
  --ink-4: oklch(0.30 0.028 265);
  --ink-5: oklch(0.40 0.030 265);

  /* text */
  --text-1: oklch(0.98 0.005 265);
  --text-2: oklch(0.78 0.015 265);
  --text-3: oklch(0.58 0.020 265);
  --text-4: oklch(0.45 0.020 265);

  /* brand — purple */
  --brand:      oklch(0.68 0.22 var(--hue-primary));
  --brand-hi:   oklch(0.78 0.18 var(--hue-primary));
  --brand-lo:   oklch(0.48 0.22 var(--hue-primary));
  --brand-glow: oklch(0.68 0.22 var(--hue-primary) / 0.35);

  /* amber — chess accent */
  --amber:      oklch(0.78 0.16 var(--hue-chess));
  --amber-lo:   oklch(0.62 0.16 var(--hue-chess));
  --amber-glow: oklch(0.78 0.16 var(--hue-chess) / 0.40);

  /* status accents */
  --live: oklch(0.78 0.18 var(--hue-accent-live));
  --hot:  oklch(0.72 0.20 var(--hue-accent-hot));

  /* board — warm wood */
  --sq-light:     oklch(0.88 0.04 82);
  --sq-dark:      oklch(0.42 0.06 45);
  --sq-light-sel: oklch(0.82 0.12 var(--hue-chess));
  --sq-dark-sel:  oklch(0.55 0.14 var(--hue-chess));
  --sq-hint:      oklch(0.60 0.10 150 / 0.55);
  --sq-check:     oklch(0.65 0.24 25);
  --sq-last:      oklch(0.72 0.12 var(--hue-chess) / 0.55);

  /* radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* typography */
  --font-display: 'Manrope', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-piece:   'Noto Sans Symbols 2', 'Segoe UI Symbol', serif;

  /* shadows */
  --shadow-card: 0 1px 0 oklch(1 0 0 / 0.04) inset, 0 12px 40px -12px oklch(0 0 0 / 0.6);
  --shadow-pop:  0 1px 0 oklch(1 0 0 / 0.06) inset, 0 30px 80px -20px oklch(0 0 0 / 0.8);

  /* easing */
  --tap: cubic-bezier(0.2, 0.9, 0.2, 1);

  /* layout — desktop defaults */
  --sidebar-w: 240px;
  --gap: 16px;
  --page-pad: 28px;

  /* iOS safe areas */
  --sa-top:    env(safe-area-inset-top, 0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px);
}