/* assets/tokens.css — Design-Tokens (eigenes System, dezente Mycel-Akzente). */

:root {
  /* Markenfarbe: ruhiges Teal/Smaragd — eigenständig, mit organischem Anklang. */
  --accent: #0f766e;
  --accent-strong: #0b5a54;
  --accent-soft: #ccfbf1;

  /* Neutrale Flächen (Hell) */
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #eef1f4;
  --border: #d9dee5;
  --text: #15202b;
  --text-muted: #5b6775;

  /* Status */
  --warn-bg: #fff7ed;
  --warn-border: #fdba74;
  --warn-text: #9a3412;
  --critical-bg: #fef2f2;
  --critical-border: #fca5a5;
  --critical-text: #991b1b;
  --error: #dc2626;

  /* Form & Bewegung */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .08);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .08);
  --space: 16px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --motion: 160ms cubic-bezier(.2, .7, .3, 1);
  /* Inhalts-Maximalbreite. Auf großen Monitoren wirkte 880px „nicht in voller
     Breite" — auf 1200px erweitert (mehr Platz für Tabellen/Formulare, bleibt
     zentriert und lesbar). Die Kopfzeile spannt weiterhin randlos. */
  --maxw: 1200px;
}

:root[data-theme="dark"] {
  --accent: #2dd4bf;
  --accent-strong: #5eead4;
  --accent-soft: #134e4a;

  --bg: #0b1120;
  --surface: #111a2e;
  --surface-2: #16223b;
  --border: #25324c;
  --text: #e7edf5;
  --text-muted: #93a1b5;

  --warn-bg: #2a1f12;
  --warn-border: #b45309;
  --warn-text: #fcd9a8;
  --critical-bg: #2a1316;
  --critical-border: #b91c1c;
  --critical-text: #fecaca;
  --error: #f87171;

  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .5);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion: 1ms linear; }
}