/* ============================================================
   Social Bingo — Design Tokens
   Single source of truth. See design-system.md §2.
   Never hardcode a hex, radius, or spacing value outside this file.
   ============================================================ */

:root{
  /* ---- Backgrounds ---- */
  --bg-0:#150826;
  --bg-1:#2b0f4f;
  --bg-2:#4a1268;

  /* ---- Brand core ---- */
  --magenta:#ff2f87;
  --magenta-soft:#ff7ab8;
  --gold:#ffcb3d;
  --gold-deep:#d98f00;
  --gold-shadow:#a86e00;
  --cream:#fff3e0;
  --ink:#240a3d;
  --teal:#23e6c5;

  /* ---- Bingo column colors (B-I-N-G-O) ---- */
  --b:#ff4d8d;
  --i:#ffc93c;
  --n:#23e6c5;
  --g:#8b6bff;
  --o:#ff8a3d;

  /* ---- Semantic ---- */
  --success:var(--teal);
  --warning:var(--gold);
  --danger:#ff5c5c;
  --info:var(--g);

  /* ---- Surfaces (dark glass) ---- */
  --surface:rgba(255,255,255,0.05);
  --surface-hover:rgba(255,255,255,0.08);
  --surface-strong:rgba(255,255,255,0.12);

  /* Opaque, for anything that FLOATS over page content — dropdowns, sheets,
     popovers. The --surface tokens above are translucent tints designed to sit
     on the page background; over a bingo card they let the numbers show
     through and the panel becomes unreadable. */
  --surface-float:#2a1050;
  --surface-float-hi:#341563;
  --border:rgba(255,255,255,0.10);
  --border-strong:rgba(255,255,255,0.20);

  /* ---- Light surface (card / ticket stock) ---- */
  --paper:linear-gradient(180deg, var(--cream), #ffe6c2);

  /* ---- Text on dark ---- */
  --text:var(--cream);
  --text-muted:rgba(255,243,224,0.75);   /* body secondary — passes AA */
  --text-dim:rgba(255,243,224,0.60);     /* decorative only, never load-bearing */

  /* ---- Typography ---- */
  --font-display:'Fredoka', system-ui, sans-serif;
  --font-body:'Nunito', system-ui, -apple-system, sans-serif;

  --fs-h1:52px;
  --fs-h2:32px;
  --fs-h3:19px;
  --fs-body:15px;
  --fs-sm:13px;
  --fs-xs:11px;

  /* ---- Spacing (4px base) ---- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;
  --sp-12:48px; --sp-16:64px; --sp-20:80px;

  /* ---- Radius ---- */
  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:9px;
  --radius-pill:999px;

  /* ---- Elevation ---- */
  --shadow-sm:0 4px 12px rgba(0,0,0,0.35);
  --shadow-md:0 14px 34px rgba(0,0,0,0.40);
  --shadow-lg:0 24px 60px rgba(0,0,0,0.50);
  --inset-hilite:inset 0 0 0 2px rgba(255,255,255,0.6);

  /* ---- Motion ---- */
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:0.12s;
  --dur-base:0.2s;
  --dur-slow:0.35s;

  /* ---- Layout ---- */
  --width-marketing:1120px;
  --width-app:460px;

  /* ---- Z-index scale ---- */
  --z-nav:20;
  --z-sheet:40;
  --z-overlay:50;
  --z-confetti:60;
  --z-toast:70;
}

/* Page background — never flat. See design-system.md §2.
   --page-backdrop so a themed room can repaint the room it is in; everything
   else keeps exactly this. */
body{
  background:var(--page-backdrop,
    radial-gradient(circle at 15% 8%, rgba(255,47,135,0.35), transparent 45%)
    , radial-gradient(circle at 85% 92%, rgba(139,107,255,0.30), transparent 50%)
    , linear-gradient(160deg, var(--bg-0) 0%, var(--bg-1) 55%, var(--bg-2) 100%));
  background-attachment:fixed;
}

@media (max-width:900px){
  :root{ --fs-h1:38px; --fs-h2:26px; }
}