/* =========================================================
   INJOY Entertainment — Design Tokens
   Single source of truth for color, type, spacing, motion.
   See docs/04-design-system.md for usage rules.
   ========================================================= */
:root {
  /* ---- Color: surfaces ---- */
  --ink: #0B0C10;
  --ink-2: #14161C;
  --ink-3: #1E2028;
  --bone: #F1F2F3;           /* light section (neutral, not cream) */
  --bone-2: #E6E8EA;

  /* ---- Color: brand + action ---- */
  --crest: #4485C5;          /* sampled from the INJOY crest */
  --crest-hi: #7DB0EA;       /* crest blue for text on ink */
  --crest-deep: #2B5E93;     /* crest blue for text on light */
  --tungsten: #F2B33D;       /* CTAs only */
  --tungsten-hi: #FFC85C;

  /* ---- Color: text ---- */
  --text-on-ink: #F2F2F2;
  --muted-on-ink: #A9AAB2;
  --text-on-bone: #15161A;
  --muted-on-bone: #565961;

  /* ---- Lines ---- */
  --line-ink: rgba(242, 242, 242, 0.12);
  --line-bone: rgba(21, 22, 26, 0.14);

  /* ---- Typography: one family (Archivo), width axis does the work ---- */
  --font-display: "Archivo", "Arial Narrow", sans-serif;   /* used at 62% width, uppercase */
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --display-stretch: 62%;
  --head-stretch: 88%;

  --fs-display: clamp(3.2rem, 1.3rem + 6vw, 7.2rem);
  --fs-h1: clamp(2.8rem, 1.6rem + 5vw, 5.6rem);
  --fs-h2: clamp(2.2rem, 1.4rem + 3.4vw, 4.2rem);
  --fs-h3: clamp(1.35rem, 1.15rem + 0.8vw, 1.85rem);
  --fs-lede: clamp(1.12rem, 1.04rem + 0.35vw, 1.32rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --fs-label: 0.85rem;

  --lh-tight: 0.92;
  --lh-snug: 1.15;
  --lh-body: 1.62;

  /* ---- Spacing (8pt) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section-y: clamp(72px, 9vw, 136px);
  --gutter: clamp(20px, 4vw, 56px);
  --max: 1320px;
  --measure: 64ch;
  --header-h: 76px;

  /* ---- Shape + depth ---- */
  --r-sm: 3px;
  --r-md: 4px;
  --shadow-lift: 0 24px 48px -24px rgba(0, 0, 0, 0.5);
  --shadow-soft: 0 14px 30px -22px rgba(11, 12, 16, 0.45);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-ui: 180ms;
}