/* ==========================================================================
   PupilPlay — Design Tokens (Elevated Claymorphism)
   Variables ONLY. Loaded by the site pages (home/catalog/detail/…), never by
   the game-runner pages, so there is zero collision with css/style.css.
   Brand tokens are harmonized-by-value with the games' existing :root.
   ========================================================================== */
:root {
  /* --- Ink & status (matches the games' style.css by value) --- */
  --ink:        #20406b;   /* deep navy — primary text */
  --ink-soft:   #43597e;   /* secondary text */
  --ink-mute:   #6f83a1;   /* muted labels (>=4.5:1 on white) */
  --good:       #3ec46d;
  --bad:        #ff7a7a;

  /* --- PupilPlay brand accents --- */
  --primary:    #4f46e5;   /* indigo */
  --primary-600:#4338ca;
  --primary-700:#3730a3;   /* AA text on light */
  --primary-50: #eef2ff;
  --cta:        #f97316;   /* coral / orange */
  --cta-600:    #ea580c;
  --cta-700:    #c2410c;   /* AA text use */

  /* --- World accents (mirror catalog.json) --- */
  --w-numeria:  #4f46e5;
  --w-linguara: #0ea5e9;
  --w-naturea:  #10b981;
  --w-swarada:  #f97316;
  --w-logicara: #a855f7;

  /* --- Surfaces --- */
  --surface:      #ffffff;
  --surface-2:    #f7faff;   /* faint raised */
  --surface-sunk: #e8f0fb;   /* clay inset base */
  --line:         #dbe6f5;   /* hairline borders */

  /* --- Soft-sky page background (extends the launcher gradient) --- */
  --bg-grad:
    radial-gradient(110% 60% at 12% -8%,  rgba(167,211,245,.55), transparent 60%),
    radial-gradient(120% 70% at 100% 0%, rgba(196,232,255,.65), transparent 55%),
    radial-gradient(90% 60% at 50% 120%, rgba(218,205,255,.45), transparent 60%),
    linear-gradient(165deg, #e9f4ff 0%, #d8ebfb 48%, #cfe6fb 100%);

  /* --- Radius scale --- */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 24px;   /* matches the games' card radius */
  --r-xl: 32px;
  --r-pill: 999px;

  /* --- Claymorphism shadow scale (double inner + outer) --- */
  --soft-shadow: 0 8px 22px rgba(28,50,84,.18);
  --clay-1:
    0 6px 16px rgba(28,50,84,.14),
    inset 0 2px 3px rgba(255,255,255,.95),
    inset 0 -7px 13px rgba(28,50,84,.07);
  --clay-2:
    0 16px 34px rgba(28,50,84,.20),
    inset 0 3px 5px rgba(255,255,255,1),
    inset 0 -9px 17px rgba(28,50,84,.09);
  --clay-press:
    inset 0 5px 11px rgba(28,50,84,.18),
    inset 0 -2px 4px rgba(255,255,255,.55);
  --ring: 0 0 0 4px rgba(79,70,229,.28);

  /* --- Spacing (4px base) --- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 40px; --s-8: 56px; --s-9: 80px;

  /* --- Type --- */
  --font-display: 'Fredoka', 'Poppins', system-ui, sans-serif;
  --font-body:    'Poppins', system-ui, 'Segoe UI', sans-serif;

  /* --- Motion (bouncy, matches the games' pop curve) --- */
  --ease-bounce: cubic-bezier(.2, 1.3, .5, 1);
  --ease-out:    cubic-bezier(.22, .61, .36, 1);
  --t-fast: 150ms;
  --t-med:  220ms;
  --t-slow: 300ms;

  /* --- Layout --- */
  --maxw: 1200px;
  --nav-h: 72px;
  --z-nav: 50;
  --z-modal: 80;
}