/* ========================================================================
   typography.css — type system K-Show
   Fonts chargées via <link> dans index.html (preconnect + Google Fonts CSS2)
   ======================================================================== */

@layer base {
  html {
    font-family: var(--font-body);
    font-size: 100%;
    font-feature-settings: "ss01", "cv01";
  }

  body {
    background: var(--bg-page);
    color: var(--text-base);
    font-size: var(--step-0);
    line-height: var(--leading-base);
    letter-spacing: var(--tracking-normal);
  }

  /* --- Headings : Anton, uppercase, condensé -------------------------- */
  .display,
  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 400;                  /* Anton n'a qu'un weight */
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);
    text-transform: uppercase;
    text-wrap: balance;
  }

  h1, .h1 { font-size: var(--step-7); }
  h2, .h2 { font-size: var(--step-5); }
  h3, .h3 { font-size: var(--step-3); }

  /* --- Sub-headings & smaller : Geist, lower-case, normal ------------ */
  h4, .h4 {
    font-family: var(--font-body);
    font-size: var(--step-1);
    font-weight: 600;
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
  }

  h5, .h5 {
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-weight: 600;
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
  }

  h6, .h6 {
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 600;
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  /* --- Body --------------------------------------------------------- */
  p, li, dd, dt {
    text-wrap: pretty;
  }

  p { max-width: 65ch; }

  small, .text-sm { font-size: var(--step--1); }
  .text-xs { font-size: var(--step--2); }
  .text-lg { font-size: var(--step-1); }
  .text-xl { font-size: var(--step-2); }

  /* --- Mono : stats, countdowns, numéros de section ----------------- */
  code, kbd, samp, pre, .mono {
    font-family: var(--font-mono);
    font-feature-settings: "tnum", "ss01";
  }

  .num {
    font-family: var(--font-mono);
    font-feature-settings: "tnum";
    letter-spacing: var(--tracking-tight);
  }

  /* --- Hero scale (override pour display géant) ---------------------- */
  .display-xl { font-size: var(--step-8); }
  .display-2xl { font-size: var(--step-9); }

  /* --- Liens corps de texte ----------------------------------------- */
  .prose a {
    color: var(--text-link);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
    transition: color var(--motion-fast) ease;
  }
  .prose a:hover { color: var(--accent-red); }

  /* --- Eyebrow / kicker ---------------------------------------------- */
  .eyebrow {
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  /* --- Numéros de section (Qfolio style 01 / 02 / 03 ...) ----------- */
  .section-num {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--accent-red);
    letter-spacing: var(--tracking-wide);
  }
}