/* Cyber Bust — Typography tokens.
   Display = Clash Grotesk (delivered). Sans = Familjen Grotesk (delivered).
   Mono = JetBrains Mono (SUBSTITUTE for Söhne Mono). */

:root {
  --font-display: "Clash Grotesk", "Familjen Grotesk", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-sans: "Familjen Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Fluid type scale — ratio 1.25 */
  --text-display-1: clamp(3rem, 8vw, 6rem);
  --text-display-2: clamp(2.5rem, 6vw, 4.5rem);
  --text-h1: clamp(2rem, 4.5vw, 3.25rem);
  --text-h2: clamp(1.75rem, 3vw, 2.5rem);
  --text-h3: clamp(1.375rem, 2vw, 1.75rem);
  --text-h4: 1.25rem;
  --text-h5: 1.125rem;
  --text-h6: 1rem;
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-body-sm: 0.875rem;
  --text-caption: 0.8125rem;
  --text-eyebrow: 0.75rem;
  --text-index: 0.75rem;
  --text-code: 0.875rem;

  /* Line height */
  --leading-none: 0.95;
  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-normal: 1.45;
  --leading-relaxed: 1.6;
  --leading-loose: 1.75;

  /* Letter spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.12em;
}

/* Type role utilities */
.type-display-1 { font-family: var(--font-display); font-size: var(--text-display-1); font-weight: 300; line-height: var(--leading-none); letter-spacing: var(--tracking-tighter); text-wrap: balance; }
.type-display-2 { font-family: var(--font-display); font-size: var(--text-display-2); font-weight: 300; line-height: 1; letter-spacing: -0.025em; text-wrap: balance; }
.type-h1 { font-family: var(--font-display); font-size: var(--text-h1); font-weight: 400; line-height: var(--leading-tight); letter-spacing: -0.02em; text-wrap: balance; }
.type-h2 { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 400; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
.type-h3 { font-family: var(--font-sans); font-size: var(--text-h3); font-weight: 500; line-height: var(--leading-snug); letter-spacing: -0.01em; }
.type-h4 { font-family: var(--font-sans); font-size: var(--text-h4); font-weight: 500; line-height: 1.35; letter-spacing: -0.005em; }
.type-h5 { font-family: var(--font-sans); font-size: var(--text-h5); font-weight: 600; line-height: 1.4; }
.type-h6 { font-family: var(--font-sans); font-size: var(--text-h6); font-weight: 600; line-height: 1.45; }
.type-body-lg { font-family: var(--font-sans); font-size: var(--text-body-lg); font-weight: 400; line-height: var(--leading-relaxed); }
.type-body { font-family: var(--font-sans); font-size: var(--text-body); font-weight: 400; line-height: var(--leading-relaxed); }
.type-body-sm { font-family: var(--font-sans); font-size: var(--text-body-sm); font-weight: 400; line-height: 1.55; }
.type-caption { font-family: var(--font-sans); font-size: var(--text-caption); font-weight: 400; line-height: 1.45; letter-spacing: 0.01em; }
.type-eyebrow { font-family: var(--font-mono); font-size: var(--text-eyebrow); font-weight: 500; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-secondary); }
.type-index { font-family: var(--font-mono); font-size: var(--text-index); font-weight: 400; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.type-code { font-family: var(--font-mono); font-size: var(--text-code); font-weight: 400; line-height: 1.5; }