/* ==========================================================================
   IN7 GAME — tokens.css
   Champion's Arena design system: fonts, color, type scale, spacing, motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Self-hosted fonts (WOFF2, variable, latin subset)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("../fonts/oswald-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Base surfaces */
  --color-bg: #0a0a0c;
  --color-bg-alt: #131315;
  --color-surface: #1d1d20;
  --color-surface-2: #24242a;
  --color-surface-glass: rgba(29, 29, 32, 0.65);

  /* Brand accents */
  --color-crimson: #c8102e;
  --color-crimson-deep: #920c22;
  --color-crimson-soft: rgba(200, 16, 46, 0.14);
  --color-gold: #d7a93f;
  --color-gold-bright: #f2ce7a;
  --color-gold-soft: rgba(215, 169, 63, 0.12);

  /* Text */
  --color-text-primary: #f5f1e8;
  --color-text-muted: #b3ada2;
  --color-text-dim: #8a857c;

  /* Utility */
  --color-border: rgba(245, 241, 232, 0.08);
  --color-border-gold: rgba(215, 169, 63, 0.3);
  --color-border-crimson: rgba(200, 16, 46, 0.35);
  --shadow-spotlight: 0 0 40px rgba(215, 169, 63, 0.3);
  --shadow-crimson-glow: 0 0 24px rgba(200, 16, 46, 0.4);
  --shadow-card: 0 18px 44px rgba(0, 0, 0, 0.55);
  --shadow-lift: 0 28px 70px rgba(0, 0, 0, 0.7);

  /* Gradients */
  --grad-gold: linear-gradient(135deg, #f2ce7a 0%, #d7a93f 45%, #a67c1e 100%);
  --grad-crimson: linear-gradient(135deg, #e01a3a 0%, #c8102e 50%, #920c22 100%);
  --grad-ribbon: linear-gradient(90deg, transparent, var(--color-gold) 25%, var(--color-crimson) 55%, var(--color-gold-bright) 75%, transparent);
  --grad-surface: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 60%);

  /* Typography */
  --font-display: "Oswald", "Barlow Condensed", "Arial Narrow", "Haettenschweiler", sans-serif;
  --font-body: "Inter", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-hero: clamp(2.5rem, 6.4vw, 5.25rem);
  --fs-h1: clamp(2.1rem, 4.6vw, 3.5rem);
  --fs-h2: clamp(1.7rem, 3.4vw, 2.6rem);
  --fs-h3: clamp(1.25rem, 2.1vw, 1.6rem);
  --fs-h4: clamp(1.05rem, 1.5vw, 1.2rem);
  --fs-body: clamp(0.97rem, 1.05vw, 1.06rem);
  --fs-sm: 0.9rem;
  --fs-xs: 0.78rem;

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

  --ls-display: 0.01em;
  --ls-eyebrow: 0.22em;

  /* Spacing / layout */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --container-max: 1240px;
  --container-wide: 1420px;
  /* Generous breathing room on the left and right of every page */
  --gutter: clamp(1.25rem, 5.5vw, 5rem);
  --section-pad: clamp(3.5rem, 8vw, 7rem);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-punch: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 180ms;
  --dur-mid: 340ms;
  --dur-slow: 700ms;

  --header-h: 78px;
}

@media (max-width: 768px) {
  :root {
    --header-h: 66px;
  }
}