/* PlayZapZone — design tokens (assets/tokens.css)
 *
 * THE single source of truth for the site's look. Two systems live
 * here, and they must never be mixed:
 *
 *   1. GAME SHELL (dark) tokens — the first :root block. Owned by
 *      assets/ui.js; the in-game shell and the games' menus read
 *      these. NEVER use a dark token on a light site page (a dark
 *      grey like #93a3c0 on white is 2.55:1 and fails contrast).
 *   2. APP SHELL (light) tokens — the second :root block, all
 *      prefixed --app-. Owned by assets/style.css; site pages only
 *      (index, earn, account, legal). The games never read these.
 *
 * Type: the shell ships ONE real font — Inter (variable, woff2,
 * assets/fonts/Inter.woff2, weight axis 100–900). The stacks below
 * name Inter first and fall back to system fonts only if the file
 * fails to load. Never name a font the site does not ship.
 *
 * Type scale: one ratio, 1.25 (Major Third) — 13 / 16 / 20 / 25 /
 * 31px. Every font-size in style.css comes from these tokens; no
 * hardcoded sizes. --text-xs and --text-sm are the same 13px step
 * (sm is kept only so older rules keep working).
 *
 * Contrast: every text/background pair on light pages is WCAG AA
 * (normal text 4.5:1). --app-faint #5f6b7a passes on white (5.43:1);
 * --app-muted #64748b passes on white (4.76:1) but NOT on tinted
 * surfaces, so text on --app-soft / --app-accent-soft uses the
 * darker --app-muted-soft #475569 (6.92:1 on #f1f5f9, 6.55:1 on
 * #e0f2f1). Filled teal controls use #0f766e (white on it 5.47:1);
 * the brighter #0d9488 (white on it only 3.74:1) is retired for
 * text and fills.
 *
 * Rules: sentence case everywhere (uppercase only for short 11–12px
 * bold tracked eyebrows); one flat teal button recipe; no invented
 * numbers, no emojis. The site is global — never name a country,
 * region, or language in user-facing copy or in shipped comments.
 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter.woff2') format('woff2');
}

:root {
  /* ---- GAME SHELL (dark) tokens — assets/ui.js only ---- */
  --navy: #0a0f1e;
  --navy-2: #121a2e;
  --panel: #141d33;
  --ink: #f2f5fb;
  --white: #ffffff;
  --muted: #93a3c0;
  --muted-2: #6d7ea3;
  --text-soft: #c3cee6;
  --line: rgba(255, 255, 255, .09);
  --bg: #0a0f1e;
  --card: #141d33;
  --yellow: #ffcf3d;
  --yellow-2: #ffb020;
  --accent: #ff7a18;
  --green: #34d399;
  --red: #f87171;
  --footer-bg: #070b16;
  --game-bg: #0b1020;
  --ink-on-amber: #231a00;
  --btn-edge: #c47f0e;

  /* Type scale (px). Display is for game titles only. */
  --text-xs: 13px;
  --text-sm: 13px;
  --text-base: 16px;
  --text-md: 20px;
  --text-lg: 25px;
  --text-display: 31px;
  --text-eyebrow: 12px;
  --font-body: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* 8-point spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s8: 32px; --s10: 40px;

  /* Shape + elevation */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --shadow: 0 8px 28px rgba(0, 0, 0, .35);

  /* One flat amber button recipe (game shell). Flat amber fill, dark
   * text, one hard bottom edge — no gradients on buttons. */
  --btn-bg: var(--yellow);
  --btn-text: var(--ink-on-amber);
  --btn-radius: 13px;
  --btn-padding: 13px 28px;
  --btn-padding-sm: 10px 20px;
  --btn-font-size: 16px;
  --btn-font-size-sm: 14px;
  --btn-shadow: 0 4px 0 var(--btn-edge);
}

/* ---- APP SHELL (light) tokens — SITE pages only ----
 * Light mobile-app palette: very light gray-blue page, white cards,
 * teal accent, near-black navy headings. The dark tokens above stay
 * exactly as they are for the game shell. Nothing below is read by
 * any game file. */
:root {
  --app-bg: #f2f5f7;        /* page backdrop outside the app column */
  --app-surface: #ffffff;   /* the app column itself */
  --app-ink: #0f172a;       /* near-black navy headings / body text */
  --app-muted: #64748b;     /* secondary text — on white only (4.76:1) */
  --app-muted-soft: #475569; /* secondary text on tinted surfaces */
  --app-faint: #5f6b7a;     /* faintest text that still passes on white */
  --app-line: #e2e8f0;
  --app-soft: #f1f5f9;      /* inputs, secondary surfaces */
  --app-accent: #0f766e;    /* teal fill for buttons / active pills (white on it 5.47:1) */
  --app-accent-ink: #ffffff;
  --app-accent-text: #0f766e; /* teal text on white, AA contrast */
  --app-accent-soft: #e0f2f1;
  --app-accent-soft-hover: #cde8e4;
  --app-accent-line: #bfe8e2; /* borders on teal-tinted surfaces */
  --app-green: #15803d;
  --app-red: #d92d20;
  --app-radius: 16px;
  --app-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 20px rgba(15, 23, 42, .06);
}