/* ==========================================================================
   Church Games — Design Tokens
   Signature direction: "Fellowship Hall at Dusk"
   A warm game-night held in candlelight — deep indigo night sky,
   candle-gold and coral accents, glass "badge" cards with a soft glow.
   ========================================================================== */

:root {
  /* ---- Brand palette (dark / default) ---- */
  --color-bg-deep: #12102A;     /* night sky */
  --color-bg-mid: #1E1B4B;      /* dusk violet */
  --color-bg-glow: #3A2A7A;     /* candle-lit horizon */
  --color-gold: #F2B705;        /* candlelight */
  --color-gold-soft: #F6CB4D;
  --color-coral: #FF6B6B;       /* fellowship warmth / alerts */
  --color-teal: #3DDC97;        /* success / "your turn" */
  --color-text: #F5F3FF;
  --color-text-muted: #C7C2E8;
  --color-border: rgba(255, 255, 255, 0.14);

  /* ---- Glass surfaces ---- */
  --glass-fill: rgba(255, 255, 255, 0.08);
  --glass-fill-strong: rgba(255, 255, 255, 0.14);
  --glass-border: rgba(255, 255, 255, 0.22);
  --glass-blur: 18px;
  --glass-shadow: 0 8px 32px rgba(6, 5, 20, 0.45);

  /* ---- Gradients ---- */
  --gradient-app-bg: radial-gradient(circle at 20% 0%, var(--color-bg-glow) 0%, var(--color-bg-mid) 45%, var(--color-bg-deep) 100%);
  --gradient-gold: linear-gradient(135deg, var(--color-gold) 0%, var(--color-coral) 100%);
  --gradient-card: linear-gradient(160deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 100%);
  /* Layered "mesh" glow — several soft radial pools behind a surface, used
     for hero/featured cards and the particle backdrop rather than a single
     flat gradient. Cheap to paint since it never moves once laid down. */
  --gradient-mesh: radial-gradient(circle at 15% 20%, rgba(242,183,5,0.20) 0%, transparent 45%),
                    radial-gradient(circle at 85% 15%, rgba(255,107,107,0.16) 0%, transparent 50%),
                    radial-gradient(circle at 50% 90%, rgba(61,220,151,0.12) 0%, transparent 55%);
  --gradient-gold-radial: radial-gradient(circle at 30% 20%, var(--color-gold-soft) 0%, var(--color-gold) 55%, var(--color-coral) 100%);
  --gradient-teal: linear-gradient(135deg, var(--color-teal) 0%, #2AAE86 100%);
  --gradient-shimmer: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.16) 50%, transparent 70%);

  /* ---- Elevation (layered shadows read as more "premium" than one blur) ---- */
  --shadow-sm: 0 2px 8px rgba(6, 5, 20, 0.22);
  --shadow-md: 0 10px 28px rgba(6, 5, 20, 0.32), 0 2px 8px rgba(6, 5, 20, 0.24);
  --shadow-lg: 0 24px 56px rgba(6, 5, 20, 0.40), 0 8px 20px rgba(6, 5, 20, 0.28);
  --shadow-glow-gold: 0 8px 28px rgba(242, 183, 5, 0.28);

  /* ---- Z-index scale for the 3 layers this pass adds ----
     Matched against the stack that already existed: bottom-nav 40, topbar 60,
     modal-backdrop 200, toast-stack 300, loading-overlay 500, splash 1000.
     Nothing above is renumbered — these three just slot into the gaps. */
  --z-particles: -1;   /* behind all content, alongside the existing body::after glow */
  --z-fab: 45;         /* above bottom-nav, below the topbar so it never covers it */
  --z-page-transition: 900; /* above everything except the splash screen */

  /* ---- Typography ---- */
  --font-display: 'Baloo 2', 'Segoe UI', sans-serif;   /* rounded, warm, game-night personality */
  --font-body: 'Manrope', 'Segoe UI', sans-serif;       /* clean, mobile-first legibility */
  --font-mono: 'Space Mono', 'Courier New', monospace;  /* room codes — feels like a printed ticket */

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;

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

  /* ---- Radii ---- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-base: 260ms;
  --dur-slow: 420ms;

  /* ---- Layout ---- */
  --app-max-width: 480px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --nav-height: 64px;

  color-scheme: dark;
}

/* ---- Light theme override ---- */
[data-theme="light"] {
  --color-bg-deep: #FBF7EF;
  --color-bg-mid: #F3ECDD;
  --color-bg-glow: #FFE9B8;
  --color-text: #241E3A;
  --color-text-muted: #5B547A;
  --color-border: rgba(36, 30, 58, 0.12);

  --glass-fill: rgba(255, 255, 255, 0.55);
  --glass-fill-strong: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(36, 30, 58, 0.10);
  --glass-shadow: 0 8px 28px rgba(90, 70, 30, 0.14);

  --gradient-app-bg: radial-gradient(circle at 20% 0%, var(--color-bg-glow) 0%, var(--color-bg-mid) 45%, var(--color-bg-deep) 100%);
  --gradient-card: linear-gradient(160deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.45) 100%);

  color-scheme: light;
}