/* =========================================================================
   Lebenshof Oettgen — Design-Tokens
   Einzige Quelle der Wahrheit für Farbe, Schrift, Raum, Bewegung.
   Jede Farbe und jede Schrift im Projekt referenziert einen Token von hier.

   Farbherkunft: die bestehende Farbwelt von fv-lebenshof.de, exakt nach
   OKLCH umgerechnet — Waldgrün #2D5A27, Terrakotta #C8753A,
   Cremeweiß #F5F0E8, Anthrazit #2C2C2A.
   ========================================================================= */

:root {
  /* --- Papier (Flächen) ------------------------------------------------ */
  --color-paper:        oklch(96% 0.012 78);   /* Cremeweiß, die Grundfläche */
  --color-paper-2:      oklch(93% 0.014 76);   /* eine Stufe tiefer          */
  --color-paper-3:      oklch(89% 0.016 74);   /* Bildkasten, Formularfeld   */

  /* --- Tinte (Text) ---------------------------------------------------- */
  --color-ink:          oklch(22% 0.014 112);  /* Fließtext, Überschriften   */
  --color-ink-2:        oklch(38% 0.013 112);  /* Sekundärtext               */
  --color-muted:        oklch(50% 0.011 100);  /* Bildunterschriften, Meta   */
  --color-neutral:      oklch(60% 0.010 95);   /* Platzhalter                */

  /* --- Linien ---------------------------------------------------------- */
  --color-rule:         oklch(85% 0.014 80);
  --color-rule-2:       oklch(90% 0.012 80);

  /* --- Akzent 1: Waldgrün. Trägt jede Handlung. ------------------------ */
  --color-accent:       oklch(42% 0.094 141);
  --color-accent-deep:  oklch(35% 0.082 141);
  --color-accent-soft:  oklch(75% 0.125 133);  /* Hellgrün, nur Flächenhauch */
  --color-accent-ink:   oklch(97% 0.010 78);   /* Text auf Waldgrün          */

  /* --- Akzent 2: Terrakotta. Nur für „jetzt gerade". ------------------- */
  --color-accent-2:     oklch(64% 0.127 54);
  --color-accent-2-ink: oklch(20% 0.018 60);   /* Text auf Terrakotta        */

  /* --- Dunkles Band (Abendstimmung) ------------------------------------ */
  --color-dark:         oklch(24% 0.020 130);
  --color-dark-2:       oklch(29% 0.020 130);
  --color-dark-ink:     oklch(94% 0.010 90);
  --color-dark-muted:   oklch(74% 0.012 95);
  --color-dark-rule:    oklch(37% 0.018 130);

  /* --- Fokus ----------------------------------------------------------- */
  --color-focus:        oklch(48% 0.130 142);
  --color-focus-dark:   oklch(80% 0.120 133);

  /* --- Schrift --------------------------------------------------------- */
  --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --font-body:    "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Skala: große Terz (1.25), Basis 16 px */
  --text-xs:        0.75rem;
  --text-sm:        0.875rem;
  --text-base:      1rem;
  --text-md:        1.125rem;
  --text-lg:        1.375rem;
  --text-xl:        1.75rem;
  --text-2xl:       2.25rem;
  --text-3xl:       2.875rem;
  --text-display-s: clamp(2rem,   3.2vw + 0.9rem, 3.25rem);
  --text-display:   clamp(2.4rem, 4.2vw + 1rem,   4.75rem);

  --leading-display: 1.06;
  --leading-tight:   1.2;
  --leading-body:    1.62;

  --track-display: -0.022em;
  --track-label:    0.12em;

  /* --- Raum: 4-pt-Skala ------------------------------------------------ */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  --measure:      66ch;
  --measure-tight:52ch;
  --page-max:     78rem;
  --gutter:       clamp(1rem, 5vw, 4.5rem);

  /* --- Linienstärke, Radius, Schatten ---------------------------------- */
  --rule-hair:  1px;
  --rule-bold:  2px;
  --radius-0:   0;
  --radius-sm:  4px;
  --radius-md:  10px;
  --radius-lg:  18px;
  --radius-xl:  28px;
  --radius-pill: 999px;
  --shadow-whisper: 0 1px 2px oklch(22% 0.014 112 / 0.06);
  --shadow-soft:  0 2px 8px oklch(22% 0.02 120 / 0.06), 0 1px 2px oklch(22% 0.014 112 / 0.05);
  --shadow-lift:  0 10px 28px oklch(24% 0.03 130 / 0.13), 0 3px 8px oklch(22% 0.02 120 / 0.08);
  --shadow-float: 0 20px 52px oklch(24% 0.04 130 / 0.18), 0 5px 14px oklch(22% 0.02 120 / 0.10);

  /* Sanfte Flächen-Töne für lebendige Bänder */
  --tint-accent: oklch(95% 0.03 141);
  --tint-accent-2: oklch(95% 0.035 60);

  /* --- Bewegung: ruhig. Faktor 1.25 gegenüber dem Standard. ------------ */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 150ms;
  --dur-short: 275ms;
  --dur-long:  520ms;

  /* --- Ebenen ---------------------------------------------------------- */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    400;
  --z-toast:    500;

  /* --- Kopfbereich ----------------------------------------------------- */
  --banner-h: 46px;
  --bar-h:    68px;
}