/* ==========================================================================
   BITR DESIGN TOKENS
   --------------------------------------------------------------------------
   Shared foundational tokens for active BITR surfaces (index.html, player.html).
   Fluid typography (Utopia/Every Layout), shared palette, and spatial rhythm.
   ========================================================================== */

/* Typography Sources */
@font-face {
  font-family: 'Bricolage';
  src: url('../assets/fonts/bricolage-grotesque-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: 'Fragment';
  src: url('../assets/fonts/fragment-mono-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Font Families & Variables */
  --font-sans: 'Bricolage', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Fragment', monospace;
  --font-opsz: 12;

  /* Fluid Typography Scale (320px -> 1440px viewport) */
  --text-xs: clamp(0.6875rem, 0.65rem + 0.18vw, 0.75rem);       /* 11px - 12px */
  --text-sm: clamp(0.75rem, 0.71rem + 0.22vw, 0.8125rem);      /* 12px - 13px */
  --text-base: clamp(0.8125rem, 0.77rem + 0.27vw, 0.875rem);   /* 13px - 14px */
  --text-md: clamp(0.9375rem, 0.88rem + 0.35vw, 1.0625rem);     /* 15px - 17px */
  --text-lg: clamp(1.1875rem, 1.05rem + 0.65vw, 1.4375rem);     /* 19px - 23px */
  --text-xl: clamp(1.4375rem, 1.2rem + 1.2vw, 2.125rem);       /* 23px - 34px */

  /* Color Palette */
  --color-canvas: #111014;
  --color-canvas-deep: #09080c;
  --color-ink: #e7e9df;
  --color-ink-bright: #ffffff;
  --color-muted: #a6b2ad;
  --color-quiet: #7c8982;
  --color-accent: #dfcedf;
  --color-accent-subtle: #c6dace;
  --color-line: rgba(195, 211, 195, 0.15);
  --color-line-subtle: rgba(195, 211, 195, 0.08);

  /* Legacy variable mappings for seamless transition */
  --muted: var(--color-muted);
  --quiet: var(--color-quiet);
  --line: var(--color-line);
  --accent: var(--color-accent);
  --mono: var(--font-mono);

  /* Fluid Spacing Scale */
  --space-2xs: clamp(4px, 0.3vw, 6px);
  --space-xs: clamp(8px, 0.7vw, 12px);
  --space-sm: clamp(12px, 1.1vw, 16px);
  --space-md: clamp(16px, 1.6vw, 24px);
  --space-lg: clamp(24px, 2.4vw, 36px);
  --space-xl: clamp(36px, 3.5vw, 54px);
  --space-2xl: clamp(48px, 5vw, 72px);

  /* Layout Containers */
  --page-max-width: 1440px;
  --page-gutter: clamp(24px, 4.5vw, 72px);
  --header-height: 96px;

  /* Line Weights & Strokes */
  --stroke-hairline: 0.5px;
  --stroke-thin: 1px;
  --stroke-regular: 1.2px;
  --stroke-thick: 2px;

  /* Focus & Hit Targets */
  --focus-outline: 1px solid var(--color-accent);
  --focus-offset: 5px;
  --hit-target-min: 44px;
}