/* =========================================================
   TROTZDEM. / BUMS. GEPLANT. – zentrale Design-Tokens
   Layout-Idee: eine ruhige Papeterie-Spalte; Marke lebt im
   Header, Bedienung bleibt klar. Flächen ca. 65/20/10/5
   (hell / dunkel+Leo / Pink / Mint) pro Ansicht.
   Bewusst nur ein (helles) Theme: Die Markenvorgabe ist
   hell; dunkle Flächen sind Details, kein Dark Mode.
   ========================================================= */
:root {
  color-scheme: light;

  /* --- Basisfarben (verbindlich aus dem Briefing) --- */
  --offwhite: #F5F4F2;
  --white: #FFFFFF;
  --light-gray: #D6D3D1;
  --greige: #A59D9B;
  --taupe: #746C69;
  --dark-neutral: #514B49;
  --ink: #252326;
  --soft-pink: #F58CAB;
  --candy-pink: #F33791;
  --mint: #80BDAF;
  --light-mint: #D8F0E9;

  /* --- Ergänzende Zwischentöne (Farbprofil mit.liebe.mutig) --- */
  --powder-pink: #F9DCE6;
  --soft-rosa: #F5B7CB;
  /* „Splash Rosa“ = --soft-pink #F58CAB */
  --ice-mint: #E7F5F0;
  --signature-mint: #A2D5C7;
  /* „Deep Mint“ = --mint #80BDAF */

  /* --- Semantische Tokens --- */
  --surface-page: var(--offwhite);
  --surface-card: var(--white);
  --text-primary: var(--ink);          /* 14,18:1 auf Offwhite */
  --text-secondary: var(--taupe);      /* 4,67:1 auf Offwhite */
  --border-quiet: var(--light-gray);
  --border-strong: var(--ink);
  --action-primary: var(--candy-pink);
  --action-primary-text: var(--ink);   /* nur fett und >= 20px */
  --accent-mint: var(--mint);
  --accent-mint-soft: var(--light-mint);
  --accent-pink-soft: var(--soft-pink);
  --focus-ring: var(--ink);
  --decor-line: var(--ink);

  /* --- Schriftrollen --- */
  --font-display: "Anton", "Impact", "Arial Narrow Bold", sans-serif;
  --font-hand: "Allura", "Snell Roundhand", "Segoe Script", cursive;
  --font-ui: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- Typo-Skala (mobil) --- */
  --fs-hero: clamp(3.5rem, 19vw, 5rem);     /* 56–80px */
  --fs-brand: 1.375rem;                     /* 22px Dachmarke */
  --fs-hand: 1.875rem;                      /* 30px Handschrift */
  --fs-value: 2.5rem;                       /* 40px Zahlwert */
  --fs-body: 1.0625rem;                     /* 17px */
  --fs-small: 0.875rem;                     /* 14px Minimum */
  --fs-button: 1.25rem;                     /* 20px fett */
  --lh-body: 1.5;

  /* --- Abstände 4/8/12/16/24/32/48 --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* --- Radien, Schatten, Bewegung --- */
  --radius-card: 20px;
  --radius-button: 14px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(37, 35, 38, 0.06), 0 8px 24px rgba(37, 35, 38, 0.07);
  /* Bolt-Aufmachung: dunkler Rahmen + versetzter „Papier“-Schatten */
  --border-card: 2px solid var(--ink);
  --shadow-offset: 4px 5px 0 var(--ink);
  --motion-fast: 140ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* --- Leo-Streifen --- */
  --leo-strip-height: 44px;

  /* --- Touch --- */
  --touch-min: 48px;
}