/* =============================================================
   X666 GAME — Design Tokens
   "Matte Black & Luxury Gold" design system
   Colors, typography, spacing, radii, shadows, motion
   ============================================================= */

:root {
  /* ---------- Color: Backgrounds ---------- */
  --color-bg-primary: #0A0A0A;      /* matte black base */
  --color-bg-secondary: #0F0F0F;    /* section alt */
  --color-bg-surface: #141414;      /* card/panel */
  --color-bg-surface-2: #1A1A1A;    /* elevated card */
  --color-bg-surface-3: #202020;    /* input / hover panel */

  /* ---------- Color: Gold ---------- */
  --color-gold-primary: #D4AF37;    /* classic luxury gold */
  --color-gold-bright: #F4D06F;     /* hover / highlight */
  --color-gold-deep: #9C7A26;       /* shadow / gradient base */
  --color-gold-soft: rgba(212, 175, 55, 0.08);

  /* ---------- Color: Text ---------- */
  --color-text-primary: #F5F1E8;    /* warm off-white */
  --color-text-secondary: #C9C4B8;  /* body text */
  --color-text-muted: #9A9A9A;      /* captions */
  --color-text-faint: #6A6A6A;

  /* ---------- Color: Borders & lines ---------- */
  --color-border: rgba(212, 175, 55, 0.15);
  --color-border-strong: rgba(212, 175, 55, 0.35);
  --color-border-neutral: rgba(255, 255, 255, 0.06);

  /* ---------- Color: Accents / status ---------- */
  --color-success: #3FBF6A;
  --color-telegram: #229ED9;
  --color-danger: #E5484D;

  /* ---------- Gradients ---------- */
  --grad-gold: linear-gradient(135deg, #F4D06F 0%, #D4AF37 45%, #9C7A26 100%);
  --grad-gold-text: linear-gradient(180deg, #F7DE8B 0%, #D4AF37 55%, #B08D2E 100%);
  --grad-gold-sheen: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  --grad-surface: linear-gradient(180deg, #1A1A1A 0%, #121212 100%);
  --grad-hero-radial: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212,175,55,0.14) 0%, rgba(212,175,55,0) 60%);
  --grad-glow-gold: radial-gradient(circle at 50% 50%, rgba(212,175,55,0.28) 0%, rgba(212,175,55,0) 70%);
  --grad-dark-fade: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.9) 100%);

  /* ---------- Typography ---------- */
  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-sans: "Sora", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-hero: clamp(2.75rem, 6vw, 5rem);
  --fs-h1: clamp(2.2rem, 4.5vw, 3.6rem);
  --fs-h2: clamp(1.75rem, 3.4vw, 2.7rem);
  --fs-h3: clamp(1.3rem, 2.2vw, 1.7rem);
  --fs-h4: clamp(1.1rem, 1.6vw, 1.3rem);
  --fs-body-lg: clamp(1.05rem, 1.4vw, 1.2rem);
  --fs-body: 1rem;
  --fs-sm: 0.9rem;
  --fs-xs: 0.78rem;

  --lh-tight: 1.1;
  --lh-snug: 1.35;
  --lh-normal: 1.65;

  --ls-wide: 0.08em;
  --ls-wider: 0.16em;
  --ls-widest: 0.28em;

  /* ---------- Spacing scale ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --section-pad: clamp(3.5rem, 8vw, 7rem);
  --container-max: 1240px;
  --container-narrow: 820px;

  /* ---------- Radii ---------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
  --shadow-gold: 0 10px 40px rgba(212, 175, 55, 0.22);
  --shadow-gold-strong: 0 14px 50px rgba(212, 175, 55, 0.4);
  --glow-gold: 0 0 0 1px rgba(212,175,55,0.4), 0 0 24px rgba(212,175,55,0.28);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.2s;
  --dur-mid: 0.4s;
  --dur-slow: 0.7s;

  /* ---------- Layout ---------- */
  --header-h: 74px;
  --z-header: 100;
  --z-fab: 90;
  --z-mobilebar: 95;
  --z-modal: 200;
}