/* ==========================================================================
   Six Game — six777.pk
   tokens.css — "Obsidian Ivory Luxe" design tokens
   ========================================================================== */

:root {
  /* ---- Core palette ---- */
  --color-bg:              #FBF9F4;
  --color-bg-alt:          #F5F0E6;
  --color-surface:         #FFFFFF;
  --color-obsidian:        #0B0B0D;
  --color-obsidian-soft:   #1A1A1D;
  --color-gold:            #C9A227;
  --color-gold-bright:     #E9C55B;
  --color-gold-deep:       #8A6D1A;
  --color-ivory:           #FFFDF7;
  --color-text-primary:    #17161A;
  --color-text-secondary:  #5B5750;
  --color-text-muted:      #9C978C;
  --color-border:          #E5DEC9;
  --color-border-gold:     rgba(201, 162, 39, 0.35);
  --color-success:         #1E7D4F;
  --color-error:           #A32A2A;

  /* ---- Derived surfaces ---- */
  --color-obsidian-tint:   rgba(11, 11, 13, 0.04);
  --color-gold-tint:       rgba(201, 162, 39, 0.08);
  --color-gold-tint-2:     rgba(201, 162, 39, 0.14);
  --color-ink-70:          rgba(255, 253, 247, 0.72);
  --color-ink-50:          rgba(255, 253, 247, 0.54);
  --color-hairline-dark:   rgba(255, 253, 247, 0.12);

  /* ---- Gradients ---- */
  --grad-gold:        linear-gradient(135deg, #8A6D1A 0%, #C9A227 34%, #E9C55B 58%, #C9A227 82%, #8A6D1A 100%);
  --grad-gold-soft:   linear-gradient(135deg, #C9A227 0%, #E9C55B 50%, #C9A227 100%);
  --grad-obsidian:    linear-gradient(160deg, #15151A 0%, #0B0B0D 55%, #101014 100%);
  --grad-foil-line:   linear-gradient(90deg, transparent 0%, rgba(201,162,39,0) 4%, rgba(201,162,39,.55) 32%, rgba(233,197,91,.9) 50%, rgba(201,162,39,.55) 68%, rgba(201,162,39,0) 96%, transparent 100%);
  --grad-ivory-fade:  linear-gradient(180deg, #FBF9F4 0%, #F5F0E6 100%);

  /* ---- Typography ---- */
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-accent:  'Cinzel', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-display:  clamp(2.75rem, 1.6rem + 4.6vw, 5.25rem);
  --fs-h1:       clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
  --fs-h2:       clamp(1.9rem, 1.25rem + 2.5vw, 3.1rem);
  --fs-h3:       clamp(1.35rem, 1.05rem + 1.15vw, 1.9rem);
  --fs-h4:       clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --fs-lead:     clamp(1.02rem, 0.96rem + 0.4vw, 1.22rem);
  --fs-body:     clamp(0.975rem, 0.94rem + 0.18vw, 1.05rem);
  --fs-sm:       0.9rem;
  --fs-xs:       0.795rem;
  --fs-eyebrow:  0.75rem;

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

  --ls-eyebrow: 0.32em;
  --ls-accent:  0.16em;

  /* ---- Shadows & glow ---- */
  --shadow-card:             0 4px 20px rgba(11, 11, 13, 0.08);
  --shadow-card-hover:       0 12px 32px rgba(11, 11, 13, 0.14);
  --shadow-gold-glow:        0 0 24px rgba(201, 162, 39, 0.25);
  --shadow-gold-glow-strong: 0 0 48px rgba(233, 197, 91, 0.4);
  --shadow-lift:             0 18px 48px -18px rgba(11, 11, 13, 0.32);
  --shadow-inset-hair:       inset 0 0 0 1px rgba(201, 162, 39, 0.22);

  /* ---- Radius ---- */
  --radius-sm:   6px;
  --radius-md:   14px;
  --radius-lg:   24px;
  --radius-xl:   34px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --transition-fast:   180ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 320ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   600ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Layout ---- */
  --shell-max:    1240px;
  --shell-wide:   1440px;
  --shell-narrow: 860px;
  --gutter:       clamp(1.25rem, 1rem + 3.6vw, 5.5rem);
  --section-y:    clamp(4rem, 2.6rem + 5.2vw, 8rem);
  --header-h:     76px;
  --header-h-sm:  66px;
}

@media (max-width: 767px) {
  :root {
    --lh-body: 1.72;
  }
}