/* ==========================================================================
   IN7 GAME — Design Tokens  ("Roulette Royale")
   in7play.in.net — Black + Crimson Red + Gold
   ========================================================================== */

:root {
  /* ---------- Base surfaces ---------- */
  --color-bg:               #0B0A0C;
  --color-bg-alt:           #151316;
  --color-bg-deep:          #060507;
  --color-surface:          #1F1B1F;
  --color-surface-2:        #262126;
  --color-surface-glass:    rgba(31, 27, 31, 0.65);
  --color-surface-glass-2:  rgba(11, 10, 12, 0.78);

  /* ---------- Brand accents ---------- */
  --color-crimson:          #C41230;
  --color-crimson-deep:     #8E0D22;
  --color-crimson-soft:     rgba(196, 18, 48, 0.14);
  --color-gold:             #D6A94A;
  --color-gold-bright:      #F3D585;
  --color-gold-deep:        #9A7628;
  --color-gold-soft:        rgba(214, 169, 74, 0.12);

  /* ---------- Text ---------- */
  --color-text-primary:     #F6F1E6;
  --color-text-muted:       #B4ACA0;
  --color-text-dim:         #8A8278;
  --color-text-on-gold:     #14100C;

  /* ---------- Utility ---------- */
  --color-border-gold:      rgba(214, 169, 74, 0.30);
  --color-border-gold-soft: rgba(214, 169, 74, 0.16);
  --color-border-dark:      rgba(246, 241, 230, 0.08);
  --shadow-gold-glow:       0 0 26px rgba(214, 169, 74, 0.35);
  --shadow-crimson-glow:    0 0 22px rgba(196, 18, 48, 0.40);
  --shadow-card:            0 18px 44px rgba(0, 0, 0, 0.55);
  --shadow-card-hover:      0 26px 60px rgba(0, 0, 0, 0.68);
  --shadow-inset-top:       inset 0 1px 0 rgba(246, 241, 230, 0.06);

  /* ---------- Gradients ---------- */
  --grad-gold:      linear-gradient(135deg, #9A7628 0%, #D6A94A 34%, #F3D585 52%, #D6A94A 70%, #9A7628 100%);
  --grad-crimson:   linear-gradient(150deg, #D6153A 0%, #C41230 46%, #8E0D22 100%);
  --grad-surface:   linear-gradient(165deg, rgba(38, 33, 38, 0.92) 0%, rgba(20, 17, 20, 0.96) 100%);
  --grad-felt:      radial-gradient(120% 90% at 50% 0%, rgba(196, 18, 48, 0.13) 0%, rgba(11, 10, 12, 0) 62%);
  --grad-fade-b:    linear-gradient(180deg, rgba(11, 10, 12, 0) 0%, rgba(11, 10, 12, 1) 100%);

  /* ---------- Typography ---------- */
  --font-display: "Marcellus", "Cormorant Garamond", "Playfair Display", "Iowan Old Style",
                  "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-body:    "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", Menlo, monospace;

  --fs-display:  clamp(2.5rem, 1.35rem + 4.6vw, 4.75rem);
  --fs-h1:       clamp(2.1rem, 1.25rem + 3.4vw, 3.6rem);
  --fs-h2:       clamp(1.72rem, 1.18rem + 2.05vw, 2.7rem);
  --fs-h3:       clamp(1.24rem, 1.02rem + 0.86vw, 1.66rem);
  --fs-h4:       clamp(1.06rem, 0.96rem + 0.4vw, 1.24rem);
  --fs-body-lg:  clamp(1.02rem, 0.97rem + 0.24vw, 1.14rem);
  --fs-body:     clamp(0.955rem, 0.93rem + 0.14vw, 1.02rem);
  --fs-sm:       0.895rem;
  --fs-xs:       0.795rem;
  --fs-eyebrow:  0.735rem;

  --lh-tight:    1.1;
  --lh-heading:  1.18;
  --lh-body:     1.78;
  --lh-loose:    1.9;

  --ls-eyebrow:  0.24em;
  --ls-display:  -0.005em;
  --ls-wide:     0.08em;

  /* ---------- Spacing scale ---------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.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;
  --sp-11: 8rem;

  --section-y:      clamp(4rem, 2.4rem + 6.4vw, 7.5rem);
  --section-y-tight: clamp(2.75rem, 1.9rem + 3.4vw, 4.75rem);

  /* ---------- Layout ----------
     --shell    : outer safety gutter (extra blank space on left AND right)
     --container: max content width
  --------------------------------- */
  --shell:          clamp(1.15rem, 4.4vw, 5rem);
  --container:      1200px;
  --container-wide: 1360px;
  --container-text: 74ch;
  --nav-h:          74px;
  --nav-h-sm:       64px;

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

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-settle: cubic-bezier(0.14, 0.9, 0.12, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    0.2s;
  --dur-mid:     0.42s;
  --dur-slow:    0.85s;
  --dur-reveal:  1.05s;

  /* ---------- Logo geometry ----------
     The supplied logo.png (2172x724) carries transparent padding around the mark.
     The mark itself occupies x 40..2131, y 202..500. These ratios let us present
     the artwork at a correct optical size WITHOUT recolouring, cropping the file,
     or adding anything to it — only the empty padding is hidden.
  ------------------------------------- */
  --logo-h:        34px;                        /* visible height of the mark */
  --logo-img-h:    calc(var(--logo-h) * 2.4217);
  --logo-img-w:    calc(var(--logo-h) * 7.2652);
  --logo-off-x:    calc(var(--logo-h) * -0.1338);
  --logo-off-y:    calc(var(--logo-h) * -0.6757);
  --logo-box-w:    calc(var(--logo-h) * 6.9979);

  /* ---------- Z-index ---------- */
  --z-behind:  -1;
  --z-base:    1;
  --z-raise:   5;
  --z-sticky:  60;
  --z-nav:     80;
  --z-drawer:  90;
  --z-modal:   100;
  --z-top:     120;
}

@media (max-width: 767px) {
  :root {
    --logo-h: 28px;
    --nav-h:  var(--nav-h-sm);
  }
}