/* =================================================================
   UXOVIA · TYPOGRAPHY TOKENS
   One family only: DM Sans (variable, 100–700).
   The "mono" namespace is semantic — it renders DM Sans Medium (500)
   with wide tracking for eyebrows / labels / code-like text.
   (Eyebrows use Medium, not Thin: Thin at small caps sizes reads as
   illegibly light on dark. --w-thin remains for large display use only.)
   ================================================================= */

:root {
  /* ─────────────────── Families ─────────────────── */
  --font-display:    "DM Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-body:       "DM Sans", "Inter", system-ui, -apple-system, sans-serif;
  /* NOT a monospace — same family, distinguished by weight 500 + wide tracking */
  --font-mono:       "DM Sans", "Inter", system-ui, -apple-system, sans-serif;

  /* ─────────────────── Fluid type scale (clamps 320 → 1440) ───────────────────
     Stufen in 4px-Schritten nach oben, 2px im Textbereich. Vorher standen
     dort 17px neben 18px und 15px neben 16px: Unterschiede, die niemand als
     Hierarchie liest, die aber jede Flaeche unruhig machen. Jede Stufe hier
     ist von der naechsten sichtbar verschieden. */
  --t-hero:          clamp(3rem,    7vw,   6rem); /* 48 → 96px  @kind font */
  --t-display:       clamp(2.5rem,  5vw,   4.25rem); /* 40 → 68px  @kind font */
  --t-h1:            clamp(2rem,    3.6vw, 3rem); /* 32 → 48px  @kind font */
  --t-h2:            clamp(1.75rem, 2.8vw, 2.5rem); /* 28 → 40px  @kind font */
  /* H3 auf 18px wie beim Vorbild: dort ist die dritte Ebene bewusst nur
     wenig groesser als der Fliesstext und traegt ihre Rolle ueber das
     Gewicht (600), nicht ueber die Groesse. */
  --t-h3:            clamp(1.0625rem, 1.4vw, 1.125rem); /* 17 → 18px  @kind font */
  --t-h4:            1rem; /* 16px  @kind font */
  --t-body-lg:       1.125rem; /* 18px  @kind font */
  --t-body:          1rem; /* 16px  @kind font */
  --t-small:         0.875rem; /* 14px  @kind font */
  --t-eyebrow:       0.75rem; /* 12px  @kind font */
  --t-mono:          0.875rem; /* 14px  @kind font */

  /* ─────────────────── Leading ───────────────────
     Ueberschriften stehen beim Vorbild praktisch auf Kegelhoehe (1,00 bis
     1,02). Das bindet die Zeilen zu einem Block statt zu einer Liste und ist
     der Grund, warum die Ueberschriften dort kompakt wirken. */
  --lh-hero:         0.92; /* @kind other */
  --lh-display:      1.02; /* @kind other */
  --lh-h:            1.02; /* @kind other */
  --lh-body:         1.55; /* @kind other */
  --lh-tight:        1.25; /* @kind other */

  /* ─────────────────── Tracking ─────────────────── */
  --tr-hero:         -0.045em; /* @kind other */
  --tr-display:      -0.018em; /* @kind other */
  --tr-h:            -0.022em; /* @kind other */
  --tr-body:         -0.01em; /* @kind other */
  --tr-eyebrow:      0.18em; /* @kind other */
  --tr-mono:         0; /* @kind other */

  /* ─────────────────── Weights ─────────────────── */
  --w-thin:          100; /* @kind font */
  --w-regular:       400; /* @kind font */
  --w-medium:        500; /* @kind font */
  --w-semi:          600; /* @kind font */
  --w-bold:          700; /* @kind font */
}