/* ============================================================
   DESIGN TOKENS — 1:1 aus dem Claude-Design (easy GASTROWEBSEITE).
   Quelle der Wahrheit. Rebranding pro Kunde nur über diese Werte.
   ============================================================ */
:root {
  --color-primary: #8E2473;        /* Magenta/Purpur aus easy-Logo */
  --color-primary-hover: #761D60;  /* Akzent/Hover, aus Magenta abgeleitet */
  --color-primary-soft: #F4E6F0;   /* zarte Magenta-Fläche */
  --color-secondary: #1E3A3A;      /* Petrol/Anthrazit */
  --color-bg: #FFFFFF;
  --color-surface: #F7F5F6;
  --color-surface-2: #EFEBEE;
  --color-text: #182525;           /* dunkles Anthrazit */
  --color-text-muted: #586565;
  --color-border: #E3DDE0;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #F4F0F1;

  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Mulish', system-ui, -apple-system, sans-serif;

  --space-1: 8px;  --space-2: 16px; --space-3: 24px;
  --space-4: 40px; --space-5: 64px; --space-6: 96px;

  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(24,37,37,.08);
  --shadow-md: 0 10px 30px rgba(24,37,37,.10);
  --shadow-lg: 0 24px 60px rgba(24,37,37,.16);
  --maxw: 1180px;
}

/* Dunkler Modus — identische Tokens, andere Werte */
[data-theme="dark"] {
  --color-bg: #14201F;
  --color-surface: #1B2A29;
  --color-surface-2: #243736;
  --color-text: #EAF1F0;
  --color-text-muted: #9DB0AE;
  --color-border: #2C403F;
  --color-secondary: #0E1918;
  --color-primary-soft: #2A1A26;
  --color-on-secondary: #EAF1F0;
}