/* reppo.games shared design tokens (28-jun liquid-glass redesign).
   Colours/wallpaper/shadows are lifted verbatim from the design handoff
   (design_handoff_design_system/tokens.css + tokens.json). Set
   data-theme="light|dark" on the root; light is the default. Never hardcode a
   colour - always reference a token here. */

/* ---- self-hosted fonts (woff2, font-display: swap) -------------------------
   SF Pro is Apple-only; everywhere else the display/body stacks fall back to
   Inter, and the brand mark relies on Fraunces, so both are self-hosted. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  /* latin-ext covers the Latvian diacritics (a/c/e/g/i/k/l/n/s/u/z with marks)
     so LV copy renders in Inter, not a system fallback, on non-Apple devices. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/fraunces-600-italic.woff2') format('woff2');
}

:root {
  --font-display: -apple-system, 'SF Pro Display', 'Helvetica Neue', Inter, system-ui, sans-serif;
  --font-body: -apple-system, 'SF Pro Text', Inter, system-ui, sans-serif;
  --font-mono: 'SF Mono', ui-monospace, monospace;
  --font-logo: 'Fraunces', Georgia, serif;

  --bg: #f4f2ee;
  --ink: #111114;
  --ink-sec: rgba(30, 30, 36, 0.7);
  --ink-faint: rgba(30, 30, 36, 0.42);
  --rule: rgba(0, 0, 0, 0.08);
  --accent: #007aff;
  --accent-soft: rgba(0, 122, 255, 0.14);
  --ok: #2e9e48;
  --warn: #ff9500;
  --red: #e5342b;
  --violet: #8e45c8;
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.74);
  --glass-border: rgba(255, 255, 255, 0.7);
  --bar-bg: rgba(248, 247, 245, 0.62);
  --glass-sh: 0 1px 3px rgba(0, 0, 0, 0.05), 0 8px 30px rgba(0, 0, 0, 0.08);
  --wallpaper: radial-gradient(1200px 600px at 85% -10%, #ffd6a5 0%, transparent 50%),
    radial-gradient(900px 500px at -10% 30%, #a5c8ff 0%, transparent 55%),
    radial-gradient(800px 500px at 50% 110%, #ffb3d4 0%, transparent 55%),
    linear-gradient(180deg, #f9f7f2 0%, #eeedf6 100%);

  /* numerals / category accents (mono number tiles) */
  --n1: #0a66d6;
  --n2: #1e8e3e;
  --n3: #e5342b;
  --n4: #8e3fd0;
  --n5: #c2410c;
  --n6: #0e7c8c;
  --n7: #1a1a22;
  --n8: rgba(30, 30, 40, 0.5);

  /* shape (tokens.json -> radius) */
  --r-frame: 42px;
  --r-card-lg: 24px;
  --r-card: 20px;
  --r-card-sm: 18px;
  --r-tile-lg: 17px;
  --r-tile: 15px;
  --r-tile-sm: 13px;
  --r-pill: 999px;

  /* logo coin (tokens.json -> logo) */
  --logo-grad: linear-gradient(150deg, #5b3fd6 0%, #9333ea 100%);
  --logo-sh: 0 2px 5px rgba(80, 50, 200, 0.42), inset 0 1px 1.5px rgba(255, 255, 255, 0.45),
    inset 0 -2px 3px rgba(40, 20, 130, 0.4);
  --logo-glyph-sh: 0 1px 1.5px rgba(40, 20, 120, 0.4);

  /* artwork (tokens.json -> shadow.tile + frame) */
  --tile-sh: 0 5px 14px rgba(0, 0, 0, 0.16), inset 0 1px 1px rgba(255, 255, 255, 0.45);
  --frame-sh: 0 18px 50px rgba(0, 0, 0, 0.18);

  /* per-game icon-tile gradients (tokens.json -> gameIconGradients; blockfall +
     dig are provisional, pending real artwork) */
  --grad-minesweeper: linear-gradient(150deg, #46577a, #222f4d);
  --grad-blockfall: linear-gradient(150deg, #5fd6e0, #0e9fb0);
  --grad-solitaire: linear-gradient(150deg, #ff7a72, #e5342b);
  --grad-sudoku: linear-gradient(150deg, #6aa0ff, #2f6df0);
  --grad-dig: linear-gradient(150deg, #c98a4b, #7a4a1e);
  --grad-reversi: linear-gradient(150deg, #a274ff, #6c34d4);
  /* Latvian-flag-inspired maroon, distinct from Solitaire's brighter red-orange. */
  --grad-burtulis: linear-gradient(150deg, #b23a52, #6e1f30);
  /* Card-table felt green - distinct from every other tile, and from --ok. */
  --grad-zole: linear-gradient(150deg, #3aa06a, #14512f);
  /* Amber-gold birch-board tone - warm, distinct from Dig's darker brown. */
  --grad-novuss: linear-gradient(150deg, #e0b24e, #a9781f);
  /* Bright emerald - distinct from Zole's darker felt green and Blockfall's cyan-teal.
     Provisional, pending real artwork (see #50). */
  --grad-snake: linear-gradient(150deg, #43d17a, #1a9a4e);
  /* Deep teal (river water at dusk) - blue-green, distinct from Blockfall's lighter
     cyan and from the Zole/Snake greens. Provisional, pending real artwork (see #55). */
  --grad-riverwing: linear-gradient(150deg, #2fb6a4, #0d5c52);
  /* Gunmetal steel - the only grey tile, distinct from Minesweeper's blue navy.
     Provisional, pending real artwork (see #59). */
  --grad-tanku: linear-gradient(150deg, #7e8798, #3a4250);
  /* Rally orange, anchored on the game's own accent (#c8532a). True orange, not
     Solitaire's coral red (which starts pale and stays red) nor Dig's desaturated
     brown, and far warmer than Novuss' yellow-gold. Provisional, pending real
     artwork (see #75). */
  --grad-rallijs: linear-gradient(150deg, #ff9a3c, #c8532a);
}

[data-theme='dark'] {
  --bg: #0a0a10;
  --ink: #ffffff;
  --ink-sec: rgba(255, 255, 255, 0.55);
  --ink-faint: rgba(255, 255, 255, 0.42);
  --rule: rgba(255, 255, 255, 0.1);
  --accent: #0a84ff;
  --accent-soft: rgba(10, 132, 255, 0.22);
  --ok: #30d158;
  --warn: #ff9f0a;
  --red: #ff453a;
  --violet: #bf5af2;
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-bg-strong: rgba(255, 255, 255, 0.18);
  --glass-border: rgba(255, 255, 255, 0.22);
  --bar-bg: rgba(22, 22, 26, 0.6);
  --glass-sh: 0 1px 3px rgba(0, 0, 0, 0.4), 0 12px 36px rgba(0, 0, 0, 0.5);
  --wallpaper: radial-gradient(900px 500px at 100% -10%, #3a1e6b 0%, transparent 55%),
    radial-gradient(900px 500px at -10% 50%, #0f3b6c 0%, transparent 55%),
    radial-gradient(700px 400px at 50% 110%, #6b1e4a 0%, transparent 55%),
    linear-gradient(180deg, #0a0a10 0%, #14121d 100%);

  --n1: #5aa9ff;
  --n2: #36d45f;
  --n3: #ff5247;
  --n4: #c77df0;
  --n5: #ffa826;
  --n6: #3fd0e0;
  --n7: #ffffff;
  --n8: rgba(255, 255, 255, 0.55);
}