/* ==========================================================================
   Six Game — sixapk.pk
   tokens.css — "Obsidian Royale" design tokens
   Luxury Black + Royal Gold + Ivory White
   ========================================================================== */

:root {
  /* ---------- Core Obsidian Royale palette ---------- */
  --color-obsidian-950: #05060A;   /* deepest bg */
  --color-obsidian-900: #0A0C12;   /* primary bg */
  --color-obsidian-850: #0E1016;   /* alt section bg */
  --color-obsidian-800: #12141C;   /* surface */
  --color-obsidian-700: #1B1E29;   /* elevated surface / card */
  --color-obsidian-600: #262A38;   /* border / divider */
  --color-obsidian-500: #363B4C;   /* hairline hover */

  --color-gold-100: #FBF3D9;       /* pale gold highlight */
  --color-gold-300: #E9CC7A;       /* soft gold */
  --color-gold-500: #D4AF37;       /* royal gold — primary accent */
  --color-gold-600: #B8912A;       /* deep gold */
  --color-gold-700: #8C6D1F;       /* shadowed gold */

  --color-ivory-100: #FFFDF7;      /* pure ivory white */
  --color-ivory-200: #F5EFDF;      /* body text on dark */
  --color-ivory-400: #C9C2AE;      /* muted text */
  --color-ivory-500: #9A947F;      /* very muted / legal text */

  --color-success: #3FAE6A;
  --color-danger: #C0453B;
  --color-telegram: #29A9EB;

  /* ---------- Gradients ---------- */
  --gradient-gold-foil: linear-gradient(135deg, #B8912A 0%, #E9CC7A 25%, #FBF3D9 50%, #D4AF37 75%, #8C6D1F 100%);
  --gradient-gold-text: linear-gradient(180deg, #FBF3D9 0%, #E9CC7A 38%, #D4AF37 68%, #B8912A 100%);
  --gradient-obsidian-glass: linear-gradient(180deg, rgba(27, 30, 41, 0.85) 0%, rgba(10, 12, 18, 0.95) 100%);
  --gradient-vault: radial-gradient(120% 80% at 50% 0%, rgba(212, 175, 55, 0.16) 0%, rgba(212, 175, 55, 0.04) 38%, rgba(5, 6, 10, 0) 72%);
  --gradient-hairline: linear-gradient(90deg, rgba(212, 175, 55, 0) 0%, rgba(212, 175, 55, 0.55) 50%, rgba(212, 175, 55, 0) 100%);

  /* ---------- Shadows & glows ---------- */
  --shadow-gold-glow: 0 0 24px rgba(212, 175, 55, 0.35);
  --shadow-gold-glow-lg: 0 0 60px rgba(212, 175, 55, 0.28);
  --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.5);
  --shadow-card-lg: 0 24px 60px rgba(0, 0, 0, 0.65);
  --shadow-inset-foil: inset 0 1px 0 rgba(251, 243, 217, 0.14);

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

  --fs-eyebrow: 0.72rem;
  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 2.875rem;
  --fs-5xl: 3.75rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-base: 1.75;
  --lh-loose: 1.9;

  --ls-eyebrow: 0.34em;
  --ls-wide: 0.06em;

  /* ---------- Radii ---------- */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --radius-hex: 0; /* hexagon uses clip-path, not radius */

  /* ---------- Spacing ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- Layout ---------- */
  --container-max: 1180px;
  --container-wide: 1320px;
  --container-narrow: 820px;
  /* Generous blank space on the left and right of every container */
  --gutter: 20px;
  --nav-height: 74px;

  /* ---------- Motion ---------- */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 620ms;

  /* ---------- Layers ---------- */
  --z-base: 1;
  --z-raised: 10;
  --z-nav: 100;
  --z-modal: 200;
  --z-toast: 300;
}

@media (min-width: 768px) {
  :root {
    --gutter: 40px;
    --nav-height: 84px;
    --fs-4xl: 3.25rem;
    --fs-5xl: 4.25rem;
  }
}

@media (min-width: 1200px) {
  :root {
    /* Extra blank space on left and right at desktop widths */
    --gutter: 72px;
    --fs-5xl: 4.75rem;
  }
}

@media (min-width: 1600px) {
  :root {
    --gutter: 104px;
  }
}