/* ============================================================
   Huroof design tokens — extracted from the reference board
   (Hexagon Letters Board). Single source of truth: every other
   stylesheet consumes ONLY these custom properties.
   ============================================================ */

:root {
  /* ---- Background & surfaces ---- */
  --bg-page: radial-gradient(1200px 720px at 50% -12%, #17202b 0%, #0b0e13 58%, #070a0e 100%);
  --bg-solid: #0b0e13;
  --panel-bg: rgba(255, 255, 255, 0.04);
  --panel-bg-soft: rgba(255, 255, 255, 0.035);
  --panel-border: rgba(255, 255, 255, 0.08);
  --panel-border-soft: rgba(255, 255, 255, 0.07);
  --plate-bg: radial-gradient(130% 120% at 50% 0%, #151d28 0%, #0a0e13 72%);
  --plate-shadow: inset 0 2px 34px rgba(0, 0, 0, 0.6), 0 26px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);

  /* ---- Text ---- */
  --text: #e8edf2;
  --text-muted: #8f9aa6;
  --text-faint: #5f6a76;
  --text-soft: #c3ccd6;

  /* ---- Links ---- */
  --link: #7CF0A8;
  --link-hover: #b7ffd2;

  /* ---- Tile palette: default (cream/gold) ---- */
  --tile-default-a: #FBF4CE;
  --tile-default-b: #EAD98F;
  --tile-default-fill: linear-gradient(155deg, #FBF4CE, #EAD98F);
  --tile-default-rim: #FFF7D6;
  --tile-default-text: #7A3E22;
  --tile-default-glow: #F7D66E;
  --tile-default-glow-soft: rgba(247, 214, 110, 0.62);

  /* ---- Tile palette: green ---- */
  --tile-green-a: #39D27E;
  --tile-green-b: #159E52;
  --tile-green-fill: linear-gradient(155deg, #39D27E, #159E52);
  --tile-green-rim: #8CF6B0;
  --tile-green-text: #ffffff;
  --tile-green-glow: #28E178;
  --tile-green-glow-soft: rgba(40, 225, 120, 0.82);

  /* ---- Tile palette: red ---- */
  --tile-red-a: #F0524B;
  --tile-red-b: #C11C18;
  --tile-red-fill: linear-gradient(155deg, #F0524B, #C11C18);
  --tile-red-rim: #FF9A93;
  --tile-red-text: #ffffff;
  --tile-red-glow: #FF463A;
  --tile-red-glow-soft: rgba(255, 70, 58, 0.82);

  /* ---- Tile palette: neutral / locked ---- */
  --tile-neutral-a: #CDD2D8;
  --tile-neutral-b: #A6ACB4;
  --tile-neutral-fill: linear-gradient(155deg, #CDD2D8, #A6ACB4);
  --tile-neutral-rim: #E6E9EC;
  --tile-neutral-text: #3C4147;
  --tile-neutral-glow: rgba(180, 190, 200, 0.3);

  /* ---- Team accents (score pills, chips, badges) ---- */
  --team-green-soft: #8cf6b0;
  --team-green-value: #c9ffdd;
  --team-green-rgb: 40, 225, 120;
  --team-green-grad: linear-gradient(155deg, rgba(57, 210, 126, 0.22), rgba(21, 158, 82, 0.10));
  --team-green-border: rgba(140, 246, 176, 0.4);
  --team-red-soft: #ff9a93;
  --team-red-value: #ffd6d2;
  --team-red-rgb: 255, 70, 58;
  --team-red-grad: linear-gradient(155deg, rgba(240, 82, 75, 0.22), rgba(193, 28, 24, 0.10));
  --team-red-border: rgba(255, 154, 147, 0.4);

  /* ---- Gold accent (CTAs, brand) ---- */
  --gold: #FBF4CE;
  --gold-glow: rgba(255, 220, 120, 0.45);
  --gold-ring: rgba(247, 214, 110, 0.55);

  /* ---- Status ---- */
  --danger: #ff6b61;
  --warning: #e6c65a;
  --success: #7CF0A8;
  --info: #8fb8d6;

  /* ---- Radii ---- */
  --radius-pill: 999px;
  --radius-plate: 28px;
  --radius-card: 18px;
  --radius-panel: 14px;
  --radius-input: 12px;

  /* ---- Fonts ---- */
  --font-body: 'Cairo', system-ui, sans-serif;
  --font-display: 'Changa', 'Cairo', sans-serif;

  /* ---- Type scale ---- */
  --fs-display: 42px;   /* glowing page hero title */
  --fs-score: 38px;     /* score pill value */
  --fs-h1: 32px;
  --fs-h2: 24px;
  --fs-h3: 19px;
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-tiny: 12px;

  /* ---- Effects ---- */
  --glow-green: drop-shadow(0 0 8px var(--tile-green-glow-soft)) drop-shadow(0 0 20px var(--tile-green-glow-soft));
  --glow-red: drop-shadow(0 0 8px var(--tile-red-glow-soft)) drop-shadow(0 0 20px var(--tile-red-glow-soft));
  --glow-gold: drop-shadow(0 0 8px var(--tile-default-glow-soft)) drop-shadow(0 0 20px var(--tile-default-glow-soft));
  --transition-fast: all 0.15s ease;
}