/* ================================================================
   SchnellerTeller. — Design-Tokens
   ================================================================
   Einzige Quelle für Farben, Abstände, Radien, Typo-Skala und
   Schatten. Wird von allen drei Oberflächen geladen:

     /index.php               Stationsansicht (Komfort-Stufe)
     /admin/*.php             Admin-Backend    (kompakte Stufe)
     /customer-admin/*.php    Kunden-Backend   (kompakte Stufe)

   Zwei Regeln beim Arbeiten hier drin:

   1. Diese Datei definiert NUR Custom Properties (plus @font-face).
      Komponenten-Regeln gehören nach backend.css bzw. in den
      <style>-Block der jeweiligen Seite.

   2. Die kundenspezifische Primärfarbe kommt NICHT von hier. Sie wird
      serverseitig aus config.json injiziert (index.php) bzw. zur
      Laufzeit von app.js geschrieben — jeweils als --c-theme-*.
      Diese Datei leitet daraus --c-primary/-dk/-lt ab, damit der
      Dark Mode dazwischenfunken kann. Inline-Styles auf <html> haben
      höhere Priorität als jede Regel hier; deshalb die Umleitung über
      die --c-theme-*-Ebene statt direktem Überschreiben.
   ================================================================ */

/* ================================================================
   Inter (variable, wght 400–800) — selbst gehostet, CSP font-src 'self'
   ================================================================ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-400-800-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-400-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ================================================================
   Light (Standard)
   ================================================================ */
