/* =========================================================
   Design Tokens – Light Mode, weinrot als Standard-Akzent
   Akzentfarbe wird zur Laufzeit über --accent überschrieben.
   ========================================================= */
:root {
  /* Akzent (Standard: weinrot). Wird per JS/localStorage überschrieben. */
  --accent: #7b1e3b;
  --accent-600: #6a1733;
  --accent-700: #571026;
  --accent-200: #e7c4cf;
  --accent-100: #f4e3e9;
  --accent-contrast: #ffffff;

  /* Neutrals */
  --bg: #f7f7f8;
  --surface: #ffffff;
  --surface-2: #f1f1f3;
  --border: #e7e7ea;
  --text: #1c1c20;
  --text-soft: #5b5b66;
  --text-faint: #8b8b96;

  /* Weintyp-Farben (für Header-Tönung & Chips) */
  --type-red: #8a2240;
  --type-white: #c9a227;
  --type-rose: #d97f8f;
  --type-sparkling: #e0a900;

  /* Form */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Schatten */
  --shadow-sm: 0 1px 2px rgba(20, 20, 30, 0.06), 0 1px 3px rgba(20, 20, 30, 0.05);
  --shadow: 0 6px 18px rgba(20, 20, 30, 0.08);
  --shadow-lg: 0 18px 48px rgba(20, 20, 30, 0.16);

  /* Typografie */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.6rem;
  --fs-2xl: 2.1rem;

  /* Layout */
  --maxw: 760px;
  --tabbar-h: 68px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}