/* zerolog Monitoring — Design-Tokens.
 *
 * Einzige Quelle für Farbe, Schrift, Abstand, Radius, Schatten, Bewegung und Fokus.
 * Komponenten-CSS verwendet nur var(--…); ein roher Hex-Wert ausserhalb dieser Datei ist ein Fehler.
 * Spezifikation und Begründungen: design-system/zerolog-monitoring/MASTER.md.
 * Kontraste werden von tools/contrast_check.py direkt aus dieser Datei gerechnet — Werte hier
 * ändern heisst das Skript laufen lassen. Die Marker "@theme light" / "@theme dark" braucht der Parser.
 *
 * Markenregel aus dem ZL-Zeichen: Violett ist Licht, nicht Farbe. Es erscheint nur als Schein
 * (--glow-*), nie als Fläche hinter Text, nie als Knopf- oder Fliesstextfarbe.
 */

/* ---------- Schriften (selbst gehostet, Lizenzen in ../fonts/licenses/) ---------- */

@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-latin-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  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: "Barlow";
  src: url("../fonts/barlow-latin-ext-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-latin-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  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: "Barlow";
  src: url("../fonts/barlow-latin-ext-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-latin-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  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: "Barlow";
  src: url("../fonts/barlow-latin-ext-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-latin-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  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: "Geist Mono";
  src: url("../fonts/geist-mono-latin-ext-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-cyrillic-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* @theme light */
:root {
  color-scheme: light dark;

  /* ---------- Primitiv: aus dem ZL-Zeichen ---------- */
  --zl-tile-top: #050507;
  --zl-tile-foot: #332d4a;
  --zl-light: #8f7ac9;
  --zl-mark: #e9e9ee;
  --zl-paper: #f2f2f0;

  /* Primitiv: Neutrale Stufen. Dunkel gemessen auf #050507, hell auf #f2f2f0 (MASTER.md §Kontrast). */
  --n-0: #ffffff;
  --n-50: #f2f2f0;
  --n-100: #e8e8e5;
  --n-200: #d4d4d0;
  --n-400: #85858c;
  --n-500: #63636b;
  --n-600: #55555e;
  --n-800: #22222a;
  --n-900: #15151a;
  --d-950: #050507;
  --d-900: #0e0e13;
  --d-850: #16161d;
  --d-700: #2a2a33;
  --d-600: #6b6b75;
  --d-400: #8e8e97;
  --d-300: #a3a3ab;
  --d-100: #e9e9ee;

  /* Primitiv: Statusfarben. Jede Stufe hat eine Hell- und eine Dunkelvariante. */
  --green-700: #1d6b44;  --green-300: #72c79a;
  --amber-700: #8a5700;  --amber-300: #e6b450;
  --red-700: #b42318;    --red-300: #ff7a66;
  --teal-700: #0f6660;   --teal-300: #62c2bb;
  --grey-700: #5d5d66;   --grey-300: #9a9aa3;
  --violet-700: #6a55a8; --violet-300: #8f7ac9;

  /* Primitiv: Statusflächen (Farbe zu ~12 % in den Grund gemischt, vorgerechnet für die Prüfung). */
  --green-tint-l: #dfe9e2;  --green-tint-d: #111b17;
  --amber-tint-l: #ece3d3;  --amber-tint-d: #1f1a0f;
  --red-tint-l: #f1dcd9;    --red-tint-d: #25110f;
  --teal-tint-l: #dde7e5;   --teal-tint-d: #0f1b1b;
  --grey-tint-l: #e7e7e6;   --grey-tint-d: #16161a;

  /* ---------- Semantik: hell ---------- */
  --bg: var(--n-50);
  --bg-raised: var(--n-0);
  --bg-sunken: var(--n-100);
  --text: var(--n-900);
  --text-muted: var(--n-600);   /* Sekundärtext, 6,6:1 */
  --text-dim: var(--n-500);     /* kleinster erlaubter Textton, 5,3:1 */
  --rule: var(--n-200);         /* Haarlinie, trennt nur, trägt keine Information */
  --rule-strong: var(--n-400);  /* Rahmen von Eingaben und Bedienelementen, ≥ 3:1 */
  --link: var(--n-900);
  --link-underline: var(--n-400);
  --selection-bg: var(--n-900);
  --selection-fg: var(--n-50);
  --glow: var(--violet-700);
  --glow-strength: 0.10;
  --dot-grid: var(--n-200);

  --accent: var(--n-900);       /* Primärknopf: Tinte auf Papier, invertiert */
  --on-accent: var(--n-50);

  --st-ok: var(--green-700);           --st-ok-bg: var(--green-tint-l);
  --st-suspected: var(--amber-700);    --st-suspected-bg: var(--amber-tint-l);
  --st-outage: var(--red-700);         --st-outage-bg: var(--red-tint-l);
  --st-resolved: var(--teal-700);      --st-resolved-bg: var(--teal-tint-l);
  --st-expired: var(--teal-700);       --st-expired-bg: var(--teal-tint-l);
  --st-no-data: var(--grey-700);       --st-no-data-bg: var(--grey-tint-l);
  --st-stale: var(--grey-700);         --st-stale-bg: var(--grey-tint-l);

  --danger: var(--red-700);            /* Formularfehler, Löschen */
  --danger-bg: var(--red-tint-l);
  --success: var(--green-700);
  --success-bg: var(--green-tint-l);

  /* Karte: Flächen brauchen ≥ 3:1 zum Grund, keine Region nur über Farbe unterscheidbar (Muster + Liste). */
  --map-land: var(--n-100);
  --map-border: #75757d;
  --map-ok: #3d7a59;
  --map-suspected: #9a6608;
  --map-outage: var(--red-700);
  --map-no-data: var(--n-100);
  --map-no-data-hatch: #75757d;

  --shadow-overlay: 0 12px 32px -12px rgb(21 21 26 / 0.22), 0 2px 6px -2px rgb(21 21 26 / 0.12);
}

/* @theme dark */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--d-950);
    --bg-raised: var(--d-900);
    --bg-sunken: var(--d-850);
    --text: var(--d-100);
    --text-muted: var(--d-300);   /* 8,1:1 */
    --text-dim: var(--d-400);     /* 6,3:1 — nie dunkler (gemessene Falle: 38–44 % Weiss ergab 3,3:1) */
    --rule: var(--d-700);
    --rule-strong: var(--d-600);
    --link: var(--d-100);
    --link-underline: var(--d-600);
    --selection-bg: var(--d-100);
    --selection-fg: var(--d-950);
    --glow: var(--violet-300);
    --glow-strength: 0.16;
    --dot-grid: var(--d-700);

    --accent: var(--d-100);
    --on-accent: var(--d-950);

    --st-ok: var(--green-300);           --st-ok-bg: var(--green-tint-d);
    --st-suspected: var(--amber-300);    --st-suspected-bg: var(--amber-tint-d);
    --st-outage: var(--red-300);         --st-outage-bg: var(--red-tint-d);
    --st-resolved: var(--teal-300);      --st-resolved-bg: var(--teal-tint-d);
    --st-expired: var(--teal-300);       --st-expired-bg: var(--teal-tint-d);
    --st-no-data: var(--grey-300);       --st-no-data-bg: var(--grey-tint-d);
    --st-stale: var(--grey-300);         --st-stale-bg: var(--grey-tint-d);

    --danger: var(--red-300);
    --danger-bg: var(--red-tint-d);
    --success: var(--green-300);
    --success-bg: var(--green-tint-d);

    --map-land: var(--d-850);
    --map-border: var(--d-600);
    --map-ok: #3f7a5c;
    --map-suspected: var(--amber-300);
    --map-outage: var(--red-300);
    --map-no-data: var(--d-850);
    --map-no-data-hatch: var(--d-600);

    --shadow-overlay: 0 16px 40px -12px rgb(0 0 0 / 0.7), 0 0 0 1px var(--d-700);
  }
}
/* @theme end */

:root {
  /* ---------- Semantik: Website- und Netzzustände sind Aliase, keine neuen Farben ---------- */
  --st-up: var(--st-ok);               --st-up-bg: var(--st-ok-bg);
  --st-slow: var(--st-suspected);      --st-slow-bg: var(--st-suspected-bg);
  --st-down: var(--st-outage);         --st-down-bg: var(--st-outage-bg);
  --st-unknown: var(--st-no-data);     --st-unknown-bg: var(--st-no-data-bg);
  --st-paused: var(--st-no-data);      --st-paused-bg: var(--st-no-data-bg);
  --net-minor: var(--st-suspected);
  --net-major: var(--st-outage);
  --net-outage: var(--st-outage);

  /* ---------- Schrift ---------- */
  --font-sans: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Skala 1,2 für Bedienteile; nur die Titelstufen wachsen fluid. 17 px Grundschrift, weil Barlow schmal läuft. */
  --fs-xs: 0.8125rem;   /* 13 px — nur Mono-Messwerte in Tabellen, nie Fliesstext */
  --fs-sm: 0.9375rem;   /* 15 px — Metazeilen, Hilfetexte */
  --fs-base: 1.0625rem; /* 17 px — Fliesstext, Eingaben, Knöpfe */
  --fs-md: 1.25rem;     /* 20 px — h3, Zustandswort in der Statuszeile */
  --fs-lg: 1.5rem;      /* 24 px — h2 */
  --fs-xl: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);   /* h1 Unterseiten */
  --fs-2xl: clamp(2.125rem, 1.4rem + 3.4vw, 3.75rem); /* h1 Start */
  --fs-3xl: clamp(2.5rem, 1.5rem + 5vw, 5.25rem);     /* h1 /monitors */

  --lh-tight: 1.08;   /* Display */
  --lh-head: 1.2;
  --lh-body: 1.45;
  --lh-ui: 1.3;       /* einzeilige Bedienteile */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --tracking-display: -0.022em;
  --tracking-head: -0.01em;
  --tracking-body: 0;
  --tracking-caps: 0.06em;   /* nur falls Versalien je nötig: Kürzel wie HTTP, TLS */

  --measure: 68ch;           /* Fliesstext */
  --measure-narrow: 44ch;    /* Formular-Hilfetexte, Leerzustände */

  /* ---------- Abstand: Quinte auf 1rem (aus der Marken-DNA) ---------- */
  --space-0: 0;
  --space-2xs: 0.25rem;  /* 4 px  Icon ↔ Wort */
  --space-1: 0.375rem;   /* 6 px */
  --space-2: 0.75rem;    /* 12 px */
  --space-3: 1.125rem;   /* 18 px */
  --space-4: 1.75rem;    /* 28 px */
  --space-5: 2.75rem;    /* 44 px — Mindesthöhe Tippziel */
  --space-6: 4.25rem;    /* 68 px */
  --space-7: 6.75rem;    /* 108 px */
  --space-8: 10.5rem;    /* 168 px */

  --page-pad: 1rem;      /* 16 px Seitenrand mobil (Vorgabe) */
  --page-max: 72rem;     /* 1152 px Blatt */
  --gutter: 1rem;
  --header-h: 3.5rem;
  --target-min: 2.75rem; /* 44 px */

  /* ---------- Form ---------- */
  --radius-none: 0;
  --radius-tile: 22.1%;  /* nur Zustands-Glyphe und Badge-Enden: die Kachelform des Zeichens */
  --hairline: 1px;
  --border-control: 1px;
  --border-control-invalid: 2px; /* Fehlerrahmen: Breite trägt die Botschaft mit, nicht nur die Farbe */
  --stroke-icon: 1.5px;  /* 24er Raster, runde Enden und Ecken */
  --dash-unconfirmed: 3 3; /* SVG stroke-dasharray für «Verdacht» und «Vermutlich behoben» */

  /* ---------- Tiefe: die Marke kennt keine Schatten; einzig schwebende Ebenen bekommen einen ---------- */
  --shadow-none: none;

  /* ---------- Bewegung: kurz, eigene Kurve, unterbrechbar ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-instant: 80ms;
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --dur-glow: 1200ms;   /* einmaliges Aufleuchten des Scheins nach einem frischen Lauf */

  /* ---------- Fokus ---------- */
  --focus-width: 2px;
  --focus-offset: 2px;
  --focus-color: var(--text);
  --focus-ring: var(--focus-width) solid var(--focus-color);

  /* ---------- Ebenen ---------- */
  --z-map: 1;
  --z-sticky: 10;
  --z-popover: 30;
  --z-toast: 40;

  /* ---------- Komponenten ---------- */
  --btn-height: var(--target-min);
  --btn-pad-x: var(--space-3);
  --btn-font: var(--fw-medium) var(--fs-base) / var(--lh-ui) var(--font-sans);
  --btn-primary-bg: var(--accent);
  --btn-primary-fg: var(--on-accent);
  --btn-secondary-bg: transparent;
  --btn-secondary-fg: var(--text);
  --btn-secondary-border: var(--text);
  --btn-danger-fg: var(--danger);
  --btn-danger-border: var(--danger);

  /* Uptime-Strichcode (§8.12): Balken 3 px, Abstand 2 px, 34 px hoch; Tag ohne Prüfung nur Umriss */
  --uptime-bar-w: 3px;
  --uptime-bar-gap: 2px;
  --uptime-bar-h: 34px;
  --uptime-ok: var(--st-up);
  --uptime-partial: var(--st-slow);
  --uptime-down: var(--st-down);
  --uptime-none: var(--rule-strong);

  --input-height: var(--target-min);
  --input-bg: var(--bg-raised);
  --input-fg: var(--text);
  --input-border: var(--rule-strong);
  --input-border-hover: var(--text-muted);
  --input-border-invalid: var(--danger);
  --input-placeholder: var(--text-dim);

  --seg-bg: var(--bg-sunken);
  --seg-fg: var(--text-muted);
  --seg-selected-bg: var(--text);
  --seg-selected-fg: var(--bg);

  --glyph-size: 1.25rem;        /* Zustandszeichen in Zeilen */
  --glyph-size-lg: 2rem;        /* Zustandszeichen in der Statuszeile oben */
  --statusline-bg: var(--bg-raised);

  --badge-height: 20px;
  --badge-font: 600 11px/20px "Barlow", Verdana, sans-serif; /* SVG ohne Webfont: Verdana-Metrik als Rechengrundlage */

  --glow-layer: radial-gradient(72% 46% at 50% 104%,
      color-mix(in oklab, var(--glow) calc(var(--glow-strength) * 100%), transparent) 0%,
      transparent 70%);
}

@media (min-width: 48em) {
  :root { --page-pad: clamp(1.5rem, 4vw, 3rem); --gutter: 1.5rem; --header-h: 4rem; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-glow: 0ms; }
}

@media (forced-colors: active) {
  /* Systemfarben übernehmen; Zustand bleibt über Zeichen und Wort lesbar. */
  :root { --focus-color: Highlight; --rule-strong: CanvasText; }
}