/* =============================================================================
   Central Design Tokens — customer + shared vocabulary
   -----------------------------------------------------------------------------
   Scope:
     - Defines a single vocabulary of design tokens (color / space / radius /
       typography / shadow / motion) consumed by customer surfaces (menu, cart,
       order-history) and by cross-surface features (Auswahlgruppen).
   Non-goals:
     - Does NOT replace admin_panel/assets/theme_b/tokens.css. The admin chrome
       keeps its silver --primary palette; this file only adds a shared
       --color-brand / --color-danger vocabulary the admin can opt into.
     - Does NOT override Bootstrap .btn* / .form-control. Bootstrap rules keep
       their existing cascade order.
   Usage:
     - Load as the first stylesheet on each page so other sheets can consume
       the custom properties via var(--color-brand) etc.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Brand (customer-facing blue) -------------------------------------- */
  --color-brand: #2563eb;
  --color-brand-hover: #1d4ed8;
  --color-brand-strong: #1e40af;
  --color-brand-soft: rgba(37, 99, 235, 0.1);
  --color-brand-softer: rgba(37, 99, 235, 0.05);
  --color-brand-rgb: 37, 99, 235;

  /* ---- Semantic colors --------------------------------------------------- */
  --color-danger: #dc2626;
  --color-danger-strong: #b91c1c;
  --color-danger-bg: #fef2f2;
  --color-danger-rgb: 220, 38, 38;

  --color-warning: #d97706;
  --color-warning-strong: #b45309;
  --color-warning-bg: #fffbeb;
  --color-warning-rgb: 217, 119, 6;

  --color-success: #059669;
  --color-success-strong: #047857;
  --color-success-bg: #ecfdf5;
  --color-success-rgb: 5, 150, 105;

  --color-info: #0ea5e9;
  --color-info-bg: #f0f9ff;
  --color-info-rgb: 14, 165, 233;

  /* ---- Neutral surfaces & text ------------------------------------------- */
  --color-text: #0f172a;
  --color-text-strong: #020617;
  --color-text-muted: #475569;
  --color-text-subtle: #64748b;
  --color-text-on-brand: #ffffff;

  --color-surface: #ffffff;
  --color-surface-soft: #f8fafc;
  --color-surface-muted: #f1f5f9;

  --color-border: rgba(15, 23, 42, 0.12);
  --color-border-strong: rgba(15, 23, 42, 0.22);
  --color-border-subtle: rgba(15, 23, 42, 0.06);

  /* ---- Spacing (4px step scale) ----------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* ---- Radii ------------------------------------------------------------ */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---- Shadows ---------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);
  --shadow-focus: 0 0 0 3px rgba(var(--color-brand-rgb), 0.35);
  --shadow-focus-danger: 0 0 0 3px rgba(var(--color-danger-rgb), 0.3);

  /* ---- Typography scale -------------------------------------------------- */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;

  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;

  /* ---- Motion ----------------------------------------------------------- */
  --transition-fast: 120ms ease;
  --transition-normal: 180ms ease;
  --transition-slow: 280ms ease;

  /* ---- Touch target ----------------------------------------------------- */
  --tap-target-min: 44px;

  /* ---- Breakpoints (reference scale) -----------------------------------
     CSS custom properties cannot be used inside @media queries. These
     tokens exist as a documented reference: any new CSS authored after
     Batch 3 must use ONE of these four px values in @media rules.

       --bp-xs:  360px   small phone (iPhone SE width baseline)
       --bp-sm:  640px   large phone / phablet
       --bp-md: 1024px   tablet / small laptop
       --bp-lg: 1280px   desktop

     Legacy ad-hoc breakpoints in the codebase (419, 480, 520, 540, 561,
     600, 720, 820, 860, 900, 980, 1080, 1200, 1360 etc.) are deliberately
     kept for now to avoid layout regressions; consolidation is staged for
     a dedicated cleanup batch with full visual regression testing.       */
  --bp-xs: 360px;
  --bp-sm: 640px;
  --bp-md: 1024px;
  --bp-lg: 1280px;
}

/* =============================================================================
   Dark mode — activated via [data-theme="dark"] on <html> (admin theme-toggle)
   or prefers-color-scheme: dark as a system fallback.
   Only re-maps tokens that meaningfully differ; keep admin theme_b untouched.
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-text: #e4e7ee;
  --color-text-strong: #f3f4f7;
  --color-text-muted: #94a3b8;
  --color-text-subtle: #64748b;

  --color-surface: #1a1d27;
  --color-surface-soft: #232734;
  --color-surface-muted: #2a2f3e;

  --color-border: rgba(228, 231, 238, 0.14);
  --color-border-strong: rgba(228, 231, 238, 0.28);
  --color-border-subtle: rgba(228, 231, 238, 0.06);

  --color-danger-bg: rgba(220, 38, 38, 0.15);
  --color-warning-bg: rgba(217, 119, 6, 0.18);
  --color-success-bg: rgba(5, 150, 105, 0.15);
  --color-info-bg: rgba(14, 165, 233, 0.12);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
}

/* Deliberately no prefers-color-scheme auto-flip. Customer surfaces declare
   <meta name="color-scheme" content="light">. Dark mode here is opt-in via
   [data-theme="dark"] only (admin theme-toggle). */