/* ==========================================================================
   IN7 GAME — Design Tokens  ("Golden Access" light theme)
   in7apps.in
   ========================================================================== */

:root {
  /* ---- Base surfaces (light mode) ---- */
  --color-bg:            #FAF7F0;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #F2EBDC;
  --color-surface-sunk:  #F6F1E5;

  /* ---- Brand accents ---- */
  --color-crimson:       #C21C34;
  --color-crimson-deep:  #8E1226;
  --color-crimson-soft:  #FBE9EC;
  --color-gold:          #C9A227;
  --color-gold-deep:     #A8831A;
  --color-gold-light:    #EEDFAE;
  --color-gold-wash:     #FBF4E0;
  --color-black:         #0C0A0B;
  --color-black-soft:    #171315;

  /* ---- Text ---- */
  --color-text-primary:  #1B1712;
  --color-text-body:     #40382D;
  --color-text-muted:    #6E6556;
  --color-text-invert:   #FFFDF7;
  --color-text-invert-muted: #B6AC98;

  /* ---- Utility ---- */
  --color-border:        #E7DCC3;
  --color-border-soft:   #F0E8D6;
  --color-border-dark:   #2A2422;

  /* ---- Gradients ---- */
  --grad-gold:      linear-gradient(135deg, #E7CE72 0%, #C9A227 42%, #F3E3AD 60%, #A8831A 100%);
  --grad-gold-soft: linear-gradient(135deg, #FBF4E0 0%, #EEDFAE 100%);
  --grad-crimson:   linear-gradient(135deg, #D8253F 0%, #C21C34 45%, #8E1226 100%);
  --grad-card-face: linear-gradient(150deg, #221C1E 0%, #0C0A0B 45%, #1C1618 100%);
  --grad-footer:    linear-gradient(180deg, #131011 0%, #0C0A0B 100%);

  /* ---- Shadows ---- */
  --shadow-xs:         0 1px 2px rgba(12, 10, 11, .06);
  --shadow-sm:         0 2px 10px rgba(12, 10, 11, .06);
  --shadow-card:       0 8px 28px rgba(12, 10, 11, .08);
  --shadow-card-hover: 0 18px 44px rgba(12, 10, 11, .14);
  --shadow-lift:       0 26px 60px rgba(12, 10, 11, .18);
  --shadow-gold-glow:  0 0 22px rgba(201, 162, 39, .32);
  --shadow-crimson:    0 10px 26px rgba(194, 28, 52, .28);
  --shadow-inset-top:  inset 0 1px 0 rgba(255, 255, 255, .6);

  /* ---- Typography ---- */
  --font-display: 'Sora', 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Manrope', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --fs-display: clamp(2.25rem, 1.35rem + 3.9vw, 4rem);
  --fs-h1:      clamp(2rem, 1.35rem + 2.7vw, 3.15rem);
  --fs-h2:      clamp(1.6rem, 1.2rem + 1.7vw, 2.45rem);
  --fs-h3:      clamp(1.22rem, 1.05rem + .75vw, 1.6rem);
  --fs-h4:      clamp(1.05rem, .98rem + .35vw, 1.22rem);
  --fs-lead:    clamp(1.02rem, .96rem + .4vw, 1.18rem);
  --fs-body:    1rem;
  --fs-sm:      .9375rem;
  --fs-xs:      .8125rem;
  --fs-tiny:    .75rem;

  --lh-tight:   1.14;
  --lh-snug:    1.32;
  --lh-body:    1.75;
  --lh-loose:   1.85;

  --ls-eyebrow: .18em;
  --ls-tight:   -.02em;

  /* ---- Spacing ---- */
  --sp-1:  .25rem;
  --sp-2:  .5rem;
  --sp-3:  .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;

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

  /* ---- Layout ---- */
  --container:      1180px;
  --container-wide: 1380px;
  --container-text: 760px;
  /* Generous breathing room on the left/right edges of every page */
  --gutter: clamp(1.25rem, 5.5vw, 5.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-out:  cubic-bezier(.22, .8, .3, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --ease-back: cubic-bezier(.34, 1.46, .48, 1);
  --t-fast:    .18s;
  --t-base:    .32s;
  --t-slow:    .6s;

  /* ---- Layering ---- */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-header:  500;
  --z-overlay: 900;
  --z-modal:   1000;
  --z-top:     1200;

  /* ---- Header ---- */
  --header-h:        84px;
  --header-h-mobile: 70px;
}

@media (max-width: 900px) {
  :root {
    --section-y: clamp(3rem, 2rem + 5vw, 4.5rem);
  }
}