/* ============================================================
   Ferment-Wiki · Design-Tokens
   1:1-Port von app/lib/core/theme/tokens.dart
   (= Ferment Tracker Design Spec §1.1–1.3 / Design System §1, §3, §9).

   Die App-Blöcke (§1.1 Farben, §1.3 Abstände/Radien, Elevation,
   Motion) sind unverändert App-Konstanten. Wird die App geändert,
   zieht dieser File nach. Alles mit „§Web“ im Kopf ist eine bewusste
   Wiki-Ergänzung — seit T-09 auch die Schriften (siehe unten).
   ============================================================ */

/* ---- Schriften (T-09, Redesign „Version 2“) ------------------------
   BEWUSSTE WEB-ABWEICHUNG von der App: Die App setzt Instrument Serif +
   IBM Plex; das Wiki nutzt seit T-09 Bricolage Grotesque (Überschriften),
   Hanken Grotesk (Text) und JetBrains Mono (Mengen, Labels). Farben,
   Abstände, Radien und Elevation bleiben 1:1 die App-Werte.
   Alle drei als variable woff2 (Latin-Subset von Google Fonts, SELBST
   GEHOSTET — kein Aufruf zu Google, DSGVO), Lizenz: SIL OFL 1.1,
   Texte in assets/fonts/OFL-*.txt. Referenz: Designsystem
   „Ferment Wiki“ (claude.ai-Artefakt, siehe README). */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/BricolageGrotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/HankenGrotesk.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- §1.1 Farben (FermentColors) ---- */
  --color-bg: #FAF5EA;             /* App-Hintergrund, Sheets          */
  --color-surface: #FFFDFA;        /* Cards, Modals, Nav               */
  --color-text: #2E2A26;           /* Headings, Werte                  */
  --color-text-muted: #6E675F;     /* Labels, Meta, Hinweise           */
  --color-accent: #9A5B2C;         /* Primär-Aktion, aktiver Tab       */
  --color-accent-pressed: #7C4620; /* Button gedrückt                  */
  --color-accent-tint: #F0E2D2;    /* Chips, Sekundär-Fills, Track     */
  --color-secondary: #7A8467;      /* Begleiter, Datenviz, Tags        */
  --color-success: #4F7A52;        /* Ready to harvest                 */
  --color-success-tint: #E4EADC;
  --color-warning: #C88A2E;        /* Überfällig, "feed me"            */
  --color-warning-tint: #F7E9CF;
  --color-danger: #A6412E;         /* Destruktiv, Schimmel-Alarm       */
  --color-hairline: #E8DECB;       /* 1px-Trenner, Disabled-Fill       */
  --color-disabled-text: #A79E92;  /* nie unter 3:1 Kontrast           */
  --color-disabled-fill: #F3EEE3;

  /* ---- §1.3 Abstände (FermentSpace, 8pt-Skala) ---- */
  --space-xs: 4px;   /* Icon ↔ Label              */
  --space-sm: 8px;   /* innerhalb Chips           */
  --space-md: 16px;  /* Card-Padding, Gutter      */
  --space-lg: 24px;  /* Card ↔ Card, Sektionstop  */
  --space-xl: 32px;  /* Header ↔ Content          */
  --space-xxl: 48px; /* Empty-State-Luft          */

  /* ---- §1.3 Layout ---- */
  --screen-h: 20px;          /* horizontaler Seitenabstand */
  --list-gap: 12px;
  --nav-height: 64px;
  --content-max: 720px;      /* Lesespalte (Web-Anpassung von contentMaxWidth 600) */

  /* ---- §Web Fluide Typo-Skala (Wiki-Erweiterung; App-Konstanten oben bleiben unberührt) ----
     clamp(min, bevorzugt, max): wächst mit dem Viewport, bleibt aber in Grenzen.
     Fallbacks (feste px) stehen jeweils vor der var()-Zeile in base.css. */
  --fs-display: clamp(2.5rem, 3.4vw + 1.2rem, 4.375rem); /* H1 · 40 → 70 px (Handy 46: s. base.css) */
  --fs-h2:      clamp(1.75rem, 1.4vw + 1.2rem, 2.75rem); /* H2 · 28 → 44 px */
  --fs-lede:    clamp(1.0625rem, 0.5vw + 0.95rem, 1.25rem);/* Intro-Absatz · 17 → 20 px */
  --fs-body:    clamp(1rem, 0.2vw + 0.95rem, 1.0625rem);/* Fließtext · 16 → 17 px */
  --section-gap: clamp(3rem, 6vw, 5rem);                /* Sektionsrhythmus · 48 → 80 px */

  /* ---- §Web Typ-Farben je Fermentart (Wiki-Erweiterung) ----
     Quelle: Design-Mock Rezept-Detail.dc.html („types“-Palette).
     Die fünf dort definierten Paare sind 1:1 übernommen; ginger_bug
     und jun fehlen im Mock und sind aus bestehenden Token-Paaren
     gemappt (warning/success), damit nichts Neues erfunden wird.
     Genutzt von den Detailseiten (Pills, Hero-Figur, Rezeptkarten):
     .fw-pill--<typ> / .fw-type-fill--<typ> in components.css. */
  --type-kombucha-fill: #FFF3D6;     --type-kombucha-ink: #9A5B2C;
  --type-water-kefir-fill: #E6EFF0;  --type-water-kefir-ink: #4A6668;
  --type-milk-kefir-fill: #EDEFE8;   --type-milk-kefir-ink: #5D6650;
  --type-vegetable-fill: #FBE3E8;    --type-vegetable-ink: #A6412E;
  --type-sourdough-fill: #F0E2D2;    --type-sourdough-ink: #7C4620; /* T-09: Mock #9A5B2C = 4,2:1 → accent-pressed (6,0:1) */
  --type-ginger-bug-fill: #F7E9CF;   /* = --color-warning-tint */
  --type-ginger-bug-ink: #8A6420;
  --type-jun-fill: #E4EADC;          /* = --color-success-tint */
  --type-jun-ink: #44694A;           /* = --color-success-ink (T-09: success erreicht auf dem Tint nur 4,0:1) */

  /* ---- §Web Hinweis-Karten (Wiki-Erweiterung, Mock „notes“) ---- */
  --notice-bg: #FDF0D8;
  --notice-ink: #8A6420;      /* Eyebrow-Label (4,8:1 auf notice-bg)   */
  --notice-text: #5A4A2E;     /* Fließtext in Hinweis-Karten (7,6:1)   */

  /* ---- §Web Kontrast-Ergänzungen (T-09, Designsystem) ----
     success (#4F7A52) erreicht auf success-tint nur 4,0:1 — für Text
     darauf (Gärdauer-Pill) eine dunklere Stufe. on-accent benennt den
     Text auf Accent-Flächen (= surface, 5,3:1). */
  --color-success-ink: #44694A;
  --color-on-accent: #FFFDFA;

  /* ---- §Web Breites Layout der Rezeptseiten (T-09) ---- */
  --page-wide: 1280px;       /* Rezept-Detailseiten: Hero + Zweispalter    */
  --gutter-wide: clamp(20px, 5vw, 80px); /* Seitenrand 20 (Handy) → 80 px */
  --column-gap: clamp(32px, 5vw, 72px);  /* Spaltenabstand                */
  --sidebar-width: 420px;    /* Zutaten-Karte neben den Schritten          */

  /* ---- §1.3 Radien (FermentRadius) ---- */
  --radius-card: 20px;
  --radius-control: 14px;
  --radius-pill: 999px;
  --radius-tile: 16px;

  /* ---- §1.1 Elevation — genau zwei Stufen, sonst nichts ---- */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, .06);   /* ruhende Cards   */
  --shadow-sheet: 0 8px 24px rgba(0, 0, 0, .10); /* Sheets/Dragged  */

  /* ---- §9 Motion ---- */
  --motion-fast: 200ms;
  --motion-base: 280ms;
  --motion-slow: 600ms;
  --ease-emphasized: cubic-bezier(.2, 0, 0, 1);

  /* ---- Schriftrollen (Web-Abweichung seit T-09, siehe @font-face oben) ----
     display: nur Überschriften, Karten-Titel, Wortmarke — immer 600, eng
     gesetzt, nie kursiv (die Schrift hat keine Kursive). */
  --font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --font-sans: "Hanken Grotesk", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  --display-weight: 600;
  --display-tracking: -0.035em;   /* H1/H2; Karten-Titel -0.03em */
}

/* Reduce motion: Zustandswechsel nur als Cross-Fade, keine Reisen. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }
}