/* Leger Portal — Design Tokens
   Quelle der Wahrheit: Leger Brand Spec
   Mint + Violett, Inter + JetBrains Mono, 4px-Grid
   ============================================================= */

:root,
[data-theme="light"] {
  /* ── Surface & text ── */
  --background:         0 0% 100%;       /* #FFFFFF */
  --foreground:         220 20% 10%;     /* #14181F */
  --card:               0 0% 98%;        /* #FAFAFA */
  --card-foreground:    220 20% 10%;
  --subtle:             220 14% 96%;     /* #F3F4F6 */
  --subtle-foreground:  220 10% 40%;     /* #5C6370 */

  /* ── Markenfarben ──
     Verteilung: Violett verankert (Marke, Struktur), Mint bewegt (Aktion, Status). */
  --purple:             277 50% 35%;     /* #642D87 — Primary, Logo-Violett */
  --purple-soft:        277 60% 96%;     /* #EFE7F5 */
  --purple-foreground:  0 0% 100%;

  --mint:               166 100% 36%;    /* #00B893 — Accent, CTA, Aktion */
  --mint-soft:          166 70% 94%;     /* #DBF5EE */
  --mint-glow:          161 100% 44%;    /* #00E0A8 */
  --mint-deep:          166 100% 23%;    /* #00755E — dunkles Mint (Akzent auf mint-soft) */
  --purple-deep:        277 50% 26%;     /* #4A2164 — dunkles Lila (Akzent auf purple-soft) */
  --mint-foreground:    0 0% 100%;
  /* TON-IN-TON-KANON (CEO 12.07.2026): Akzente nur innerhalb der Farbfamilie —
     mint-deep↔mint-soft, purple-soft↔purple/purple-deep. Mint und Violett NIE
     kreuzen (kein Mint-Text/-Button/-Icon auf Lila und umgekehrt). Neutrale
     (Weiß/#14181F/Grau) überall erlaubt. Details: brand/color-system.md */

  /* Alias für Rückwärtskompatibilität */
  /* Rollen: Violett = Primary (Marke), Mint = Accent (Aktion) */
  --primary:            var(--purple);
  --primary-foreground: var(--purple-foreground);
  --accent:             var(--mint);
  --accent-foreground:  var(--mint-foreground);

  --ring:               var(--mint);      /* Fokus leuchtet in Mint */

  /* ── Semantik (Standard) ── */
  --success:            152 62% 40%;     /* #26A568 */
  --success-soft:       152 55% 94%;     /* #DCEFE3 */
  --success-foreground: 0 0% 100%;
  --warning:            38 92% 50%;      /* #F59E0B */
  --warning-soft:       38 100% 94%;     /* #FEF2DD */
  --warning-foreground: 220 20% 10%;
  --danger:             0 72% 51%;       /* #DC2626 */
  --danger-soft:        0 85% 96%;       /* #FEE5E5 */
  --danger-foreground:  0 0% 100%;
  --info:               210 85% 50%;     /* #1D7FED */
  --info-soft:          210 90% 96%;     /* #DDEBFB */
  --info-foreground:    0 0% 100%;

  /* Alias */
  --destructive:        var(--danger);
  --destructive-foreground: var(--danger-foreground);

  /* ── Anlagenbau-Status (domain-spezifisch) ── */
  --status-active:      var(--success);       /* Aktiv — läuft im Soll */
  --status-maintenance: var(--info);           /* Wartung — geplante Ausfallzeit */
  --status-fault:       var(--danger);         /* Störung — akuter Eingriff nötig */
  --status-standby:     220 10% 60%;          /* #8F96A3 — Stillstand / Ruhe */

  /* ── Neutrale Grautöne ── */
  --border:             220 14% 90%;     /* #E2E4E9 */
  --border-strong:      220 14% 80%;     /* #C6CAD0 */

  /* Alias für Rückwärtskompatibilität */
  --muted:              var(--subtle);
  --muted-foreground:   var(--subtle-foreground);
}

