/* ==========================================================================
   x666 game — Design Tokens
   "Emerald & Gold Luxury Gaming" system
   Mobile-first. Breakpoints: 768px (tablet), 1200px (desktop).
   ========================================================================== */

:root {
  /* ---- Color: Emerald base -------------------------------------------- */
  --c-emerald-900: #08190F;
  --c-emerald-850: #0B2419;
  --c-emerald-800: #0F3324;
  --c-emerald-700: #123A28;
  --c-emerald-600: #16492F;
  --c-emerald-glass: rgba(18, 58, 40, 0.62);
  --c-emerald-glass-strong: rgba(15, 51, 36, 0.88);

  /* ---- Color: Gold accents -------------------------------------------- */
  --c-gold: #D4AF37;
  --c-gold-hi: #F5D576;
  --c-gold-shine: #FBE7A8;
  --c-gold-dim: #8A6D1F;
  --c-gold-deep: #5E4A16;

  /* ---- Color: Text ---------------------------------------------------- */
  --c-ink: #F3EEDD;          /* warm off-white — primary text */
  --c-ink-soft: #CFC8B4;     /* secondary text */
  --c-ink-muted: #9AA391;    /* tertiary / captions */
  --c-ink-dark: #0A1A12;     /* text on gold surfaces */

  /* ---- Color: Utility / status --------------------------------------- */
  --c-success: #4FC98A;
  --c-danger: #E0685E;
  --c-info: #5AB0E0;
  --c-line: rgba(212, 175, 55, 0.16);
  --c-line-strong: rgba(212, 175, 55, 0.34);

  /* ---- Gradients ------------------------------------------------------ */
  --grad-gold: linear-gradient(135deg, #F5D576 0%, #D4AF37 42%, #B8912B 100%);
  --grad-gold-soft: linear-gradient(135deg, #FBE7A8 0%, #D4AF37 100%);
  --grad-emerald: linear-gradient(160deg, #0F3324 0%, #0B2419 60%, #08190F 100%);
  --grad-emerald-panel: linear-gradient(155deg, rgba(22,73,47,0.55) 0%, rgba(11,36,25,0.55) 100%);
  --grad-hero: radial-gradient(120% 90% at 50% 0%, #16492F 0%, #0F3324 38%, #0B2419 68%, #08190F 100%);
  --grad-gold-line: linear-gradient(90deg, transparent, var(--c-gold) 20%, var(--c-gold-hi) 50%, var(--c-gold) 80%, transparent);
  --grad-gold-border: linear-gradient(135deg, var(--c-gold-hi), var(--c-gold) 45%, var(--c-gold-deep) 100%);

  /* ---- Typography ----------------------------------------------------- */
  --font-display: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  --fs-300: 0.8125rem;   /* 13px */
  --fs-400: 0.9375rem;   /* 15px — base */
  --fs-500: 1.0625rem;   /* 17px */
  --fs-600: 1.25rem;     /* 20px */
  --fs-700: 1.5rem;      /* 24px */
  --fs-800: 1.9375rem;   /* 31px */
  --fs-900: 2.5rem;      /* 40px */
  --fs-1000: 3.25rem;    /* 52px */
  --fs-1100: 4rem;       /* 64px */

  --lh-tight: 1.12;
  --lh-snug: 1.32;
  --lh-body: 1.72;

  --ls-wide: 0.08em;
  --ls-wider: 0.18em;

  /* ---- Spacing (4px base) -------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.75rem;
  --sp-8: 3.5rem;
  --sp-9: 4.5rem;
  --sp-10: 6rem;
  --sp-11: 8rem;

  /* ---- Layout --------------------------------------------------------- */
  --container-max: 1240px;
  --container-wide: 1440px;
  --gutter: 1.25rem;          /* mobile side blank space */
  --gutter-lg: 3rem;          /* desktop side blank space (extra L/R space) */

  /* ---- Radius --------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Shadows -------------------------------------------------------- */
  --sh-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --sh-md: 0 10px 30px rgba(0, 0, 0, 0.45);
  --sh-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
  --sh-gold-glow: 0 8px 34px rgba(212, 175, 55, 0.28);
  --sh-gold-glow-strong: 0 10px 44px rgba(212, 175, 55, 0.45);
  --sh-emerald-glow: 0 18px 50px rgba(22, 73, 47, 0.55);
  --sh-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* ---- Z-index -------------------------------------------------------- */
  --z-base: 1;
  --z-decor: 2;
  --z-sticky-bar: 40;
  --z-header: 50;
  --z-fab: 60;
  --z-drawer: 70;
  --z-overlay: 80;
  --z-toast: 90;

  /* ---- Motion --------------------------------------------------------- */
  --t-fast: 160ms;
  --t-med: 280ms;
  --t-slow: 520ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Fluid type scaling on wider viewports --------------------------- */
@media (min-width: 768px) {
  :root {
    --fs-900: 3rem;
    --fs-1000: 3.75rem;
    --fs-1100: 4.75rem;
    --gutter: 2rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --fs-1000: 4.25rem;
    --fs-1100: 5.5rem;
    --gutter: var(--gutter-lg);
  }
}