/* =========================================================
   Fushi · Design Tokens
   Farbwelt (seit 21.9.2026, nach dem Flyer): Tiefsee-Navy als Grund, Daruma-Rot als Akzent,
   Gold (Daruma-Streifen) als Signalfarbe (Badges), Seegrün für vegan/verfügbar.
   Alle Text/Grund-Kombinationen ≥ WCAG AA (4.5:1).
   ========================================================= */
:root {
  /* ---- Grundflächen ---- */
  --c-bg:          #0b1526;   /* Seite */
  --c-bg-deep:     #070e1b;   /* Header/Footer-Ton */
  --c-surface:     #111d33;   /* Karten */
  --c-surface-2:   #182742;   /* Karten hover / Sheets */
  --c-surface-3:   #1f3153;   /* Chips aktiv, Inputs */
  --c-line:        rgba(160, 190, 240, 0.14);
  --c-line-strong: rgba(160, 190, 240, 0.28);

  /* ---- Text ---- */
  --c-text:        #eaf0fa;   /* 16.1:1 auf --c-bg */
  --c-text-2:      #b3c0d8;   /* 9.6:1 */
  --c-text-3:      #8494b0;   /* 5.4:1 */
  --c-text-inv:    #08111f;

  /* ---- Marke ---- */
  --c-primary:        #f07c6f;                 /* Daruma-Rot, hell (Links, Icons, Fokus) – 6.6:1 auf --c-bg */
  --c-primary-strong: #c9463b;                 /* Buttons – weiss darauf 4.9:1 */
  --c-primary-deep:   #a1362e;
  --c-primary-soft:   rgba(228, 101, 90, 0.16);
  --c-primary-glow:   rgba(228, 101, 90, 0.35);
  --c-accent:         #ffb3a7;                 /* helles Korall für Highlights auf dunkel */

  --c-salmon:      #f2b84b;   /* Signal: Beliebt / Neu / pikant – Gold der Daruma-Streifen */
  --c-salmon-soft: rgba(242, 184, 75, 0.16);
  --c-green:       #6fd39a;   /* vegan / geöffnet / ok */
  --c-green-soft:  rgba(111, 211, 154, 0.14);
  --c-warn:        #f5c451;
  --c-warn-soft:   rgba(245, 196, 81, 0.14);
  --c-danger:      #ff6b6b;
  --c-danger-soft: rgba(255, 107, 107, 0.14);

  /* ---- Typografie ---- */
  --f-display: 'Shojumaru', 'Shippori Mincho', Georgia, serif;   /* Pinselschrift wie der Flyer-Schriftzug; nur Titel, nicht Produkttexte */
  --f-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-xs: 0.75rem;    /* 12 */
  --fs-sm: 0.8125rem;  /* 13 */
  --fs-base: 0.9375rem;/* 15 */
  --fs-md: 1.0625rem;  /* 17 */
  --fs-lg: 1.25rem;    /* 20 */
  --fs-xl: 1.5625rem;  /* 25 */
  --fs-2xl: 1.953rem;  /* 31 */
  --fs-3xl: 2.441rem;  /* 39 */
  --fs-4xl: 3.05rem;   /* 49 */
  --fs-5xl: 3.815rem;  /* 61 */

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.55;

  /* ---- Abstände (4er-Raster) ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* ---- Layout ---- */
  --w-narrow: 720px;
  --w-content: 1200px;
  --w-wide: 1400px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 64px;

  /* ---- Radien / Schatten / Motion ---- */
  --r-sm: 6px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 9999px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 0 4px var(--c-primary-soft);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --t-fast: 140ms; --t-base: 220ms; --t-slow: 420ms;

  color-scheme: dark;
}

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