[data-theme="dark"] {
  --background:         220 20% 6%;      /* #0C0E12 */
  --foreground:         0 0% 95%;        /* #F2F2F2 */
  --card:               220 20% 9%;      /* #12151C */
  --card-foreground:    0 0% 95%;
  --subtle:             220 16% 14%;     /* #1E2229 */
  --subtle-foreground:  220 10% 60%;     /* #8F96A3 */

  --mint:               166 90% 42%;     /* heller auf Dark */
  --mint-soft:          166 60% 14%;
  --mint-glow:          161 100% 48%;
  --mint-foreground:    0 0% 100%;

  --purple:             277 55% 62%;     /* heller auf Dark, Logo-Violett wirkt sonst matt */
  --purple-soft:        277 40% 16%;     /* #2A1B3A */

  --success:            152 55% 52%;
  --success-soft:       152 40% 14%;
  --warning:            38 85% 58%;
  --warning-soft:       38 50% 16%;
  --danger:             0 72% 58%;
  --danger-soft:        0 40% 18%;
  --info:               210 85% 60%;
  --info-soft:          210 50% 16%;

  --status-standby:     220 10% 50%;

  --border:             220 16% 16%;     /* #22272F */
  --border-strong:      220 16% 24%;
  --ring:               var(--purple);

  --muted:              var(--subtle);
  --muted-foreground:   var(--subtle-foreground);
}

:root {
  /* ── Typografie ── */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — feiner gestuft, 1.2× Ratio */
  --t-2xs:  11px;
  --t-xs:   12px;
  --t-sm:   14px;
  --t-base: 16px;
  --t-md:   18px;
  --t-lg:   20px;
  --t-xl:   24px;
  --t-2xl:  30px;
  --t-3xl:  38px;
  --t-4xl:  48px;
  --t-5xl:  64px;
  --t-6xl:  80px;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-tight:   -0.02em;
  --ls-display: -0.03em;
  --ls-normal:  0;
  --ls-wide:    0.08em;
  --ls-wider:   0.12em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* ── Spacing (4px-Grid) ── */
  --s-0:   0;
  --s-px:  1px;
  --s-0-5: 2px;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10:  128px;

  --gap-inline:      var(--s-2);
  --gap-stack:       var(--s-3);
  --gap-section-sm:  var(--s-6);
  --gap-section-md:  var(--s-7);
  --gap-section-lg:  var(--s-10);

  /* ── Radius ── */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 999px;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 2px hsl(220 20% 10% / 0.05);
  --shadow-sm:  0 1px 2px hsl(220 20% 10% / 0.04), 0 2px 4px hsl(220 20% 10% / 0.04);
  --shadow-md:  0 4px 12px hsl(220 20% 10% / 0.06), 0 12px 24px hsl(220 20% 10% / 0.06);
  --shadow-lg:  0 12px 24px hsl(220 20% 10% / 0.08), 0 24px 48px hsl(220 20% 10% / 0.08);
  --shadow-focus-mint:   0 0 0 3px hsl(var(--mint) / 0.25);
  --shadow-focus-purple: 0 0 0 3px hsl(var(--purple) / 0.25);

  /* ── Motion ── */
  --ease-out:  cubic-bezier(0.2, 0, 0, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --ease-io:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    120ms;
  --dur-normal:  220ms;
  --dur-slow:    400ms;

  /* ── Layout ── */
  --max-w: 1280px;
  --gutter: 24px;
}

/* ── Base reset ── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  transition: background-color var(--dur-normal) var(--ease-io),
              color var(--dur-normal) var(--ease-io);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Prose / Paragraph-Defaults ── */
.prose { max-width: 68ch; line-height: var(--lh-relaxed); color: hsl(var(--foreground)); }
.prose p { margin: 0 0 var(--s-4); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: var(--fw-semi); }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  background: hsl(var(--subtle));
  color: hsl(var(--mint));
}