:root {
  /* ── Schrift ────────────────────────────────────────────────── */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Bewusst nur Systemschriften: eine eigene Monospace würde für ein paar
     Zeitangaben und Hex-Werte eine weitere Schriftdatei kosten. */
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Typo-Skala (kompakt) — Backends.
     Die Stationsansicht setzt bewusst größere Werte, siehe index.php. */
  --fs-metric: 1.875rem;  /* 30px — große Kennzahl        */
  --fs-2xl:    1.5rem;    /* 24px — Seitentitel           */
  --fs-lg:     1.125rem;  /* 18px — Abschnittsüberschrift */
  --fs-base:   1rem;      /* 16px — Kartentitel           */
  --fs-sm:     .875rem;   /* 14px — Fließtext             */
  --fs-xs:     .75rem;    /* 12px — Label                 */
  --fs-2xs:    .6875rem;  /* 11px — Fußnote, Badge        */

  /* ── Abstände (4px-Raster) ──────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;    /* Standard */
  --sp-3: 12px;   /* Karten-Innenabstand kompakt */
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* ── Radien ─────────────────────────────────────────────────── */
  --r-xs: 4px;    /* Buttons, Inputs   */
  --r-sm: 6px;    /* Karten, Badges    */
  --r:    8px;    /* Modale, Container */
  --r-lg: 12px;

  /* ── Primärfarbe ────────────────────────────────────────────────
     --c-theme-* wird von außen gesetzt (siehe Kopfkommentar).
     Die Fallbacks entsprechen dem Theme "Klassisch".             */
  --c-primary:    var(--c-theme-primary, #b08cc4);
  --c-primary-dk: var(--c-theme-dk,      #9470a8);
  --c-primary-lt: var(--c-theme-lt,      #eeddf5);

  /* ── Flächen ────────────────────────────────────────────────── */
  --c-bg:        var(--c-theme-bg, #f0f2f6);  /* Seitenhintergrund      */
  --c-surface:   #ffffff;                     /* Karten                 */
  --c-surface-2: #f6f7f9;                     /* Tabellenkopf, Chips    */
  --c-surface-3: #eef0f4;                     /* Hervorgehobene Flächen */
  --c-border:    #dfe3e8;
  --c-border-sd: #cbd2da;                     /* kräftiger, für Inputs  */

  /* ── Text ───────────────────────────────────────────────────── */
  --c-text:  #111827;
  --c-muted: #6b7280;
  --c-faint: #9aa3af;
  --c-on-primary: #ffffff;

  /* ── Semantik ───────────────────────────────────────────────── */
  --c-success:    #059669;
  --c-success-bg: #d1fae5;
  --c-success-tx: #065f46;
  --c-warning:    #d97706;
  --c-warning-bg: #fef3c7;
  --c-warning-tx: #92400e;
  --c-danger:     #dc2626;
  --c-danger-bg:  #fee2e2;
  --c-danger-tx:  #991b1b;
  --c-info:       #0e7490;
  --c-info-bg:    #cffafe;
  --c-info-tx:    #155e75;

  /* Statusfarben für Badges/Punkte */
  --c-status-active:   #22c55e;
  --c-status-pending:  #f59e0b;
  --c-status-inactive: #64748b;
  --c-status-error:    #ef4444;

  /* ── Diagrammfarben (Chart.js im Admin, Statistik im Frontend) ─ */
  --chart-1: #6366f1;  /* indigo  */
  --chart-2: #06b6d4;  /* cyan    */
  --chart-3: #8b5cf6;  /* violet  */
  --chart-4: #f59e0b;  /* amber   */
  --chart-5: #10b981;  /* emerald */
  --chart-6: #ec4899;  /* pink    */
  --chart-grid: #e5e7eb;
  --chart-axis: #6b7280;

  /* ── Mahlzeitfarben (Stationsansicht) ───────────────────────── */
  --c-meal-fr: #d4910a;
  --c-meal-mi: var(--c-primary);
  --c-meal-ab: #4a607e;

  /* ── Schatten ───────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(16,24,40,.05);
  --shadow-sm: 0 1px 3px rgba(16,24,40,.08), 0 0 0 1px rgba(16,24,40,.03);
  --shadow-md: 0 4px 14px rgba(16,24,40,.10), 0 1px 3px rgba(16,24,40,.06);
  --shadow-lg: 0 12px 30px rgba(16,24,40,.16);
  --c-shadow-hdr: var(--c-theme-shadow, 0 1px 3px rgba(16,24,40,.08));
  --c-overlay: rgba(15,23,42,.45);

  /* ── Bewegung ───────────────────────────────────────────────── */
  --t: .15s ease;
}

/* ================================================================
   Dark
   ----------------------------------------------------------------
   data-color-mode wird immer auf "light" oder "dark" aufgelöst,
   bevor es auf <html> landet — den Zustand "auto" (Systemeinstellung)
   löst das Inline-Skript im <head> auf. Deshalb genügt hier ein
   einziger Block ohne prefers-color-scheme-Duplikat.
   ================================================================ */
:root[data-color-mode="dark"] {
  /* Primärfarbe: --c-theme-lift ist die vom Client aufgehellte Variante
     der Kundenfarbe. Ohne sie (z.B. wenn JS noch nicht lief) bleibt die
     Primärfarbe selbst stehen — die drei mitgelieferten Themes sind hell
     genug für dunkle Flächen. */
  --c-primary-dk: var(--c-theme-lift, var(--c-theme-primary, #c9aedb));
  --c-primary-lt: var(--c-theme-tint, rgba(176,140,196,.22));

  --c-bg:        #0f172a;  /* slate-900 */
  --c-surface:   #1e293b;  /* slate-800 */
  --c-surface-2: #263449;
  --c-surface-3: #334155;  /* slate-700 */
  --c-border:    #334155;
  --c-border-sd: #475569;  /* slate-600 */

  --c-text:  #e8edf4;
  --c-muted: #97a3b6;
  --c-faint: #6b7a90;

  --c-success:    #34d399;
  --c-success-bg: rgba(52,211,153,.14);
  --c-success-tx: #6ee7b7;
  --c-warning:    #fbbf24;
  --c-warning-bg: rgba(251,191,36,.14);
  --c-warning-tx: #fcd34d;
  --c-danger:     #f87171;
  --c-danger-bg:  rgba(248,113,113,.14);
  --c-danger-tx:  #fca5a5;
  --c-info:       #22d3ee;
  --c-info-bg:    rgba(34,211,238,.14);
  --c-info-tx:    #67e8f9;

  --chart-grid: #334155;
  --chart-axis: #97a3b6;

  --c-meal-fr: #e0a83a;
  --c-meal-ab: #8ba3c4;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04);
  --shadow-md: 0 4px 14px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
  --shadow-lg: 0 12px 30px rgba(0,0,0,.6);
  --c-shadow-hdr: 0 1px 3px rgba(0,0,0,.5);
  --c-overlay: rgba(0,0,0,.62);

  color-scheme: dark;
}

/* ================================================================
   Alias-Ebene
   ----------------------------------------------------------------
   Admin- und Kunden-Backend benutzen historisch kurze Namen
   (--c, --cd, --cl, --bg, --card, --border, --text, --muted …), die
   Stationsansicht --c-card. Statt hunderte Fundstellen umzubenennen
   zeigen die alten Namen hier auf die kanonischen Tokens — damit gilt
   der Dark Mode automatisch auch für alle Inline-Styles in den
   PHP-Templates.
   ================================================================ */
:root {
  --c:           var(--c-primary);
  --cd:          var(--c-primary-dk);
  --cl:          var(--c-primary-lt);
  --bg:          var(--c-bg);
  --card:        var(--c-surface);
  --c-card:      var(--c-surface);
  --border:      var(--c-border);
  --text:        var(--c-text);
  --muted:       var(--c-muted);
  --danger:      var(--c-danger);
  --danger-bg:   var(--c-danger-bg);
  --danger-text: var(--c-danger-tx);
  --success:     var(--c-success);
  --success-bg:  var(--c-success-bg);
  --success-text:var(--c-success-tx);
  --amber:       var(--c-warning);
  --amber-bg:    var(--c-warning-bg);
  --amber-text:  var(--c-warning-tx);
  --green:       var(--c-success);
  --radius:      var(--r);
  --radius-sm:   var(--r-sm);
}

/* ================================================================
   Globale Basis
   ================================================================ */
html { color-scheme: light; }
:root[data-color-mode="dark"] { color-scheme: dark; }

::selection { background: var(--c-primary-lt); color: var(--c-primary-dk); }

/* Sichtbarer, themekonformer Fokusring statt OS-Akzentfarbe */
:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}