/*
 * 806ai.ai — Typography System (Slice 0: Foundation & Baseline)
 * ──────────────────────────────────────────────────────────────
 * Semantic type scale, built on the fonts already loaded in production
 * (Open Sans / Space Grotesk / JetBrains Mono via --sans/--display/--mono,
 * with system-font fallbacks so this still works on a page that hasn't
 * loaded the inline :root block). Fluid sizes use clamp() so nothing
 * needs a breakpoint-by-breakpoint override.
 *
 * Nothing in current production markup uses these classes yet — h1, h2,
 * .prose p etc. keep their existing hand-tuned clamp() values in
 * index.html. This file is the target scale for Slice 1+ so new
 * components stop inventing one-off font sizes.
 *
 * Target ranges (desktop, from the Slice 0 spec):
 *   Hero              64–88px    → --text-display-hero
 *   Major headline     42–56px   → --text-display-large
 *   Section heading    28–36px   → --text-heading-xl
 *   Story title        18–24px   → --text-heading-md / --text-heading-sm
 *   Body               17–19px   → --text-body-base
 *   Metadata           12–14px   → --text-metadata
 */

:root{
  --font-display: var(--display, 'Space Grotesk', 'Open Sans', Arial, sans-serif);
  --font-sans:    var(--sans, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
  --font-mono:    var(--mono, 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace);

  /* size / line-height pairs */
  --text-display-hero:   clamp(2.75rem, 2vw + 2.25rem, 5.5rem);   /* 44px → 88px, prod h1 tops out at 80px */
  --text-display-hero-lh: 1.02;

  --text-display-large:  clamp(2.1rem, 1.6vw + 1.6rem, 3.5rem);   /* 34px → 56px */
  --text-display-large-lh: 1.06;

  --text-display-medium: clamp(1.75rem, 1vw + 1.4rem, 2.5rem);    /* 28px → 40px */
  --text-display-medium-lh: 1.1;

  --text-heading-xl:     clamp(1.75rem, 1vw + 1.4rem, 2.25rem);   /* 28px → 36px */
  --text-heading-xl-lh:  1.15;

  --text-heading-lg:     clamp(1.5rem, .6vw + 1.3rem, 1.75rem);   /* 24px → 28px */
  --text-heading-lg-lh:  1.2;

  --text-heading-md:     clamp(1.25rem, .4vw + 1.1rem, 1.5rem);   /* 20px → 24px */
  --text-heading-md-lh:  1.25;

  --text-heading-sm:     clamp(1.125rem, .2vw + 1.05rem, 1.25rem);/* 18px → 20px */
  --text-heading-sm-lh:  1.3;

  --text-body-large:     clamp(1.0625rem, .2vw + 1rem, 1.1875rem);/* 17px → 19px */
  --text-body-large-lh:  1.6;

  --text-body-base:      1rem;       /* 16px — matches most .item/.cell copy */
  --text-body-base-lh:   1.6;

  --text-body-small:     .875rem;    /* 14px */
  --text-body-small-lh:  1.55;

  --text-label:          .8125rem;   /* 13px — UI labels, eyebrows use mono at 11px separately */
  --text-label-lh:       1.4;

  --text-metadata:       clamp(.75rem, .1vw + .72rem, .875rem);   /* 12px → 14px */
  --text-metadata-lh:    1.4;

  --text-caption:        .75rem;     /* 12px */
  --text-caption-lh:     1.5;
}

.text-display-hero   { font-family: var(--font-display); font-size: var(--text-display-hero); line-height: var(--text-display-hero-lh); font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.text-display-large  { font-family: var(--font-display); font-size: var(--text-display-large); line-height: var(--text-display-large-lh); font-weight: 700; letter-spacing: -.015em; text-wrap: balance; }
.text-display-medium { font-family: var(--font-display); font-size: var(--text-display-medium); line-height: var(--text-display-medium-lh); font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }

.text-heading-xl { font-family: var(--font-sans); font-size: var(--text-heading-xl); line-height: var(--text-heading-xl-lh); font-weight: 700; letter-spacing: -.015em; }
.text-heading-lg { font-family: var(--font-sans); font-size: var(--text-heading-lg); line-height: var(--text-heading-lg-lh); font-weight: 700; letter-spacing: -.01em; }
.text-heading-md { font-family: var(--font-sans); font-size: var(--text-heading-md); line-height: var(--text-heading-md-lh); font-weight: 700; letter-spacing: -.01em; }
.text-heading-sm { font-family: var(--font-sans); font-size: var(--text-heading-sm); line-height: var(--text-heading-sm-lh); font-weight: 700; }

.text-body-large { font-family: var(--font-sans); font-size: var(--text-body-large); line-height: var(--text-body-large-lh); }
.text-body-base  { font-family: var(--font-sans); font-size: var(--text-body-base);  line-height: var(--text-body-base-lh); }
.text-body-small { font-family: var(--font-sans); font-size: var(--text-body-small); line-height: var(--text-body-small-lh); }

.text-label    { font-family: var(--font-mono); font-size: var(--text-label); line-height: var(--text-label-lh); letter-spacing: .08em; text-transform: uppercase; }
.text-metadata { font-family: var(--font-mono); font-size: var(--text-metadata); line-height: var(--text-metadata-lh); letter-spacing: .06em; }
.text-caption  { font-family: var(--font-sans); font-size: var(--text-caption); line-height: var(--text-caption-lh); color: var(--color-faint-foreground, #656565); }