/* Purpose: Self-hosted font faces and the single source of truth for all design tokens.
   Every value is lifted verbatim from the approved static HTML build — do not invent new ones. */

/* The weight ranges deliberately mirror the weights the approved build requested from
   Google Fonts (Archivo 500–900, Plex Sans 400–700). Widening them would let lighter
   weights resolve literally and reflow headings that were designed against the clamp. */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-variable.woff2') format('woff2-variations');
  font-weight: 500 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ibm-plex-sans-variable.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* COLORS — semantic */
  --color-primary:      #FFD100;
  --color-primary-dark: #E3B900;
  --color-secondary:    #12161A;
  --color-accent:       #8A7500;
  --color-bg:           #FFFFFF;
  --color-bg-alt:       #F1F1F1;
  --color-surface:      #FFFFFF;
  --color-text:         #12161A;
  --color-text-muted:   #5C6369;
  --color-text-faint:   #9AA1A8;
  --color-border:       #D9D9D2;

  /* COLORS — dark surfaces */
  --color-navy:         #12161A;
  --color-navy-deep:    #0C0F12;
  --color-navy-2:       #1E262E;
  --color-navy-3:       #2A333C;
  --color-border-dark:  #333B44;
  --color-on-dark:      #FFFFFF;
  --color-on-dark-mute: #C4C9CE;
  --color-on-dark-soft: #B9BEC4;
  --color-on-dark-list: #D6D9DC;

  /* COLORS — tints */
  --color-surface-alt:  #E9E9E4;
  --color-notice-bg:    #FDF7DC;
  --color-notice-line:  #EDE2AC;
  --color-star:         #E3B900;
  --color-quote-mark:   #D5D5CE;
  --color-field-text:   #5B6770;
  --color-placeholder:  #98A2AB;

  /* COLORS — alpha */
  --color-glow:         rgba(255, 209, 0, 0.14);
  --color-pulse:        rgba(255, 209, 0, 0.45);
  --color-pulse-out:    rgba(255, 209, 0, 0);
  --color-scrim:        rgba(5, 7, 9, 0.5);
  --color-video-scrim:  rgba(12, 15, 18, 0.28);

  /* TYPOGRAPHY */
  --font-heading: 'Archivo', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --fs-11:    11px;
  --fs-12:    12px;
  --fs-12-5:  12.5px;
  --fs-13-5:  13.5px;
  --fs-14:    14px;
  --fs-14-5:  14.5px;
  --fs-15:    15px;
  --fs-15-5:  15.5px;
  --fs-16:    16px;
  --fs-16-5:  16.5px;
  --fs-17:    17px;
  --fs-18:    18px;
  --fs-19:    19px;
  --fs-21:    21px;
  --fs-26:    26px;
  --fs-72:    72px;
  --fs-130:   130px;

  /* TYPOGRAPHY — fluid */
  --fs-h1:       clamp(38px, 5.6vw, 68px);
  --fs-h1-hero:  clamp(38px, 5vw, 64px);
  --fs-h2:       clamp(30px, 4vw, 50px);
  --fs-h3:       clamp(21px, 2.2vw, 28px);
  --fs-lead:     clamp(17px, 1.5vw, 20px);
  --fs-sub:      clamp(17px, 1.5vw, 19.5px);
  --fs-eyebrow:  clamp(12.5px, 1.2vw, 14.5px);
  --fs-qty:      clamp(44px, 5.4vw, 72px);
  --fs-callout:  clamp(15px, 1.5vw, 18px);
  --fs-chips-t:  clamp(19px, 2vw, 24px);
  --fs-proof-t:  clamp(24px, 2.8vw, 36px);
  --fs-pull:     clamp(26px, 3.4vw, 44px);
  --fs-close-t:  clamp(26px, 3.2vw, 42px);
  --fs-summary:  clamp(16.5px, 1.7vw, 19px);

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;
  --weight-black:    900;

  --leading-none:   1;
  --leading-hero:   1.08;
  --leading-h2:     1.12;
  --leading-h3:     1.2;
  --leading-pull:   1.25;
  --leading-h4:     1.3;
  --leading-snug:   1.4;
  --leading-tight:  1.5;
  --leading-card:   1.55;
  --leading-normal: 1.6;
  --leading-bio:    1.62;
  --leading-body:   1.65;
  --leading-loose:  1.7;

  --tracking-tight:   -0.02em;
  --tracking-heading: -0.015em;
  --tracking-snug:    -0.01em;
  --tracking-normal:  0;
  --tracking-cta:     0.04em;
  --tracking-title:   0.06em;
  --tracking-caps:    0.08em;
  --tracking-topbar:  0.09em;
  --tracking-tag:     0.12em;
  --tracking-mono:    0.16em;

  /* SPACING */
  --space-2:  2px;
  --space-4:  4px;
  --space-6:  6px;
  --space-8:  8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-26: 26px;
  --space-28: 28px;
  --space-30: 30px;
  --space-32: 32px;
  --space-34: 34px;
  --space-36: 36px;
  --space-38: 38px;
  --space-40: 40px;
  --space-42: 42px;
  --space-46: 46px;
  --space-44: 44px;
  --space-48: 48px;
  --space-52: 52px;
  --space-56: 56px;
  --space-60: 60px;
  --space-64: 64px;
  --space-72: 72px;
  --space-80: 80px;

  /* LAYOUT — --band-pad and --gutter are re-declared per breakpoint in layout.css */
  --container-max: 1200px;
  --gutter:        20px;
  --band-pad:      52px;

  /* BORDERS */
  --radius-sm:   3px;
  --radius-md:   7px;
  --radius-lg:   12px;
  --radius-full: 999px;

  /* SHADOWS */
  --shadow-card:    0 8px 22px rgba(10, 12, 14, 0.05);
  --shadow-proof:   0 8px 24px rgba(10, 12, 14, 0.06);
  --shadow-hover:   0 18px 36px rgba(10, 12, 14, 0.10);
  --shadow-hover-2: 0 18px 36px rgba(10, 12, 14, 0.12);
  --shadow-band:    0 18px 44px rgba(10, 12, 14, 0.10);
  --shadow-close:   0 18px 44px rgba(10, 12, 14, 0.12);
  --shadow-book:    0 22px 54px rgba(10, 12, 14, 0.14);
  --shadow-video:   0 24px 56px rgba(10, 12, 14, 0.22);
  --shadow-video-h: 0 34px 70px rgba(10, 12, 14, 0.30);
  --shadow-form:    0 26px 60px rgba(10, 12, 14, 0.45);
  --shadow-reg:     0 30px 70px rgba(0, 0, 0, 0.50);
  --shadow-dock:    0 -8px 24px rgba(10, 12, 14, 0.25);
  --shadow-play:    0 12px 30px rgba(255, 209, 0, 0.35);

  /* MOTION */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 750ms;

  /* Z-INDEX */
  --z-base:    0;
  --z-raised:  1;
  --z-content: 2;
  --z-dock:    60;
}