/* ==========================================================================
   u7777 Game — Design Tokens  ("Royal Midnight" theme)
   Single source of truth for colour, type, space, motion.
   ========================================================================== */

:root {
  /* ---- Base / surfaces ---- */
  --c-bg: #0a0e1a;
  --c-bg-2: #0f1420;
  --c-bg-3: #131a2a;
  --c-surface: #1e293b;
  --c-surface-2: #2a3752;
  --c-surface-glass: rgba(15, 20, 32, 0.72);
  --c-line: rgba(212, 175, 55, 0.22);
  --c-line-strong: rgba(212, 175, 55, 0.45);
  --c-line-cool: rgba(139, 147, 167, 0.16);

  /* ---- Royal gold ---- */
  --c-gold: #d4af37;
  --c-gold-hi: #f4d03f;
  --c-gold-lo: #b8860b;
  --c-gold-soft: rgba(212, 175, 55, 0.12);
  --grad-gold: linear-gradient(135deg, #b8860b 0%, #d4af37 38%, #f4d03f 62%, #d4af37 100%);
  --grad-gold-text: linear-gradient(180deg, #f7dd6b 0%, #d4af37 55%, #b8860b 100%);

  /* ---- Supporting electric blue ---- */
  --c-blue: #3b82f6;
  --c-blue-soft: rgba(59, 130, 246, 0.14);
  --c-tg: #29a2e1;

  /* ---- Status ---- */
  --c-hot: #ef4444;
  --c-new: #22c55e;

  /* ---- Text ---- */
  --c-text: #e8eaf0;
  --c-text-2: #b8bfd0;
  --c-muted: #8b93a7;
  --c-ink: #0a0e1a;

  /* ---- Typography ---- */
  --f-display: "Sora", "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-body: "Inter", "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-num: "Sora", ui-monospace, "SF Mono", "Cascadia Mono", monospace;

  --fs-hero: clamp(2.15rem, 1.35rem + 3.4vw, 4.15rem);
  --fs-h1: clamp(1.95rem, 1.35rem + 2.4vw, 3.35rem);
  --fs-h2: clamp(1.6rem, 1.2rem + 1.7vw, 2.6rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem);
  --fs-h4: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  --fs-lead: clamp(1.02rem, 0.96rem + 0.35vw, 1.18rem);
  --fs-body: 1rem;
  --fs-sm: 0.9rem;
  --fs-xs: 0.79rem;

  --lh-tight: 1.08;
  --lh-snug: 1.28;
  --lh-body: 1.75;

  /* ---- Space scale ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 88px;
  --s-10: 120px;

  --section-y: clamp(56px, 7vw, 104px);

  /* ---- Layout : generous side gutters ---- */
  --container: 1240px;
  --container-narrow: 880px;
  --gutter: clamp(20px, 5.2vw, 72px);

  /* ---- Radii ---- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* ---- Shadows / glows ---- */
  --sh-sm: 0 2px 10px rgba(0, 0, 0, 0.28);
  --sh-md: 0 12px 34px rgba(0, 0, 0, 0.42);
  --sh-lg: 0 28px 70px rgba(0, 0, 0, 0.55);
  --glow-gold: 0 14px 40px rgba(212, 175, 55, 0.26);
  --glow-gold-sm: 0 6px 20px rgba(212, 175, 55, 0.2);
  --glow-blue: 0 16px 46px rgba(59, 130, 246, 0.24);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.68, 0.35, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.18s;
  --t-med: 0.32s;
  --t-slow: 0.6s;

  /* ---- Chrome sizes ---- */
  --header-h: 74px;
  --bottombar-h: 66px;
  --z-drawer: 90;
  --z-header: 80;
  --z-fab: 70;
  --z-bar: 75;
}

@media (max-width: 767px) {
  :root {
    --header-h: 64px;
  }
}