/* MAIE Design Language · tokens.css · Stand 27.10.2026
   Gilt für: makeaieasy.de, Jarvis, Kundenportale (White-Label über --maie-accent + Logo).
   Regel: Nur diese Variablen verwenden. Keine Hex-Werte im Komponenten-CSS. */

:root {
  /* Farbe · Weiß ist der Raum, Rot heißt Handeln, Schwarz gibt Halt */
  --maie-white: #FFFFFF;        /* Grund, Karten */
  --maie-mist: #F5F5F6;         /* Abschnitte, Kacheln, Eingabefelder */
  --maie-line: #E6E6E9;         /* Trenner, Konturen */
  --maie-line-soft: #EFEFF1;    /* Tabellenlinien, leichte Trenner */
  --maie-grey: #5C5C66;         /* Nebentext · 6,4:1 auf Weiß */
  --maie-grey-soft: #A1A1AA;    /* Nebentext auf Schwarz · 8:1 */
  --maie-ink: #111113;          /* Text, dunkle Flächen */
  --maie-ink-2: #1C1C1F;        /* zweite Fläche auf Schwarz */
  --maie-accent: #D7262E;       /* MAIE-Rot · Primär-Aktion, ein betontes Wort, Live-Zustand · 5,0:1 */
  --maie-accent-2: #FF6A5C;     /* Koralle · nur im Farbverlauf des Akzents (Logo-Strich, Schimmer) */
  --maie-accent-soft: color-mix(in srgb, var(--maie-accent) 9%, var(--maie-white)); /* Hinweis, Auswahl */

  /* Status · Farbe + Helligkeit unterscheiden sich, nie Farbe allein */
  --maie-ok: #4ADE80;           /* läuft */
  --maie-busy: var(--maie-accent); /* arbeitet gerade (pulst) */
  --maie-warn: #FBBF24;         /* prüfen */
  --maie-idle: #D4D4D8;         /* ruht */
  --maie-done: var(--maie-ink); /* erledigt */
  --maie-work: #A1A1AA;         /* in Arbeit */

  /* Bedeutungsfarben (Entscheidung E8, 28.10.2026): für Bereiche, Kennzahlen, Kanäle und Stände, damit man auf einen Blick
     erkennt, worum es geht. Je Instanz in Admin belegbar (z. B. Gelb = Baustellen). Nie als große Fläche, immer mit Text daneben.
     Text darauf: Weiß auf Blau/Lila/Grün/Orange, Tinte auf Gelb/Türkis. */
  --maie-blau: #1D4ED8;         /* Kontrast Weiß 8,6:1 */
  --maie-gelb: #FBBF24;         /* Tinte darauf 11:1 */
  --maie-gruen: #15803D;        /* Weiß darauf 5,0:1 */
  --maie-lila: #6D28D9;         /* Weiß darauf 7,2:1 */
  --maie-orange: #C2410C;       /* Weiß darauf 5,1:1 */
  --maie-tuerkis: #0F766E;      /* Weiß darauf 5,5:1 */
  --maie-whatsapp: #25D366;     /* Markenfarbe nur für das WhatsApp-Kanal-Icon */

  /* Mengenverhältnis pro Ansicht (Richtwert): 70 % Weiß · 18 % Nebel · 9 % Tinte · 3 % Rot */

  /* Typografie · Plus Jakarta Sans (Display, Light/Regular) + Inter (Text/UI) */
  --maie-font-display: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  --maie-font-text: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --maie-font-mono: "JetBrains Mono", ui-monospace, monospace;   /* Zeiten, IDs, Protokoll */

  --maie-display-xl: 300 clamp(48px, 8vw, 104px)/1 var(--maie-font-display);   /* Hero · -0.045em */
  --maie-display-l:  300 clamp(36px, 5vw, 60px)/1.05 var(--maie-font-display); /* Abschnitt · -0.035em */
  --maie-heading:    400 34px/1.1 var(--maie-font-display);                     /* Seitentitel · -0.025em */
  --maie-card-title: 400 24px/1.2 var(--maie-font-display);                     /* Kartentitel · -0.02em */
  --maie-kpi:        300 36px/1 var(--maie-font-display);                       /* Kennzahl · -0.02em · tabular-nums */
  --maie-lead:       400 clamp(18px, 2vw, 22px)/1.5 var(--maie-font-text);
  --maie-body:       400 16px/1.6 var(--maie-font-text);
  --maie-ui:         500 14px/1.4 var(--maie-font-text);
  --maie-small:      400 13px/1.5 var(--maie-font-text);
  --maie-micro:      500 11px/1.4 var(--maie-font-text);

  /* Betontes Wort in Headlines: Regular statt Light, Farbe Akzent. Kein Kursiv mehr (Entscheidung Runde 2). */

  /* Abstände · 8er-Raster */
  --maie-s-1: 4px;  --maie-s-2: 8px;  --maie-s-3: 12px; --maie-s-4: 16px;
  --maie-s-5: 20px; --maie-s-6: 24px; --maie-s-8: 32px; --maie-s-10: 40px;
  --maie-s-12: 48px; --maie-s-16: 64px; --maie-s-section: clamp(96px, 10vw, 136px);

  /* Radien */
  --maie-r-input: 12px;
  --maie-r-chip: 999px;        /* Buttons, Chips, Status */
  --maie-r-card: 20px;
  --maie-r-panel: 24px;        /* Panels in Jarvis */
  --maie-r-frame: 28px;        /* große Rahmen, Hero-Vorschau */
  --maie-r-hero: 32px;
  --maie-r-tile: 48px;         /* Logo-Kachel, App-Icon */

  /* Schatten · nur schwebende Karten, nie hart */
  --maie-shadow-card: 0 1px 2px rgba(17,17,19,.04), 0 12px 32px rgba(17,17,19,.06);
  --maie-shadow-float: 0 16px 40px rgba(17,17,19,.12);
  --maie-shadow-deep: 0 30px 80px rgba(17,17,19,.10);
  --maie-glow-accent: 0 20px 60px color-mix(in srgb, var(--maie-accent) 35%, transparent);

  /* Maße */
  --maie-nav-h: 68px;
  --maie-touch: 44px;          /* Mindesthöhe klickbarer Elemente */
  --maie-btn: 48px;            /* Standard-Button */
  --maie-btn-sm: 40px;
  --maie-btn-lg: 56px;
  --maie-content-max: 1180px;
  --maie-sidebar-w: 232px;
  --maie-jarvis-bar-w: 760px;
  --maie-drawer-w: 420px;
}

