/* PRISM Design-System
   Tokens sind die einzige Farbquelle. Komponenten greifen nie auf Farbwerte zu. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-variable.260c81a4759b.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;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("../fonts/jetbrains-mono-latin-variable.b058178d7f30.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;
}

:root {
  /* Neutrale Flaechen: eine gemeinsame Leiter */
  --surface-0: #0a0e14;
  --surface-1: #10151d;
  --surface-2: #161d27;
  --surface-3: #1e2733;
  --surface-4: #27323f;

  --border: #263141;
  --border-strong: #37455a;

  --text: #e8eef6;
  --text-2: #a3b1c4;
  --text-3: #6d7d92;

  /* Akzent: bestehendes Teal mit belastbarem Kontrast */
  --accent: #3ec9bd;
  --accent-hover: #5ad8cd;
  --accent-quiet: #17383a;
  --accent-on: #05201f;

  /* Status: Bedeutung, ruhige Flaeche und kraeftige Variante */
  --ok: #4fc98a;
  --ok-quiet: #14311f;
  --warn: #e8b155;
  --warn-quiet: #33260f;
  --crit: #f07a7a;
  --crit-quiet: #3a1a1c;
  --info: #6fa8e8;
  --info-quiet: #142338;

  /* Zusaetzliche Datenserien und physische Pfade */
  --data-purple: #8c7cf6;
  --data-cyan: #22d3ee;
  --data-magenta: #c084fc;
  --path-wan: #ff6f76;
  --path-ipmi: #818cf8;
  --path-trunk: #4bd59a;
  --path-management: #fbbf24;
  --path-ceph: #22d3ee;
  --path-virtual: #f0abfc;
  --path-stale: #94a3b8;

  /* Mass und Rhythmus */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  --sidebar-w: 304px;
  --sidebar-w-collapsed: 68px;
  --topbar-h: 56px;
  --content-max: 1680px;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 8px 24px -8px rgba(0, 0, 0, .6);
  --shadow-3: 0 20px 48px -12px rgba(0, 0, 0, .7);

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Kompatibilitaetsnamen fuer bestehende Komponenten. */
  --bg: var(--surface-0);
  --panel: var(--surface-2);
  --panel-2: var(--surface-3);
  --panel-strong: var(--surface-3);
  --background: var(--surface-0);
  --foreground: var(--text);
  --ink: var(--accent-on);
  --line: var(--border);
  --muted: var(--text-2);
  --accent-contrast: var(--accent-on);
  --accent-dark: var(--accent-quiet);
  --warning: var(--warn);
  --danger: var(--crit);
  --success: var(--ok);
  --body-glow: var(--info-quiet);
  --panel-gradient-a: color-mix(in srgb, var(--surface-3) 96%, transparent);
  --panel-gradient-b: color-mix(in srgb, var(--surface-2) 96%, transparent);
  --input-bg: var(--surface-0);
  --terminal-bg: var(--surface-0);
  --badge-bg: var(--surface-4);

  color-scheme: dark;
}

html[data-theme="light"] {
  --surface-0: #f4f7fa;
  --surface-1: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #eef3f8;
  --surface-4: #e2eaf3;

  --border: #d5dfea;
  --border-strong: #b6c5d6;

  --text: #14202e;
  --text-2: #4a5c72;
  --text-3: #75879c;

  --accent: #0d7d76;
  --accent-hover: #0a6862;
  --accent-quiet: #dcf1ef;
  --accent-on: #ffffff;

  --ok: #147a4c;
  --ok-quiet: #dbf2e5;
  --warn: #8a5a06;
  --warn-quiet: #fbeed3;
  --crit: #b23744;
  --crit-quiet: #fbe2e4;
  --info: #1f5fa8;
  --info-quiet: #dbe8f8;

  /* Datenreihen bleiben auch auf hellen Flächen deutlich unterscheidbar. */
  --data-purple: #5b4fc7;
  --data-cyan: #00758d;
  --data-magenta: #a92370;

  --shadow-1: 0 1px 2px rgba(20, 40, 70, .08);
  --shadow-2: 0 8px 24px -10px rgba(20, 40, 70, .18);
  --shadow-3: 0 20px 48px -14px rgba(20, 40, 70, .22);

  color-scheme: light;
}