/* ============================================================
   GRAUTON Galerie — typo.css (fine.rayhen.art)
   Eigene Typo-Foundation der Subdomain 'fine'.
   Schriften kommen aus base.css (@font-face, selbst-gehostet,
   kein externer Font-CDN). Diese Datei definiert NUR Typografie:
   Familien, Skala, Tracking + Basis-Elemente und Utility-Klassen.
   Farb-Theming (Raumton karton/galerie) lebt in galerie.css —
   hier wird Farbe geerbt (currentColor), nie hart gesetzt.
   Laden: base.css → typo.css → galerie.css

   ── INHALT ──  per Cmd-F nach „§N" suchen.
   §1  Tokens ............ Familien, Gewichte, Skala, Tracking, Zeilenhöhe
   §2  Basis ............. body-Grundwerte (Lesefluss)
   §3  Headlines ......... h1–h4 (Cormorant, Versal, gesperrt)
   §4  Fließtext ......... p, em/i, strong/b
   §5  Utility-Rollen .... .t-display/.t-title/.t-caption/.t-tag …
   §6  Reduzierte Bewegung
   ============================================================ */

/* ═══ §1 · TOKENS — Familien, Gewichte, Skala, Tracking ══════ */
:root {
  /* ── Familien (Quelle der @font-face: base.css) ── */
  --g-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --g-sans:  'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ── Gewichte (vorhandene woff2: Cormorant 300/400/500, Noto 300/400/500/600) ── */
  --fw-light:    300;   /* Grundgewicht der Galerie — RAYHEN-eigen */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;   /* nur Noto — sparsame Auszeichnung in der UI */

  /* ── Skala (clamp, übernommen aus der bestehenden Hängung) ──
     --display-scale skaliert die großen Serien-/Hero-Titel mit
     (von tweaks.js gesetzt; Fallback 1). */
  --ts-display: calc(clamp(2.4rem, 5.5vw, 4.8rem) * var(--display-scale, 1));
  --ts-h1:      calc(clamp(1.7rem, 3vw, 2.7rem) * var(--display-scale, 1));
  --ts-numeral: clamp(1.8rem, 3.4vw, 2.8rem);
  --ts-h2:      clamp(1.15rem, 1.6vw, 1.45rem);
  --ts-h3:      clamp(1.1rem,  1.4vw, 1.3rem);
  --ts-body-l:  1.05rem;
  --ts-body:    1rem;
  --ts-body-s:  0.9rem;
  --ts-caption: clamp(0.58rem, 0.7vw, 0.68rem);
  --ts-tag:     0.7rem;

  /* ── Tracking ── */
  --tk-display: 0.06em;   /* große Versal-Titel */
  --tk-title:   0.05em;
  --tk-caption: 0.18em;   /* Labels / Captions, Versal */
  --tk-tag:     0.14em;   /* Index / Tags, Versal */
  --tk-body:    0;

  /* ── Zeilenhöhe ── */
  --lh-display: 0.95;
  --lh-title:   1;
  --lh-body:    1.8;      /* großzügiger Lesefluss, RAYHEN-typisch */
  --lh-tight:   1.3;

  /* Akzent (Galerie überschreibt --g-copper; eigenständiger Fallback) */
  --g-copper: #B26D40;
}

/* ------------------------------------------------------------
   §2 · BASIS — Lesefluss (body-Grundwerte)
   ------------------------------------------------------------ */
body {
  font-family: var(--g-sans);
  font-weight: var(--fw-light);
  font-size: var(--ts-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tk-body);
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------
   §3 · HEADLINES — Cormorant, hell, Versal, gesperrt.
   Rohe h1–h3 bekommen die Display-Rollen der Galerie; die
   bestehenden .gx-*-Klassen funktionieren unverändert weiter.
   ------------------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--g-serif);
  font-weight: var(--fw-light);
  color: inherit;
  text-transform: uppercase;
  text-wrap: balance;
}

h1 {
  font-size: var(--ts-display);
  letter-spacing: var(--tk-display);
  line-height: var(--lh-display);
}
h2 {
  font-size: var(--ts-h1);
  letter-spacing: var(--tk-title);
  line-height: var(--lh-title);
}
h3 {
  font-size: var(--ts-h2);
  letter-spacing: var(--tk-title);
  line-height: var(--lh-tight);
}
h4 {
  font-size: var(--ts-h3);
  letter-spacing: var(--tk-title);
  line-height: var(--lh-tight);
}

/* ------------------------------------------------------------
   §4 · FLIESSTEXT (p, em/i, strong/b)
   ------------------------------------------------------------ */
p {
  font-family: var(--g-sans);
  font-weight: var(--fw-light);
  font-size: var(--ts-body);
  line-height: var(--lh-body);
  max-width: 62ch;
  text-wrap: pretty;
}
p + p { margin-top: 0.9rem; }

em, i, .italic {
  font-style: italic;
  font-weight: inherit;
}
strong, b { font-weight: var(--fw-medium); }

/* ------------------------------------------------------------
   §5 · UTILITY-ROLLEN — als Vokabular für neue 'fine'-Seiten.
   Decken dieselben Stile ab wie die .gx-*-Komponenten, ohne an
   das Galerie-Layout gebunden zu sein.
   ------------------------------------------------------------ */
.t-display {
  font-family: var(--g-serif);
  font-weight: var(--fw-light);
  font-size: var(--ts-display);
  letter-spacing: var(--tk-display);
  line-height: var(--lh-display);
  text-transform: uppercase;
}
.t-title {
  font-family: var(--g-serif);
  font-weight: var(--fw-light);
  font-size: var(--ts-h1);
  letter-spacing: var(--tk-title);
  line-height: var(--lh-title);
  text-transform: uppercase;
}
.t-numeral {
  font-family: var(--g-serif);
  font-weight: var(--fw-light);
  font-size: var(--ts-numeral);
  letter-spacing: var(--tk-title);
  color: var(--g-copper);
}
.t-lead {
  font-family: var(--g-sans);
  font-weight: var(--fw-light);
  font-size: var(--ts-body-l);
  line-height: var(--lh-body);
  max-width: 56ch;
}
.t-body  { font-size: var(--ts-body);   line-height: var(--lh-body); max-width: 62ch; }
.t-body-s{ font-size: var(--ts-body-s); line-height: 1.7; }

/* Caption / Label — Versal, weit gesperrt, gedämpft */
.t-caption {
  font-family: var(--g-sans);
  font-weight: var(--fw-light);
  font-size: var(--ts-caption);
  letter-spacing: var(--tk-caption);
  line-height: 1.4;
  text-transform: uppercase;
}

/* Tag / Index-Eintrag — Versal, mittleres Tracking */
.t-tag {
  font-family: var(--g-sans);
  font-weight: var(--fw-light);
  font-size: var(--ts-tag);
  letter-spacing: var(--tk-tag);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}

/* Akzent-Hilfen */
.t-copper { color: var(--g-copper); }
.t-soft   { color: var(--g-fg-soft, inherit); }
.t-faint  { color: var(--g-fg-faint, inherit); }

/* ------------------------------------------------------------
   §6 · REDUZIERTE BEWEGUNG
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}