/* Dunkle Flächen (DSGVO-Abschnitt, Kennzahlen, Jarvis-Schublade): Text weiß, Nebentext grey-soft */
.maie-dark {
  background: var(--maie-ink);
  color: var(--maie-white);
  --maie-grey: var(--maie-grey-soft);
  --maie-mist: var(--maie-ink-2);
  --maie-line: #3F3F46;
}

/* Grundsätze, die Code und Review prüfen:
   1. Rot nur auf der wichtigsten Aktion einer Ansicht, einem betonten Wort, Live-Zuständen und Hinweisen.
      Nie als Fläche, nie für Fehler-Panik (Fehler = warn + Text).
   2. Verläufe nur als weicher Lichtschimmer im Hintergrund (radial, 16–28 % Akzent, blur 20–30px), nie auf Text oder Buttons.
   3. Keine Emoji als UI-Glyphen. Icons: Lucide-Stil, Stroke 1.8, abgerundet.
   4. Text ≥ 4,5:1, auch 11-px-Labels. Grau #5C5C66 ist die hellste erlaubte Textfarbe auf Weiß.
   5. Echte Elemente: <button>, <a href>, <input> + <label>. aria-label auf Icon-Buttons.
   6. Phone-Breite: Menüs stapeln, Toolbars umbrechen, breite Tabellen scrollen in einer Box. */