/* =========================================================================
   theme.css  --  Marken-Ebene von Wegweiser Balance: Schrift, Farbe,
   Skala, Rhythmus, Bewegung. NUR Tokens; styles.css liest nur diese.

   Konzept-Satz (Order-Log 2026-09-23, Bewegung neu 2026-09-24): Wegweiser
   Balance ist Orientierung aus eigener Erfahrung, deshalb eine warme, ruhige
   Grotesk mit grossen, leichten Titeln, Dunkeloliv aus dem Flyer als einzige
   Markenfarbe auf warmem Hell, eine dunkeloliv Vollflaeche fuer Melanies
   Geschichte, Melanie selbst als Hero, der Kompass aus dem Logo als Wegweiser
   zu den Selbsttests. Bewegung heisst «einpendeln»: was sich bewegt, schwingt
   wie eine Kompassnadel kurz ueber und kommt zur Ruhe (Feder statt Fade).
   Die Handschrift stammt als Vektor aus Melanies Flyer. Den Pinselstrich des
   Flyers gibt es auf der Site nicht (Rida 2026-09-24: «Jeder KI flyer hat
   dieses muster im moment»).
   ========================================================================= */

/* --- Schrift: eine Familie (agents/DESIGN.md 3) -------------------------
   Hanken Grotesk, variabel (wght 100 bis 900), latin, self-hosted, 35 KB.
   Warm und gut lesbar; Hierarchie ueber Groesse und Gewicht, keine zweite
   Familie. Die Serif und die Script aus dem Flyer bleiben im Logo (SVG). */
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/fonts/hanken-grotesk-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Metrik-Fallback gegen den Sprung beim Swap (Werte an Arial angenaehert). */
@font-face {
  font-family: 'Hanken Fallback';
  src: local('Arial');
  size-adjust: 98%;
  ascent-override: 102%;
  descent-override: 26%;
  line-gap-override: 0%;
}

