/* NextBuy Warehouse – Design-Tokens (einzige :root-Quelle, Paket B 13.07.2026).
   WERTE-WAHRHEIT für das gesamte Frontend. Bedeutung/Verwendungsregeln:
   .claude/skills/nextbuy-design/references/tokens.md — jede Änderung hier
   zieht tokens.md im selben Commit nach (Sync-Regel).
   Schicht 1 = Primitive (--indigo-*, --gray-*, ... — NIE direkt in
   Komponenten-CSS verwenden). Schicht 2 = semantische Tokens (einzige API).
   Skalenlogik (Radix): 1–2 App-BG · 3–5 UI-Element-BG/hover/aktiv ·
   5–7 Ränder · 8 Solid · 9 Solid-hover · 10 Text schwach · 11 Text stark. */
:root {
  color-scheme: light; /* T273: native Controls/Scrollbars folgen dem Theme; Gegenstueck im Dark-Block */
  /* ===== Schicht 1: Primitive ===== */
  /* Indigo (Stufe 8 = Brand-Primär #5850ff) */
  --indigo-1: #fdfdff;
  --indigo-2: #f6f6ff;
  --indigo-3: #eeedff;
  --indigo-4: #e2e0ff;
  --indigo-5: #d3d0ff;
  --indigo-6: #b7b1fc;
  --indigo-7: #948bf2;
  --indigo-8: #5850ff;
  --indigo-9: #4a41ee;
  --indigo-10: #4238cf;
  --indigo-11: #23205f;
  /* Grau mit Blaustich (Stufe 2 = Website-Grund #f6f7fb, 11 = Navy #010c28) */
  --gray-1: #fcfcfe;
  --gray-2: #f6f7fb;
  --gray-3: #eceef4;
  --gray-4: #e3e5ee;
  --gray-5: #d7dae6;
  --gray-6: #c4c8d9;
  --gray-7: #aab0c7;
  --gray-8: #8a90a8;
  --gray-9: #767d95;
  --gray-10: #565d78;
  --gray-11: #010c28;
  --white: #ffffff;
  /* Lime-Akzent: AUSSCHLIESSLICH auf dunklen Flächen (Navy/Indigo) */
  --lime: #eaff9f;
  /* Status (kühl, zu Indigo passend; Amber-Solid trägt dunklen Text) */
  --green-bg: #e9f6ee;  --green-border: #b4dfc4;  --green-solid: #30a46c;  --green-text: #18794e;
  --amber-bg: #fff1d6;  --amber-border: #f3d673;  --amber-solid: #ffc53d;  --amber-text: #9a6700;
  --red-bg: #feebec;    --red-border: #f4a9aa;    --red-solid: #e5484d;    --red-text: #c62a2f;
  /* Violett (T169: Klärfall-Status - bewusst NICHT Indigo, damit "beim Büro in
     Klärung" nie wie eine Aktion oder ein Fortschritt aussieht) */
  --violet-bg: #f4edfc; --violet-border: #d9c4f2; --violet-solid: #8e4ec6; --violet-text: #793aaf;

  /* ===== Schicht 2: Semantik (nur diese in Komponenten verwenden) ===== */
  /* Flächen */
  --bg-page: var(--gray-2);
  --surface: var(--white);
  --bg-subtle: var(--gray-3);          /* Tabellen-Header-Zonen, Wells, readonly */
  --bg-hover: var(--gray-3);           /* neutrale Hover-Flächen */
  /* Text */
  --text: var(--gray-11);
  --text-muted: var(--gray-10);
  --text-faint: var(--gray-8);         /* Platzhalter, Disabled */
  --on-primary: var(--white);
  --on-navy: var(--white);
  /* Ränder */
  --border: var(--gray-5);             /* Hairlines, Trennlinien, Card-Rand */
  --border-strong: var(--gray-6);      /* Inputs, interaktive Elemente */
  /* Marke / Aktion */
  --primary: var(--indigo-8);
  --primary-hover: var(--indigo-9);
  --primary-soft: var(--indigo-3);     /* Soft-Buttons, Aktiv-/Selected-Flächen */
  --primary-soft-hover: var(--indigo-4);
  --primary-faint: var(--indigo-2);    /* hauchzarter Aktiv-Tint für große Flächen (aktive Vorgangs-Karte) */
  --primary-text: var(--indigo-10);    /* Links, Primär-Text auf hellem Grund */
  --navy: var(--gray-11);              /* "Tinte": dunkle Deko-Elemente AUF Karten (Begleitzettel-Balken/-Barcode).
                                          Folgt im Dunkelmodus dem gray-11-Flip und bleibt so von selbst kontrastreich. */
  --surface-inverse: var(--gray-11);   /* die EINE herausgehobene Dunkel-Kachel je Ansicht (§25a-Hero, T273).
                                          Flippt NICHT mit gray-11: der Dark-Block belegt sie eigenständig dunkler als Karten. */
  --surface-inverse-border: var(--gray-11); /* Rand der Dunkel-Kachel: hell unsichtbar (= Fläche), im Dark sichtbar */
  --on-navy-muted: var(--gray-7);      /* gedämpfter Text auf dunklen Flächen (Hero-Labels) - vorher Primitiv-Verstoß in app.css */
  --cta-strong: var(--gray-11);        /* dunkler Marken-CTA (Login-Button). Im Dark Indigo-Solid: #4A41EE erreicht
                                          auf dunkler Karte nur 2,68:1 (Mail-Präzedenzfall mail-tokens.js DUNKEL.cta). */
  --cta-strong-hover: #151f39;         /* entspricht dem alten opacity-.92-Hover auf Weiß; als Fläche, weil die
                                          Opacity-Richtung im Dunkelmodus kippt (dunkler statt heller) */
  --on-media: #ffffff;                 /* fixe helle Linien AUF Fotos/Medien (Avatar-Crop) - bewusst theme-unabhängig */
  --accent-on-dark: var(--lime);       /* Name kodiert die Regel: NIE auf hell */
  /* Status */
  --ok: var(--green-text);        --ok-soft: var(--green-bg);        --ok-solid: var(--green-solid);
  --warn: var(--amber-text);      --warn-soft: var(--amber-bg);      --warn-solid: var(--amber-solid);
  --danger: var(--red-text);      --danger-soft: var(--red-bg);      --danger-solid: var(--red-solid);
  /* Klärfall (T169): "liegt in Klärung beim Büro" - eigener Zustand, weder
     Alarm (warn/danger) noch Aktion (primary). */
  --klaerfall: var(--violet-text); --klaerfall-soft: var(--violet-bg); --klaerfall-solid: var(--violet-solid);
  /* Typografie */
  --font-sans: "Gilroy", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-serif-display: "Poynter Oldstyle Display", Georgia, "Times New Roman", serif; /* nur groß + sparsam: Login-Begrüßung, große Willkommens-/Leerzustandstitel */
  --mono: var(--font-sans); /* Daniel-Wunsch T061 R2: KEINE Mono-Schrift mehr - Nummern/IDs/Scans/Beträge laufen wie alles andere in Gilroy. Token-Name bleibt, damit die vielen Verweise gültig bleiben. */
  /* Schriftgrößen-Skala (Daniel 16.07.2026, Polaris-Dichte: Body 14px belegt).
     Rollen-klare Größen NUR über diese Tokens; bewusste Einzelgrößen (Scan 18,
     IMEI 22, grade-btn 16, Slip 36, Login-Serif 26, Glyphen) bleiben px mit
     Kommentar "bewusste Ausnahme" an der Stelle. */
  --fs-body: 14px;                     /* Fließtext, Inputs, Buttons, Tabellenzellen, Nav-Items */
  --fs-sm: 13px;                       /* Hints, Labels, Meta, button.small */
  --fs-xs: 12px;                       /* Eyebrow, Zell-Subtext, Chips/Tags */
  --fs-micro: 11px;                    /* Uppercase-Tabellen-Header, Mini-/Sektions-Labels */
  --fs-h3: 14px;                       /* Karten-Untertitel */
  --fs-h2: 18px;                       /* Karten-Titel */
  --fs-title: 16px;                    /* Topbar-/Panel-Titel */
  /* Abstands-Skala (T061): einzige erlaubte Rhythmus-Schritte fuer NEUE Abstaende */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px;
  /* Form & Tiefe (Website-gemessen: 12 Karten · 8 Controls · Pill Badges) */
  --radius: 8px;                       /* Buttons, Inputs, kleine Container */
  --radius-lg: 12px;                   /* Karten, Panels */
  --radius-xl: 16px;                   /* große schwebende Karten (Login) */
  --radius-pill: 999px;                /* Chips, Badges */
  --shadow-card: 0 1px 2px rgba(1, 12, 40, .04), 0 2px 6px rgba(1, 12, 40, .05);
  --shadow-pop: 0 20px 60px rgba(1, 12, 40, .12);
  --scrim: rgba(1, 12, 40, .4);        /* abdunkelnder Grund unter schwebenden Panels/Modals (Navy-Ton, nie Schwarz) */
  --skeleton-shimmer: rgba(255, 255, 255, .6); /* Lichtstreifen des Skeleton-Loaders; im Dark stark gedimmt statt Blitzlicht */
  /* Layout / Shell */
  --sidebar-bg: var(--surface);
  --sidebar-w: 280px;                  /* breit genug für „Neue Großhandels-Bestellung" ohne Enge (T061 R2) */
  --sidebar-rail: 108px;               /* großzügiger Rail: Icon + Mini-Label „Wareneingang" ohne Ellipse */
  --topbar-h: 60px;                    /* Topbar UND Sidebar-Kopf: eine Flucht */
  --tap-min: 44px;                     /* Mindest-Tippziel am Touch (Apple/WCAG); nur in (pointer:coarse)-Regeln verwenden */
  /* Breakpoint-KONVENTION (T281, kein Token - CSS-Variablen funktionieren in
     Media Queries nicht): Mobil = max-width 767.98px, Desktop/iPad = min-width
     768px. iPad portrait (820px) laeuft BEWUSST als Desktop (Garantie 1 gilt);
     Touch-Haertung fuers iPad ueber (pointer: coarse), nie ueber Breite. */
  /* Content-Breiten (sevdesk-Muster: pro Seite/Ansicht wählbar). Formulare
     schmal (Lesebreite), Standard-Inhalte mittel, Datentabellen/Dashboards breit. */
  --content-narrow: 780px;             /* Formulare, Profil, Auth */
  --content-default: 1040px;           /* Standard-Seiten */
  --content-wide: 1440px;              /* Datentabellen + Dashboards (Einstellungen, Übersicht) */
}

