/* ==========================================================================
   B9 GAME — Design Tokens
   Boutique casino lounge / editorial-luxury. Light mode only.
   ========================================================================== */

:root {
  /* ---------- Core palette -------------------------------------------- */
  --ivory:            #FBF6EE;   /* page base                              */
  --ivory-deep:       #F5EBDB;   /* alternating section band               */
  --ivory-warm:       #F8F1E5;   /* soft tint                              */
  --cream:            #FFFDF9;   /* card surface                           */
  --cream-2:          #FDF9F2;

  --bronze-950:       #2E1B0D;   /* deepest — footer, logo plaque          */
  --bronze-900:       #3E2413;
  --bronze-800:       #5C3A21;   /* headings                               */
  --bronze-700:       #6B4423;
  --bronze-600:       #7A4B26;   /* body emphasis                          */
  --bronze-500:       #8C6142;
  --bronze-400:       #A2825F;   /* muted text (AA on ivory)               */
  --bronze-300:       #C3AB8E;
  --bronze-200:       #E2D3BE;   /* hairlines                              */
  --bronze-100:       #EFE4D2;

  --gold:             #C9972A;   /* primary accent                         */
  --gold-deep:        #A87C1C;   /* AA-safe gold for small text on ivory   */
  --gold-bright:      #D4AF37;
  --gold-pale:        #E8D5A0;
  --gold-wash:        #F6EBCE;

  --emerald:          #3FA34D;   /* brand tie-in, used sparingly           */
  --emerald-deep:     #2C7A38;
  --telegram:         #229ED9;

  --white:            #FFFFFF;
  --ink:              #241408;

  /* ---------- Semantic ------------------------------------------------- */
  --bg:               var(--ivory);
  --bg-alt:           var(--ivory-deep);
  --surface:          var(--cream);
  --text:             #533B26;
  --text-body:        #533B26;
  --text-heading:     var(--bronze-800);
  --text-muted:       #7C6249;
  --border:           var(--bronze-200);
  --border-gold:      rgba(201, 151, 42, 0.38);

  /* ---------- Gradients ------------------------------------------------ */
  --grad-gold:        linear-gradient(135deg, #E4C463 0%, #C9972A 46%, #A87C1C 100%);
  --grad-gold-soft:   linear-gradient(135deg, #F6EBCE 0%, #E8D5A0 100%);
  --grad-bronze:      linear-gradient(150deg, #4A2C16 0%, #2E1B0D 100%);
  --grad-hero:        radial-gradient(1200px 620px at 78% 12%, rgba(201,151,42,0.16) 0%, rgba(201,151,42,0) 62%),
                      radial-gradient(900px 520px at 6% 88%, rgba(122,75,38,0.12) 0%, rgba(122,75,38,0) 60%),
                      linear-gradient(178deg, #FDF8F0 0%, #F7EDDF 58%, #FBF6EE 100%);
  --grad-foil:        linear-gradient(90deg, transparent 0%, rgba(201,151,42,0.55) 18%, rgba(232,213,160,0.95) 50%, rgba(201,151,42,0.55) 82%, transparent 100%);

  /* ---------- Shadows — bronze toned, never harsh black ---------------- */
  --sh-xs:  0 1px 2px rgba(70, 43, 20, 0.06);
  --sh-sm:  0 2px 8px rgba(70, 43, 20, 0.07);
  --sh-md:  0 8px 24px -8px rgba(70, 43, 20, 0.16), 0 2px 6px rgba(70, 43, 20, 0.05);
  --sh-lg:  0 18px 48px -18px rgba(70, 43, 20, 0.24), 0 4px 12px rgba(70, 43, 20, 0.06);
  --sh-xl:  0 34px 80px -30px rgba(58, 35, 16, 0.34), 0 8px 24px rgba(70, 43, 20, 0.08);
  --sh-gold: 0 10px 34px -10px rgba(201, 151, 42, 0.5);
  --sh-gold-strong: 0 16px 46px -12px rgba(201, 151, 42, 0.62);
  --sh-inset-gold: inset 0 0 0 1px rgba(201, 151, 42, 0.3);

  /* ---------- Typography ----------------------------------------------- */
  --font-display: 'Playfair Display', 'Iowan Old Style', 'Palatino Linotype', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --fs-eyebrow:   0.72rem;
  --fs-xs:        0.8125rem;
  --fs-sm:        0.9063rem;
  --fs-base:      1rem;
  --fs-md:        1.0625rem;
  --fs-lg:        1.1875rem;
  --fs-xl:        clamp(1.25rem, 0.9rem + 1.1vw, 1.5rem);
  --fs-h4:        clamp(1.15rem, 0.95rem + 0.8vw, 1.375rem);
  --fs-h3:        clamp(1.35rem, 1.05rem + 1.3vw, 1.75rem);
  --fs-h2:        clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  --fs-h1:        clamp(2.25rem, 1.35rem + 3.9vw, 4rem);
  --fs-display:   clamp(2.75rem, 1.4rem + 5.6vw, 5rem);

  --lh-tight:     1.12;
  --lh-snug:      1.28;
  --lh-normal:    1.6;
  --lh-loose:     1.78;

  --ls-display:   -0.02em;
  --ls-tight:     -0.011em;
  --ls-wide:      0.08em;
  --ls-wider:     0.16em;
  --ls-widest:    0.26em;

  /* ---------- Spacing scale -------------------------------------------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-7:  1.75rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-14: 3.5rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* ---------- Layout — generous side breathing room -------------------- */
  --container:     1200px;
  --container-nar: 940px;
  --container-wide:1360px;
  --gutter:        clamp(1.25rem, 5.2vw, 5rem);

  /* ---------- Radii ---------------------------------------------------- */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  36px;
  --r-pill: 999px;

  /* ---------- Motion --------------------------------------------------- */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  --t-fast:      0.18s;
  --t-base:      0.3s;
  --t-slow:      0.55s;
  --t-slower:    0.9s;

  /* ---------- Elevation layers ----------------------------------------- */
  --z-base:    1;
  --z-decor:   2;
  --z-sticky:  60;
  --z-header:  70;
  --z-drawer:  90;
  --z-fab:     80;
  --z-top:     100;

  --header-h:  74px;
  --strip-h:   40px;
}