/* ==========================================================================
   Flothari Maker — Design-Tokens
   Palette 1:1 übernommen aus dem bestehenden Gießpulver-Rechner
   (giesspulver-rechner_3) für einen konsistenten Flothari-Look.
   ========================================================================== */
:root {
  /* Marken-Palette (Ton, Gips, Lehm) */
  --bg:         #f3ede4;   /* warmes Creme, App-Hintergrund */
  --panel:      #ffffff;   /* Karten / Flächen */
  --panel-2:    #faf6ef;   /* zart abgesetzte Fläche */
  --ink:        #2e2a24;   /* Haupttext (dunkles Braun) */
  --ink-soft:   #6b6255;   /* Sekundärtext */
  --ink-faint:  #9a8f7d;   /* Hinweise / Platzhalter */
  --line:       #ddd3c4;   /* Rahmen / Trenner */
  --line-soft:  #ece4d6;
  --clay:       #b5673f;   /* Akzent (Lehm/Terrakotta) */
  --clay-dark:  #93502f;   /* Akzent dunkel / Zahlen */
  --clay-tint:  #f4e7dd;   /* heller Akzent-Hintergrund */
  --plaster:    #e8e0d2;   /* Gips, Info-Flächen */
  --good:       #4a6b52;   /* Erfolg / Grün */
  --good-tint:  #e6ede5;
  --fav:        #d9455e;   /* Favorit-Herz (Rot) */
  --warn:       #a8712a;   /* Warnung / Hinweis */
  --danger:     #a4432f;   /* Löschen / Fehler */

  /* Typografie */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Radius */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Abstände (8er-Raster) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;

  /* Schatten */
  --shadow-sm: 0 1px 2px rgba(46, 42, 36, 0.06);
  --shadow:    0 2px 10px rgba(46, 42, 36, 0.08);
  --shadow-lg: 0 8px 30px rgba(46, 42, 36, 0.16);

  /* Layout */
  --maxw: 640px;           /* mobile-first Contentbreite */
  --bottom-nav-h: 62px;
  --topbar-h: 54px;

  /* sichere Bereiche (Notch / Home-Indicator) */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}