/* ===== Dunkelmodus (T273, Variante „Anthrazit", Daniel 12.08.2026) =====
   Aktiv über data-theme="dark" auf <html> (setzt das Head-Snippet jeder Seite,
   Quelle: localStorage shell.theme bzw. users.theme). Schicht 1 wird dunkel neu
   belegt - GLEICHE Stufensemantik wie oben, Komponenten-CSS bleibt unberührt.
   Grundwerte = die abgesegnete Mail-Dunkelwelt (mail-tokens.js DUNKEL,
   Entscheidung 2026-07-22: neutral getönt, bewusst NICHT Navy - der Blaustich
   bleibt minimal, damit Indigo, Lime und die Statusfarben die Farben bleiben).
   Schicht-2-Zeilen hier drin sind die wenigen Rollen, deren helle Zuordnung im
   Dunkeln die falsche wäre (Kartenfläche, Hero-Kachel, CTA, Schatten, Scrim). */
:root[data-theme="dark"] {
  color-scheme: dark;
  /* Indigo dunkel (8 = Brand-Fixpunkt, 9 = Hover und HELLER als 8 - die
     Hover-Richtung dreht sich im Dunkeln; 10/11 = Text auf dunklem Grund) */
  --indigo-1: #191a24;
  --indigo-2: #1e1f30;
  --indigo-3: #272750;
  --indigo-4: #2e2e60;
  --indigo-5: #363670;
  --indigo-6: #44449a;
  --indigo-7: #5551c8;
  --indigo-8: #5850ff;
  --indigo-9: #6d66ff;
  --indigo-10: #aaa4ff;
  --indigo-11: #c8c4ff;
  /* Grau dunkel (2 = Seitengrund #15161a, 3 = Wells/Hover, 5-6 = Ränder,
     8-11 = Text aufsteigend bis #f2f2f5) */
  --gray-1: #1a1b20;
  --gray-2: #15161a;
  --gray-3: #26272d;
  --gray-4: #2b2c33;
  --gray-5: #2e3036;
  --gray-6: #40424d;
  --gray-7: #565863;
  --gray-8: #83858f;
  --gray-9: #9c9ea8;
  --gray-10: #c7c8ce;
  --gray-11: #f2f2f5;
  /* Status dunkel: -bg als dunkle Tönung, -text deutlich aufgehellt,
     -solid bleibt satt (auf --warn-solid weiterhin dunkler Text) */
  --green-bg: #142b1e;  --green-border: #1e4230;  --green-solid: #30a46c;  --green-text: #4ccb8c;
  --amber-bg: #2e2410;  --amber-border: #4a3a12;  --amber-solid: #ffc53d;  --amber-text: #f0c24b;
  --red-bg: #371b1d;    --red-border: #582a2d;    --red-solid: #e5484d;    --red-text: #f2777b;
  --violet-bg: #2a2040; --violet-border: #43326a; --violet-solid: #8e4ec6; --violet-text: #c29bf0;
  /* Schicht-2-Korrekturen */
  --surface: #1d1e23;                  /* Kartenfläche (Mail: flaeche) - NICHT --white remappen, --on-primary bleibt weiß */
  --surface-inverse: #0c0d10;          /* Hero-Kachel: dunkler als die Karten, behält ihre Sonderstellung */
  --surface-inverse-border: var(--gray-6);
  --on-navy-muted: #8f929c;
  --cta-strong: var(--indigo-8);       /* Login-CTA wird Indigo-Solid (Mail-Präzedenzfall: Navy säuft im Dunkeln ab) */
  --cta-strong-hover: var(--indigo-9);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .3);
  --shadow-pop: 0 20px 60px rgba(0, 0, 0, .55);
  --scrim: rgba(0, 0, 0, .62);         /* neutral wie die Palette (Navy-Regel gilt für hell) und kräftiger:
                                          auf dunklem Grund trennt ein .4-Schleier das Overlay zu schwach */
  --skeleton-shimmer: rgba(255, 255, 255, .07);
}