/**
 * CÍRCULO ORIGEM — Tokens
 *
 * TYP SKALA — hier anpassen (eine Stelle):
 *   --fs-body     Fliesstext     ← oft hier drehen
 *   --fs-nav      Menue
 *   --fs-kicker   Kickers / Meta / Buttons (Versalien)
 *   --fs-title    Feijoa Szenen-Titel (Origem, Edition, …)
 *   --fs-display  Feijoa Ground («Ursprung, Licht…»)
 *   --fs-h3       kleine Feijoa (Seife / Keramik)
 *
 * Familien: Feijoa = Haupttitel | Söhne = Lauftext und «Eine stille Sammlung» | Wortmarke FEST = Beautiful Comethrue, nicht ändern
 * Farben:   --text Dunkel | --text-muted Grau
 */

:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-cream: #f5f5f7;
  --text: #1d1d1f;
  --text-muted: #6e6e73;
  --border: #d2d2d7;
  --header-bg: rgba(255, 255, 255, 0.92);
  --header-border: #d2d2d7;
  --nav: #6e6e73;
  --nav-active: #1d1d1f;
  --footer-bg: #f5f5f7;
  --menu-bg: rgba(255, 255, 255, 0.98);

  --font-serif: "Feijoa", Georgia, serif;
  --font-sans: "Söhne", system-ui, sans-serif;
  --font-mark: "Beautiful Comethrue", Georgia, serif;

  --page-width: 1680px;
  --header-h: 56px;
  --tap: 44px;
  --gutter: 20px;
  --ratio: 1.618;
  --phi: 1.618;

  /* Desktop-Grid — spiegelt design/grid.json (InDesign 1920-Master, eine Szene) */
  --desktop-w: 1920px;
  --desktop-h: 1080px;
  /* Keine Obergrenze: Fotos und Flächen gehen bis an den Bildschirmrand.
     Der Name bleibt, weil das Herkunftsfenster damit rechnet. */
  --screen-max: 100vw;
  /* Sollte doch je ein Rand entstehen, hat er den Grund der Seite. */
  --screen-rim: var(--bg);
  --pad-desktop: 192px;
  --grid-gap-desktop: 43.2px;
  --grid-cols: 12;
  /* Weisser Seitenrahmen (InDesign pad) — Text innen; Bilder/Header/Footer dürfen raus */
  --frame-pad: clamp(var(--gutter), 10vw, var(--pad-desktop));
  /* Foto-Modul = Kante Produktquadrat / Hand; Story-Länge = Modul × φ */
  --mod-square: min(
    22rem,
    calc((min(100vw, var(--desktop-w)) - 2 * var(--frame-pad) - 2 * clamp(16px, 2vw, 28px)) / 3)
  );

  /* ——— Schriftgroessen (Desktop) ——— */
  --fs-xs: 0.6875rem; /* 11 — Kreis, Captions klein */
  --fs-kicker: 0.75rem; /* 12 — Kickers, Meta, Buttons */
  --fs-nav: 0.9375rem; /* 15 — Navigation */
  --fs-body: 1.125rem; /* 18 — Fliesstext  ← hier groesser/kleiner */
  --fs-lead: var(--fs-body); /* Lead = Fliesstext */
  --fs-h3: 1.25rem; /* 20 — kleine Titel */
  --fs-title: clamp(2.25rem, 3.5vw + 0.75rem, 3.25rem); /* Feijoa Szene */
  --fs-display: clamp(2.5rem, 5vw + 0.5rem, 3.75rem); /* Feijoa Ground */
  --fs-sm: var(--fs-kicker);
  --fs-h1: var(--fs-title);
  --fs-h2: var(--fs-title);

  --lh-body: 1.62;
  --lh-lead: 1.62;
  --lh-display: 1.14;
  --lh-tight: 1.25;

  --track-kicker: 0.14em;
  --track-display: 0.04em;
  --track-meta: 0.1em;

  --measure: 36rem;
  --measure-narrow: 22rem;

  --space-2xs: 0.382rem;
  --space-xs: 0.618rem;
  --space-sm: 1rem;
  --space-md: 1.618rem;
  --space-lg: 2.618rem;
  --space-xl: 4.236rem;

  --space-kicker: var(--space-xs);
  --space-after-heading: 1.35rem;
  --space-section: var(--space-lg);
  --space-chapter: var(--space-lg);
  --space-entry: var(--space-section);
  --space-stack: 1.35rem;
  /* Gleichmässiger Weissraum zwischen weissen Szenen (unter dem Header) */
  --scene-pad-y: clamp(2.75rem, 5vh, 3.75rem);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dunkler Grund — Standard. Umschalten über das Zeichen unten rechts. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0b0b;
  --bg-cream: #151515;
  --text: #f2f2f4;
  --text-muted: #9b9b9f;
  --border: rgba(255, 255, 255, 0.16);
  --header-bg: rgba(11, 11, 11, 0.92);
  --header-border: rgba(255, 255, 255, 0.14);
  --nav: #9b9b9f;
  --nav-active: #f2f2f4;
  --footer-bg: #0b0b0b;
  --menu-bg: rgba(11, 11, 11, 0.98);
}

@media (max-width: 768px) {
  :root {
    --fs-body: 1.0625rem; /* 17 */
    --fs-lead: var(--fs-body);
    --fs-display: clamp(2.1rem, 8.5vw, 2.75rem);
    --fs-title: clamp(1.85rem, 7.5vw, 2.4rem);
    --space-md: 1.25rem;
    --space-lg: 1.75rem;
    --space-xl: 2.5rem;
    --space-section: var(--space-md);
    --space-chapter: var(--space-md);
    --space-stack: 0.85rem;
    --space-after-heading: 0.9rem;
    --scene-pad-y: 2.75rem;
    /* Inhaltbreite im Rahmen — nie volle Viewport-Breite (sonst φ × mod > Screen) */
    --frame-pad: clamp(20px, 5.5vw, 28px);
    --mod-square: min(22rem, calc(100vw - 2 * clamp(20px, 5.5vw, 28px)));
  }
}