/**
 * 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
 * Chrome:   --chrome (Menü-X, Akkordeon-Pfeile, Close, ±) — immer dieselbe Quelle
 * Controls: --control-* (Grössenwahl, Anzahl, Bestellen-Breite) — eine Mass-Familie
 */

: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: #ffffff;

  /* UI-Chrome: Menü-X und alle gleichen Striche/Pfeile */
  --chrome: var(--text);
  --chrome-line: 1.5px;
  --chrome-soft: color-mix(in srgb, var(--text) 8%, var(--bg));

  /* UI-Ecken: eine Mass (Radio nativ rund; Karten-Pills 999px) */
  --radius: 2px;

  /* Formular-Zeilen im Datenblatt (Auswahl = Anzahl = Bestellen-Breite) */
  --control-pad-y: 0.55rem;
  --control-pad-x: 0.7rem;
  --control-radius: var(--radius);
  --control-border: color-mix(in srgb, var(--text) 18%, transparent);
  --control-border-strong: color-mix(in srgb, var(--text) 42%, transparent);
  --control-fill: color-mix(in srgb, var(--text) 6%, transparent);
  --control-min-h: var(--tap);
  --control-fw: 500;
  --control-fs: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem);

  /* Datenblatt / Herkunft-Panel: eine Sans-Skala neben Feijoa-Produkttitel */
  --fs-datenblatt: clamp(0.9375rem, 0.88rem + 0.18vw, 1.0625rem);
  --lh-datenblatt: 1.45;

  --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: 1rem; /* 16 — Fliesstext (−2px von 18) */
  --fs-lead: var(--fs-body); /* Lead = Fliesstext */
  --fs-h3: 1.125rem; /* 18 — kleine Titel (−2px) */
  --fs-title: clamp(2.125rem, 3.4vw + 0.7rem, 3.125rem); /* Feijoa Szene, ≈ −2px */
  --fs-display: clamp(2.375rem, 4.8vw + 0.45rem, 3.625rem); /* Feijoa Ground, ≈ −2px */
  --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 nur nach dem Umschalten. Seite beginnt auf Weiss. */
: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: #0b0b0b;

  --chrome: var(--text);
  --chrome-soft: color-mix(in srgb, var(--text) 8%, var(--bg));
  --control-border: color-mix(in srgb, var(--text) 18%, transparent);
  --control-border-strong: color-mix(in srgb, var(--text) 42%, transparent);
  --control-fill: color-mix(in srgb, var(--text) 6%, transparent);
}

@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)));
  }
}