/* ============================================================================
   Gessa Arcade — design tokens (the single source of truth for styling).
   Everything else references these vars; change a value here, change it
   everywhere. Light, clean, modern. Brand violet survives only as an accent.
   ========================================================================== */
:root {
  /* ---- surfaces: cool paper, white cards, soft fills ---- */
  --surface-page: #f6f7f9;
  --surface-0: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #f1f2f5;
  --surface-3: #e7e9ee;
  --surface-inset: #eef0f3;

  /* ---- ink ---- */
  --text-primary: #15171c;
  --text-secondary: #51555e;
  --text-tertiary: #868b95;
  --text-on-accent: #ffffff;

  /* ---- borders (ink at low alpha) ---- */
  --border-subtle: rgba(20, 23, 28, 0.07);
  --border-default: rgba(20, 23, 28, 0.11);
  --border-strong: rgba(20, 23, 28, 0.18);

  /* ---- brand (Gessa violet) + a warm play accent ---- */
  --brand: #6450d8;
  --brand-strong: #5340c4;
  --brand-soft: rgba(100, 80, 216, 0.1);
  --brand-ring: rgba(100, 80, 216, 0.35);
  --accent: #ff5a3c; /* "play" ember, used sparingly */

  /* ---- genre hues (drive the crafted thumbnails) ---- */
  --hue-action: #ff5a47;
  --hue-puzzle: #7b61ff;
  --hue-io: #18bd9b;
  --hue-multiplayer: #ff8a3c;
  --hue-classic: #3aa0ff;
  --hue-word: #f0b429;
  --hue-party: #ff4f9a;
  --hue-arcade: #22c1c3;

  /* ---- spacing: 4-base ---- */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;

  /* ---- radii ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 26px;
  --radius-full: 999px;

  /* ---- type ---- */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-xs: 11px;
  --text-sm: 12.5px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 30px;
  --text-3xl: 40px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extra: 800;

  /* ---- icon + control sizing ---- */
  --icon-sm: 16px;
  --icon-md: 18px;
  --icon-lg: 20px;
  --control-height-sm: 32px;
  --control-height-md: 38px;
  --control-height-lg: 44px;

  /* ---- elevation ---- */
  --shadow-1: 0 1px 2px rgba(20, 23, 28, 0.06), 0 0 0 1px var(--border-subtle);
  --shadow-2: 0 8px 24px -12px rgba(20, 23, 28, 0.22);
  --shadow-3: 0 20px 48px -20px rgba(20, 23, 28, 0.3);
  --shadow-pop: 0 14px 34px -14px rgba(20, 23, 28, 0.34);

  /* ---- motion ---- */
  --duration-fast: 130ms;
  --duration-base: 220ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ---- layout ---- */
  --page-max: 1480px;
  --page-pad: clamp(16px, 3.4vw, 40px);
  --topbar-h: 64px;
}