:root {
  --font: 'Hanken Grotesk', 'Hanken Fallback', Arial, sans-serif;

  /* --- Farbe (OKLCH, Hex-Fallback davor; agents/DESIGN.md 4) -------------
     Marke gemessen im Flyer-PDF: Dunkeloliv #4a5643, Salbei #838f82.
     Neutrale warm (Hue 88), aus dem Raum des Shootings.
     Kontraste (WCAG 2): ink/bg 14.3, ink-2/bg 10.4, muted/bg 6.3,
     muted/surface 5.8, brand/bg 7.1, bg/brand 7.1, field-line/bg 3.9,
     on-dark/brand-deep 12.5, on-dark-2/brand-deep 8.9, accent-dark/brand-deep 8.7.
     Salbei 3.1 auf bg: nur Dekor und grosse Zeichen. -------------------- */
  --bg: #f6f4ef;          --bg: oklch(0.968 0.007 88);
  --surface: #edeae3;     --surface: oklch(0.938 0.010 88);
  --surface-2: #e3dfd7;   --surface-2: oklch(0.905 0.012 88);
  --line: #d2cfc6;        --line: oklch(0.855 0.013 95);
  --field-line: #777c71;  --field-line: oklch(0.58 0.018 128);
  --ink: #20251a;         --ink: oklch(0.255 0.020 128);
  --ink-2: #363c2e;       --ink-2: oklch(0.345 0.024 128);
  --muted: #565c50;       --muted: oklch(0.465 0.020 128);

  --brand: #4a5643;       --brand: oklch(0.437 0.034 134);
  --brand-hover: #394332; --brand-hover: oklch(0.37 0.032 132);
  --on-brand: var(--bg);
  --sage: #838f82;        --sage: oklch(0.636 0.024 143);

  --deep: #262d1f;        --deep: oklch(0.285 0.026 128);   /* dunkle Vollflaechen */
  --deep-2: #303728;      --deep-2: oklch(0.325 0.028 128);
  --on-dark: #f3f0e9;     --on-dark: oklch(0.955 0.010 90);
  --on-dark-2: #cbcebe;   --on-dark-2: oklch(0.845 0.022 115);
  --accent-dark: #c1d0a9; --accent-dark: oklch(0.835 0.055 125);
  --accent-dark-hover: #d6e4c1; --accent-dark-hover: oklch(0.9 0.05 125);
  --line-dark: rgba(243, 240, 233, 0.16);

  --focus: var(--ink);
  --scrim: 246 244 239;   /* bg als RGB fuer den Hero-Verlauf */
  /* Flaeche neben dem Hochformat, in die das Foto breit auslaeuft. Gemessen 2026-09-24 an
     der Wand des Blazer-Fotos. Mit dem Schreibtisch-Foto (Ticket 4, 2026-10-10) bewusst
     behalten: dessen Wand misst #ada49d (Median ruhiger Bloecke um den Kopf), damit fiel
     der Kicker im Hero-Verlauf auf 3.5 bis 4.2:1, mit #d9d1c8 bleibt er bei 4.9 bis 5.3:1.
     Das Foto laeuft so ins Licht des Fensters aus statt ins Grau der Wand. */
  --hero-wall: #d9d1c8;

  /* --- Typo-Skala: genau 7 Groessen (agents/DESIGN.md 3) ----------------
     bei 1440: Hero 91, H1 88, H2 44, H3 24, Text 18, klein 15, Kicker 12 */
  --fs-hero: clamp(2.75rem, 1rem + 5.2vw, 6rem);
  --fs-h1: clamp(2.5rem, 1rem + 5vw, 5.75rem);
  --fs-h2: clamp(1.9rem, 1.15rem + 2vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-body: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  --fs-small: 0.9375rem;
  --fs-kicker: 0.75rem;

  --lh-display: 1.02;
  --lh-title: 1.12;
  --lh-text: 1.55;

  /* --- Raster und Rhythmus (agents/DESIGN.md 5) --------------------------- */
  --gutter: clamp(1rem, 4vw, 3rem);
  --col-gap: clamp(1rem, 2.5vw, 2.5rem);
  --pad-eng: clamp(2rem, 4vw, 3rem);
  --pad-base: clamp(4rem, 8vw, 7.5rem);
  --pad-luft: clamp(6rem, 12vw, 12rem);
  --measure: 65ch;
  --header-h: 4.5rem;

  /* Eine Entscheidung fuer Radius: 6px fuer alles Bedienbare, Bilder fast eckig. */
  --radius: 6px;
  --radius-img: 2px;

  /* --- Bewegung (agents/DESIGN.md 6) ----------------------------------
     Bedienung kurz (100 bis 260 ms), Auftritte einmalig, hoechstens 1,5 s
     (Handschrift und Kompass am laengsten; motion-check warnt darueber).
     Zwei Federn als linear(), gerechnet als gedaempfte Schwingung:
     --ease-settle 8 % Ueberschwingen (Tafeln, Zeilen, Marker),
     --ease-swing 35 % mit Auspendeln (nur Kompass und Nadel).
     Federn nur fuer Lage und Drehung, nie fuer Deckkraft oder Farbe. */
  --dur-instant: 100ms;
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 420ms;
  --dur-hero: 900ms;
  --dur-settle: 1100ms;
  --dur-swing: 1500ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-settle: linear(0, 0.019, 0.071, 0.146, 0.236, 0.334, 0.435, 0.534, 0.628, 0.715, 0.793, 0.861, 0.919, 0.967, 1.005, 1.035, 1.056, 1.071, 1.079, 1.083, 1.083, 1.08, 1.074, 1.067, 1.059, 1.051, 1.042, 1.034, 1.027, 1.02, 1.014, 1.009, 1.004, 1.001, 0.998, 0.996, 1);
  --ease-swing: linear(0, 0.042, 0.154, 0.315, 0.504, 0.699, 0.885, 1.048, 1.179, 1.272, 1.327, 1.346, 1.334, 1.296, 1.241, 1.177, 1.109, 1.044, 0.987, 0.941, 0.908, 0.888, 0.88, 0.884, 0.896, 0.915, 0.937, 0.961, 0.983, 1.003, 1.019, 1.031, 1.039, 1.041, 1.04, 1.036, 1.03, 1.022, 1.014, 1.006, 0.999, 0.994, 0.989, 0.987, 0.986, 0.986, 0.987, 0.989, 1);
  --stagger: 90ms;
  --dist-reveal: 24px;
}

@media (max-width: 47.99rem) {
  :root { --header-h: 3.75rem; }
}