/* ═══════════════════════════════════════════════════════════════
   KAROL — Design Tokens (shared foundation)
   ───────────────────────────────────────────────────────────────
   Loaded FIRST on every page, before any other stylesheet or inline
   <style>. Variables only: no resets, no selectors besides :root, so
   it can never restyle an element on its own.

   Page systems that still keep their own :root (casino.css, game2.css,
   seka.html, maintenance pages) load after this file and therefore
   still win for any name they redefine — migration onto these tokens
   happens per system, one commit at a time.

   Legacy names (--violet*, --orange*, --bg-card2) live in main.css as
   aliases of the tokens below — do not add them here.

   Breakpoints (media queries can't read custom properties, so they are
   documented here and written literally, mobile-first with min-width):
     tablet  481px   desktop  769px   wide  1200px
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* ── Brand (gold) ─────────────────────────────────────────── */
  --primary:        #eab308;
  --primary-bright: #fcd34d;
  --primary-dark:   #a16207;
  --primary-deep:   #713f12;
  --primary-glow:   rgba(234,179,8,.35);
  --primary-soft:   rgba(234,179,8,.15);
  --on-primary:     #1a1100;           /* text on solid gold surfaces */

  --gold:        var(--primary-bright); /* historical meaning in main.css */
  --gold-bright: var(--primary-bright);
  --gold-dark:   var(--primary-dark);

  /* ── Backgrounds (darkest → lightest) ─────────────────────── */
  --bg-deep:     #080808;
  --bg-surface:  #141414;
  --bg-card-alt: #1a1a1a;
  --bg-card:     #1e1e1e;
  --bg-elevated: #262626;
  --bg-page:     radial-gradient(circle at center, #1a1a1a 0%, #080808 100%);
  --overlay:     rgba(0,0,0,.75);

  /* ── Text ─────────────────────────────────────────────────── */
  --text:           #f3f4f6;
  --text-secondary: #d1d5db;
  --text-muted:     #9ca3af;
  --text-disabled:  #6b7280;

  /* ── Status ───────────────────────────────────────────────── */
  --green:        #22c55e;
  --green-dark:   #16a34a;
  --green-bright: #4ade80;
  --red:          #ef4444;
  --red-dark:     #b91c1c;
  --red-deep:     #7f1d1d;
  --red-bright:   #fca5a5;
  --warning:      #f59e0b;
  --info:         #38bdf8;

  /* ── Card suits (game-specific, shared by lobby + table) ──── */
  --suit-red:   #ef4444;
  --suit-black: #e2e8f0;

  /* ── Borders ──────────────────────────────────────────────── */
  --border-subtle:  rgba(255,255,255,.06);
  --border:         rgba(255,255,255,.1);
  --border-strong:  rgba(255,255,255,.18);
  --border-primary: rgba(234,179,8,.35);

  /* ── Radius ───────────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ── Shadows ──────────────────────────────────────────────── */
  --shadow-sm:   0 2px 8px rgba(0,0,0,.4);
  --shadow:      0 8px 32px rgba(0,0,0,.6);
  --shadow-lg:   0 16px 48px rgba(0,0,0,.7);
  --shadow-glow: 0 4px 18px rgba(234,179,8,.35);

  /* ── Spacing (4px grid) ───────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;

  /* ── Typography ───────────────────────────────────────────── */
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-heading: 'Outfit', 'Inter', system-ui, sans-serif;
  --font-emoji:   "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;

  --fs-2xs:  .625rem;  /* 10px */
  --fs-xs:   .75rem;   /* 12px */
  --fs-sm:   .85rem;   /* ~14px */
  --fs-base: .95rem;   /* ~15px */
  --fs-md:   1.1rem;
  --fs-lg:   1.3rem;
  --fs-xl:   1.6rem;
  --fs-2xl:  2.2rem;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  --lh-tight: 1.2;
  --lh-base:  1.5;

  /* ── Motion ───────────────────────────────────────────────── */
  --ease:        cubic-bezier(.4,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast:    .15s;
  --dur:         .2s;
  --dur-slow:    .3s;

  /* ── Layers (match the values already in use) ─────────────── */
  --z-raised:     10;
  --z-topbar:     100;
  --z-dropdown:   300;
  --z-bottom-nav: 1000;
  --z-modal:      1000;
  --z-toast:      9999;

  /* ── Layout ───────────────────────────────────────────────── */
  --topbar-h:      56px;
  --bottom-nav-h:  68px;
  --container-max: 1200px;
  --safe-bottom:   env(safe-area-inset-bottom, 0px);
}