/* tokens.css – Struktur (Schrift, Abstände, Ecken, Glas, Bewegung, Systemfarben). Farben kommen aus genau einer Farbwelt.
   Farbwelt wechseln = die @import-Zeile ändern (Vertrag: ../farbwelten/VERTRAG.md). Hell/Dunkel über light-dark() (ab Safari 17.5).
   Form der App (Ecken, Dichte, Schriftgröße, Kopfzeile, Tab-Leiste, Hintergrund, Glas) steht in design.css – nur dort ändern (oder mit dem AppDesigner). */
@layer reset, tokens, design, basis, module, app;
@import url("../farbwelten/lavendel.css") layer(tokens);
@import url("design.css") layer(design);

@layer tokens {
  :root {
    color-scheme: light dark; /* Automatik: folgt dem System */

    /* Schrift: nur Systemschrift ansprechen, SF Pro nie einbetten (Apple-Lizenz, apple/01) */
    --schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* Schriftgrößen × --schrift-faktor aus design.css; nie unter 11 px */
    --fs-grosstitel: calc(2.125rem * var(--schrift-faktor, 1)); /* 34 pt */
    --fs-titel2: calc(1.375rem * var(--schrift-faktor, 1));     /* 22 pt */
    --fs-titel3: calc(1.25rem * var(--schrift-faktor, 1));      /* 20 pt */
    --fs-text: calc(1.0625rem * var(--schrift-faktor, 1));      /* 17 pt, iOS-Grundgröße */
    --fs-klein: calc(0.9375rem * var(--schrift-faktor, 1));     /* 15 pt */
    --fs-fussnote: max(11px, calc(0.8125rem * var(--schrift-faktor, 1))); /* 13 pt */
    --fs-tab: max(11px, calc(0.6875rem * var(--schrift-faktor, 1)));      /* 11 pt, kleinste erlaubte Größe */
    --zeilenhoehe: 1.35;

    /* Abstände im 4-pt-Raster × --dichte aus design.css (Tippflächen bleiben fest) */
    --a1: calc(4px * var(--dichte, 1)); --a2: calc(8px * var(--dichte, 1)); --a3: calc(12px * var(--dichte, 1)); --a4: calc(16px * var(--dichte, 1));
    --a5: calc(20px * var(--dichte, 1)); --a6: calc(24px * var(--dichte, 1)); --a8: calc(32px * var(--dichte, 1));
    --rand: var(--a4);
    --tipp: 48px;              /* 48 erfüllt Android (48 dp) und Apple (44 pt) zugleich – Entscheidung 30.10.2026 */
    --r-karte: var(--ecken, 28px); /* Kartenecken aus design.css, Standard wie Jubiläum */
    --r-innen: max(0px, calc(var(--r-karte) - var(--a4))); /* konzentrische Ecken: innen = außen − Abstand */
    --r-blatt: calc(var(--r-karte) + 2px);

    /* Seitenhintergrund: design.css wählt über --hg-bild eine dieser Ebenen (oder none = ruhig) */
    --hg-verlaeufe:
      radial-gradient(60vmax 50vmax at 0% 0%, var(--verlauf-1), transparent 70%),
      radial-gradient(50vmax 40vmax at 100% 35%, var(--verlauf-2), transparent 70%),
      radial-gradient(50vmax 40vmax at 25% 100%, var(--verlauf-3), transparent 70%);
    --hg-foto: linear-gradient(color-mix(in srgb, var(--hg) 45%, transparent), color-mix(in srgb, var(--hg) 45%, transparent)), var(--foto-url, none) center / cover no-repeat;
    --leiste-hoehe: 80px;      /* Platz unter dem Inhalt für die Tab-Leiste (iPhone) */

    /* Systemfarben iOS (hell, dunkel) – gehören nicht zur Farbwelt */
    --rot: light-dark(#FF3B30, #FF453A);
    --gruen: light-dark(#34C759, #30D158);
    --schalter-aus: light-dark(#E9E9EA, #39393D); --schalter-knopf: #FFFFFF; /* iOS-Schalter: Spur aus, Knopf */
    --gelb: light-dark(#FFCC00, #FFD60A);
    --orange: light-dark(#FF9500, #FF9F0A);

    /* Glas nur für schwebende Bedienelemente, nie für Inhalt (apple/01) */
    --glas-unschaerfe: blur(22px) saturate(170%);
    --glas-glanz: inset 0 1px 0 light-dark(rgb(255 255 255 / .75), rgb(255 255 255 / .14));
    --schatten: 0 10px 30px light-dark(rgb(0 0 0 / .12), rgb(0 0 0 / .45));
    --aktiv-hg: light-dark(rgb(255 255 255 / .85), rgb(255 255 255 / .12)); /* gewählter Tab/Segment; dunkel .12 statt .16, damit --akzent-text ≥ 4,5:1 bleibt */

    /* Bewegung */
    --dauer: 250ms;
    --kurve: cubic-bezier(.32, .72, 0, 1);
  }

  /* Dreifachschalter (module/erscheinung) setzt data-theme; ohne Attribut = Automatik */
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] { color-scheme: dark; }

  /* Weniger Transparenz: eigener Schalter (Safari kennt prefers-reduced-transparency nicht), Chrome-Einstellung zusätzlich */
  :root[data-transparenz="weniger"] { --glas-hg: var(--hg); --glas-unschaerfe: none; }
  @media (prefers-reduced-transparency: reduce) { :root { --glas-hg: var(--hg); --glas-unschaerfe: none; } }
  @media (prefers-contrast: more) { :root { --glas-hg: var(--hg); --glas-unschaerfe: none; --trenner: var(--text-2); } }
  @media (prefers-reduced-motion: reduce) { :root { --dauer: 0ms; } }

  /* Mac-Dichte (breites Fenster mit Maus/Trackpad): wie Jubiläum abgeschwächt, Lesetext und Tippflächen bleiben groß */
  @media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    :root {
      --fs-grosstitel: calc(2.125rem * var(--schrift-faktor, 1)); --fs-titel2: calc(1.375rem * var(--schrift-faktor, 1)); --fs-titel3: calc(1.125rem * var(--schrift-faktor, 1));
      --fs-text: calc(1rem * var(--schrift-faktor, 1)); --fs-klein: calc(.875rem * var(--schrift-faktor, 1));
      --fs-fussnote: max(11px, calc(.8125rem * var(--schrift-faktor, 1))); --fs-tab: max(11px, calc(.75rem * var(--schrift-faktor, 1)));
      --tipp: 44px; /* Mac mit Maus: 44 px erlaubt, Apple-Mindestmaß; am Touch-Gerät 48 */ --zeilenhoehe: 1.4;
    }
  }
}