/* ==========================================================================
   NØDE.ops — NOC/Ops-Terminal Theme  ·  Design-Tokens
   --------------------------------------------------------------------------
   Dunkles Rechenzentrums-Ops-Theme. Der Grundton ist near-black/techy
   (Hacking/NOC-Stimmung), die Signatur-Akzente tragen die Marken-DNA eines
   Berliner RZ-/Cloud-Anbieters — UNVERKENNBAR, aber ohne Namensnennung:

     · GOLD-ORANGE  #d19429  — die Signaturfarbe (Logo-Ton + deren eigenes
                               --accent). Auf Dunkel ein warmer Amber-Glow.
     · SKY-BLUE     #67b0d1  — der Marken-Blauton aus deren Bildwelt/Akzenten.

   Farben objektiv aus der Firmen-Website extrahiert (Stylesheet-Introspektion
   + Logo-Pixel-Sampling im Browser). Provenienz & Mapping: docs/PALETTE.md.

   Fonts werden SELBST GEHOSTET (public/fonts/, @font-face) — kein CDN (DSGVO).
   Die Stacks unten haben robuste System-Fallbacks, bis die Webfonts liegen —
   die Tokens funktionieren also standalone.

   Nutzung: nur Tokens referenzieren (var(--…)), keine Hex im Markup.
   ========================================================================== */

/* ---- Selbst-gehostete Webfonts (public/fonts/, latin-Subset, kein CDN · DSGVO) --- */
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/chakra-petch-600.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/chakra-petch-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/ibm-plex-mono-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/inter-600.woff2") format("woff2"); }

:root {
  /* ---- Typografie ---------------------------------------------------------
     --disp : Display/Headlines/HUD-Labels (technisch, kantig)
     --mono : Konsole, Zahlen, Hostnamen, Rack-Elevation
     --body : Fließtext                                                       */
  --disp: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---- Marken-DNA (Signatur-Akzente) --------------------------------------
     Diese Töne sind die Wiedererkennung. Sparsam & prominent einsetzen:
     Gold = Geld/Credits/CTA/Highlights · Blau = Struktur/Fokus/aktive States. */
  --brand:        #67b0d1;  /* Marken-Sky-Blue — Signatur-Blau (site: rgb 103,176,209) */
  --brand-deep:   #2559a7;  /* Marken-Royal-Blue — Tiefe/Verläufe (rgb 37,89,167)      */
  --brand-ink:    #2f4d5a;  /* Marken-Teal-Navy — dezenter Blau-Stich in Flächen        */
  --accent:       #d19429;  /* Marken-Gold-Orange — DIE Signatur (Logo + deren --accent) */
  --accent-hot:   #ff8d00;  /* helles Marken-Orange — CTA-Hover / heißer State (rgb 255,141,0) */
  --accent-burnt: #db4800;  /* Marken-Burnt-Orange — Alarm/kritisch (rgb 219,72,0)       */

  /* ---- Flächen (kühl-schwarzer Ramp, feiner Navy-Stich) -------------------
     Setzt das Marken-Blau optisch auf; von tief nach hell.                   */
  --bg:      #0b0e13;  /* App-Grund                                            */
  --bg2:     #080a0f;  /* tiefste Ebene — Terminal, Insets, Rack-Schacht       */
  --panel:   #141a25;  /* Panel-Oberfläche (Navy-getönt, echot site #1f1f2b)   */
  --panel2:  #10141d;  /* Panel-Verlaufsboden / verschachtelte Cards           */
  --rail:    #243444;  /* Rahmen & Trenner — Steel-Navy, an --brand gekoppelt  */

  /* ---- Status-/Funktions-Töne --------------------------------------------- */
  --cyan:    #57c8e6;  /* Info / Storage / Terminal-Echo — helle Schwester des Marken-Blau */
  --green:   #18d26e;  /* online / Erfolg / LED — Marken-Grün der site (rgb 24,210,110)     */
  --red:     #ff5555;  /* Gefahr / eingehender Angriff / Fehler                              */
  --amber:   #f5a524;  /* Strom / Watt — heller Warm-Schritt über dem Marken-Gold            */
  --violet:  #a78bfa;  /* Gegner-AI / Bandbreite — der eine bewusst markenfremde Funktionston */

  /* ---- Text --------------------------------------------------------------- */
  --txt:     #e6ecf3;  /* Primärtext — kühles Fast-Weiß                         */
  --muted:   #7f89a1;  /* Sekundär — Marken-Blaugrau der site (rgb 127,137,161) */
  --dim:     #4b5568;  /* Tertiär / Labels / Timestamps — kühler Slate          */

  /* ---- RGB-Tupel (für rgba()-Tints: Chips, Glows, Badges) ------------------ */
  --brand-rgb:  103, 176, 209;
  --accent-rgb: 209, 148, 41;
  --cyan-rgb:   87, 200, 230;
  --green-rgb:  24, 210, 110;
  --red-rgb:    255, 85, 85;
  --amber-rgb:  245, 165, 36;
  --violet-rgb: 167, 139, 250;

  /* ---- Effekte: Glows, Fokus, Schatten ------------------------------------ */
  --glow-brand:  0 0 12px rgba(var(--brand-rgb),  .45);
  --glow-accent: 0 0 12px rgba(var(--accent-rgb), .40);
  --glow-green:  0 0  8px rgba(var(--green-rgb),  .60);
  --glow-red:    0 0  8px rgba(var(--red-rgb),    .55);
  --ring:        0 0 0 2px rgba(var(--brand-rgb), .55);  /* Fokus-Ring (Tastatur) */
  --shadow-panel: 0 6px 24px rgba(0, 0, 0, .45);
  --shadow-soft:  0 2px 10px rgba(0, 0, 0, .35);

  /* ---- Verläufe ----------------------------------------------------------- */
  --grad-panel:  linear-gradient(180deg, var(--panel), var(--panel2));
  --grad-brand:  linear-gradient(135deg, var(--brand), var(--brand-deep));
  --grad-accent: linear-gradient(135deg, var(--accent), var(--accent-hot));
  /* App-Hintergrund: kühler Navy-Schein oben-rechts (Marken-Blau) trifft
     warmen Gold-Schein unten-links (Marken-Orange) — die DNA im Grund. */
  --grad-bg:
    radial-gradient(1100px 600px at 82% -10%, #0f1a26 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 110%, #1a1206 0%, transparent 55%),
    var(--bg);

  /* ---- Radien & Rhythmus -------------------------------------------------- */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
  --r-pill: 50rem;
}