/* Design-Tokens mamaflow — Creme · Sand · Apricot · Terrakotta · Braun · Salbei.
   Quelle: Claude-Design-Projekt „mamaflow" (projectId
   99bdab8c-e085-45d5-aee9-3a737dd96ac4), tokens/*.css, Werte 1:1 übernommen
   (Issue #6). Referenzkopie: docs/design-referenz/tokens/.
   Die Roh-Palette lebt NUR hier; Bausteine verwenden die semantischen
   Aliase darunter. Kein Grau, kein Schwarz, kein Blau. */

:root {
  /* ── Basis-Palette ───────────────────────────────── */
  --mf-creme:            #FFF8F2;  /* Grundfläche, hellster Ton */
  --mf-creme-warm:       #FDEFE4;  /* Karten auf Creme, zweite Ebene */
  --mf-sand:             #EED3B8;  /* Trust-Strip, CTA-Band, Chips */
  --mf-sand-hover:       #F8E2CC;  /* Hover auf Creme-Warm */
  --mf-apricot:          #DD9D5C;  /* Primär-Akzent, Buttons, Zahlen */
  --mf-terrakotta:       #935D37;  /* Sekundär-Akzent, Links, Labels */
  --mf-terrakotta-dark:  #7E4E2D;  /* Hover auf Terrakotta */
  --mf-braun:            #4A2F1D;  /* Dunkelfläche + stärkste Schrift */
  --mf-braun-tief:       #40260F;  /* Schrift auf Sand/Apricot */
  /* Beere und Gold: Erweiterung der Palette durch Miriam (17.08.2026,
     Issue #29). Beere ersetzt Braun als dunkle Fläche („können wir das
     kackbraun tauschen"), Gold ist die Schmuckfarbe des Höhepunkt-
     Bausteins. Beide sind Flächen- und Schmuckfarben, KEINE
     Handlungsfarben: geklickt wird weiterhin auf Apricot. */
  --mf-beere:            #5E1F33;  /* Höhepunkt-Fläche */
  --mf-beere-tief:       #431424;  /* dunkle Fläche, ersetzt Braun */
  --mf-beere-hell:       #F1E0E4;  /* Schrift auf Beere */
  --mf-gold:             #C6A15B;  /* Rahmen, Zitat im Höhepunkt */
  --mf-gold-linie:       rgba(198,161,91,.55);

  --mf-salbei:           #C8CBB9;  /* Ruhe-Akzent, dritte Fläche */
  --mf-salbei-dark:      #3B3F2F;  /* Schrift auf Salbei */
  --mf-salbei-mid:       #4C5140;  /* Fließtext auf Salbei */
  --mf-salbei-soft:      #6F7A5C;  /* Erfolgs-/Bestätigungston */

  /* Braun-Leiter für Text */
  --mf-braun-700:        #5C4433;
  --mf-braun-600:        #6B4B33;
  --mf-braun-500:        #7A5B45;
  --mf-braun-400:        #8A6A51;
  --mf-braun-300:        #9A7A61;
  --mf-braun-200:        #A98B74;
  --mf-braun-100:        #B09277;

  /* Cremetöne auf dunklem Grund */
  --mf-creme-on-dark:    #F6DEC6;
  --mf-creme-body:       #E9D5C2;
  --mf-creme-muted:      #C9AF9A;
  --mf-weiss-warm:       #FAF7F5;

  /* App-Hintergründe (iOS-Prototyp, Website nutzt sie nicht) */
  --mf-app-bg:           #E7DAD0;
  --mf-app-bg-top:       #F3E7DC;
  --mf-app-bg-bottom:    #DCCCC0;

  /* Linien & Schleier — immer Terrakotta mit Alpha */
  --mf-line-subtle:      rgba(147,93,55,.12);
  --mf-line:             rgba(147,93,55,.16);
  --mf-line-strong:      rgba(147,93,55,.24);
  --mf-line-contrast:    rgba(147,93,55,.30);
  --mf-line-on-dark:     rgba(238,211,184,.18);
  --mf-veil-on-dark:     rgba(238,211,184,.08);
  --mf-veil-on-dark-hi:  rgba(238,211,184,.14);
  --mf-scrim:            rgba(74,47,29,.55);

  /* ── Semantische Aliase ──────────────────────────── */
  --mf-surface-page:     var(--mf-creme);
  --mf-surface-card:     var(--mf-creme-warm);
  --mf-surface-raised:   var(--mf-creme);
  --mf-surface-band:     var(--mf-sand);
  --mf-surface-calm:     var(--mf-salbei);
  /* Dunkle Fläche seit 17.08.2026 Beere statt Braun (Issue #29).
     Braun bleibt Schriftfarbe, nur die Fläche wechselt. */
  --mf-surface-dark:     var(--mf-beere-tief);

  --mf-text-strong:      var(--mf-braun);
  --mf-text-body:        var(--mf-braun-700);
  --mf-text-muted:       var(--mf-braun-400);
  --mf-text-accent:      var(--mf-terrakotta);
  --mf-text-eyebrow:     var(--mf-apricot);
  --mf-text-on-dark:     var(--mf-creme);
  --mf-text-on-dark-body:var(--mf-creme-body);

  --mf-action-primary:      var(--mf-apricot);
  --mf-action-primary-hover:var(--mf-terrakotta);
  --mf-action-secondary:    var(--mf-terrakotta);
  --mf-action-secondary-hover: var(--mf-terrakotta-dark);
  --mf-action-dark:         var(--mf-braun);
  --mf-action-dark-hover:   var(--mf-terrakotta);
  --mf-on-action:           var(--mf-creme);

  /* ── Typografie ──────────────────────────────────── */
  --mf-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --mf-font-body: Karla, system-ui, -apple-system, sans-serif;

  /* Display — Cormorant Garamond 400, oft kursiv für Zitate */
  --mf-display-hero:    clamp(44px, 6.2vw, 78px);
  --mf-display-xl:      clamp(36px, 5.4vw, 68px);
  --mf-display-lg:      clamp(34px, 4.2vw, 54px);
  --mf-display-md:      clamp(30px, 3.4vw, 46px);
  --mf-display-sm:      clamp(28px, 2.6vw, 34px);
  --mf-display-xs:      27px;
  --mf-display-lh:      1.06;
  --mf-display-lh-tight:1.02;
  --mf-display-ls:      -.015em;

  /* Body — Karla */
  --mf-body-lead:  clamp(17px, 1.5vw, 19px);
  --mf-body-lg:    17px;
  --mf-body-md:    16.5px;
  --mf-body-sm:    15.5px;
  --mf-body-xs:    13.5px;
  --mf-body-lh:    1.6;

  --mf-eyebrow-size: 12px;
  --mf-eyebrow-ls:   .2em;
  --mf-eyebrow-ls-tight: .16em;
  --mf-eyebrow-weight: 700;

  --mf-weight-regular: 400;
  --mf-weight-medium: 500;
  --mf-weight-semibold: 600;
  --mf-weight-bold: 700;

  --mf-measure-lead: 44ch;
  --mf-measure-body: 48ch;
  --mf-measure-tight: 34ch;

  /* ── Abstände & Raster ───────────────────────────── */
  --mf-space-1: 4px;
  --mf-space-2: 8px;
  --mf-space-3: 12px;
  --mf-space-4: 16px;
  --mf-space-5: 20px;
  --mf-space-6: 26px;
  --mf-space-7: 30px;
  --mf-space-8: 38px;
  --mf-space-9: 52px;

  --mf-section-y:    clamp(56px, 8vw, 110px);
  --mf-section-y-sm: clamp(50px, 7vw, 96px);
  --mf-section-y-lg: clamp(60px, 9vw, 130px);
  --mf-gutter:       clamp(18px, 4vw, 56px);
  --mf-container:    1240px;
  --mf-container-narrow: 900px;
  --mf-grid-gap:     clamp(28px, 4vw, 56px);
  --mf-card-gap:     20px;
  --mf-card-pad:     clamp(26px, 3vw, 38px);
  --mf-tap-min:      44px;

  /* ── Radien — alles ist rund ─────────────────────── */
  --mf-radius-pill:  999px;
  --mf-radius-xl:    32px;
  --mf-radius-lg:    28px;
  --mf-radius-md:    26px;
  --mf-radius-sm:    22px;
  --mf-radius-xs:    20px;
  --mf-radius-2xs:   16px;
  --mf-radius-field: 14px;
  --mf-radius-sheet: 30px 30px 0 0;

  /* ── Schatten & Schleier — warm getönt, nie grau ─── */
  --mf-shadow-card:   0 24px 50px -26px rgba(74,47,29,.45);
  --mf-shadow-cta:    0 18px 30px -16px rgba(147,93,55,.65);
  --mf-shadow-cta-sm: 0 16px 30px -14px rgba(147,93,55,.75);
  --mf-shadow-app:    0 14px 30px rgba(147,93,55,.28);
  --mf-border-hairline: 1px solid var(--mf-line);
  --mf-blur-sheet: blur(6px);
  --mf-blur-nav:   blur(14px);

  /* ── Bewegung — sehr langsam, nie synchron ───────── */
  --mf-ease-soft: cubic-bezier(.2,.7,.2,1);
  --mf-dur-fast: .2s;
  --mf-dur-base: .22s;
  --mf-dur-slow: .3s;
  --mf-dur-image: .8s;
  --mf-lift-sm: translateY(-2px);
  --mf-lift-md: translateY(-3px);
  --mf-lift-lg: translateY(-6px);
  --mf-drift-slow: 30s;
  --mf-drift-base: 24s;
  --mf-drift-fast: 16s;
}

/* Blob-Bewegungen — sehr langsam, nie synchron */
@keyframes mf-float-a { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(22px,-30px,0) scale(1.05); } }
@keyframes mf-float-b { 0%,100% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(-26px,22px,0) rotate(6deg); } }
@keyframes mf-drift-a { 0%,100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); } 33% { transform: translate3d(46px,-38px,0) rotate(5deg) scale(1.08); } 66% { transform: translate3d(-30px,26px,0) rotate(-4deg) scale(.96); } }
@keyframes mf-drift-b { 0%,100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); } 40% { transform: translate3d(-54px,-30px,0) rotate(-7deg) scale(1.1); } 70% { transform: translate3d(28px,34px,0) rotate(4deg) scale(.94); } }
@keyframes mf-wave { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes mf-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes mf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mf-pop { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes mf-breathe { 0% { transform: scale(.58) } 33% { transform: scale(1) } 50% { transform: scale(1) } 100% { transform: scale(.58) } }