/* ==================== Fonts ==================== */
/* Self-hosted (PWA muss offline funktionieren — kein Google-Fonts-CDN-Request).
   Chakra Petch: Text und Überschriften. JetBrains Mono: Zahlen, Labels, Einheiten.
   Latin-Subsets aus dem Style Guide, SIL OFL 1.1 (Lizenztexte in assets/fonts/). */
@font-face {
  font-family: "Chakra Petch";
  src: url("../assets/fonts/chakra-petch-500.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Chakra Petch";
  src: url("../assets/fonts/chakra-petch-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Chakra Petch";
  src: url("../assets/fonts/chakra-petch-700.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}
/* Bruno Ace SC: nur für den Schriftzug "VISION" (Latin-Basis, Großbuchstaben) */
@font-face {
  font-family: "Bruno Ace SC";
  src: url("../assets/fonts/bruno-ace-sc.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/jetbrains-mono-variable.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* ==================== Design Tokens ==================== */
:root {
  --bg-panel-soft: #0a0c0c;
  /* Akzent: Icon-Grün aus MaSeL Vision (Style Guide) statt Cyan #3ae4ff */
  --accent-rgb: 89, 255, 217;
  --accent: #59ffd9;
  --accent-soft: rgba(var(--accent-rgb), 0.25);
  --accent-strong: rgba(var(--accent-rgb), 0.9);
  --accent-coral: #f04869;

  /* Kategorie-Farben: nur noch als Kennung (Strich unter dem Icon, Legenden-Raute) */
  --cat-image:  #00bfff;
  --cat-power:  #ff8c00;
  --cat-signal: #00f2a9;
  --cat-light:  #a56bff;
  --cat-audio:  #ff416c;
  --text: #f5f6fb;
  --muted: #c2c7dd;
  --muted-soft: #9ca1ba;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --error: #ff4b6e;
  --error-soft: rgba(255, 75, 110, 0.2);
  --focus-ring: 0 0 0 2px rgba(var(--accent-rgb), 0.5);
  --font: "Chakra Petch", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-brand: "Bruno Ace SC", var(--font);

  /* === Radius ===
     Durchgängig eckig statt gleichmäßig rund: eine Ecke betont (weicher
     Akzent), die anderen drei fast/ganz eckig. Gleiche "Cut Corner"-
     Formensprache für Panels, Hero, Strips, Inputs und Buttons — statt
     überall identischer Vollrundung. */
  --radius-card:      6px 24px 6px 6px;
  --radius-hero:      8px 28px 8px 8px;
  --radius-strip:     4px 18px 4px 4px;
  --radius-input:     2px 10px 2px 2px;
  --radius-pill:      4px 14px 4px 14px;

  /* === Panel-Flächen (vormals Glassmorphism — jetzt blickdicht, kein Blur) === */
  --glass-bg-soft:    rgba(10, 13, 13, 0.92);
  --glass-bg:         rgba(10, 13, 13, 0.97);
  --glass-bg-strong:  rgba(9, 11, 11, 0.99);
  --glass-border:     rgba(255, 255, 255, 0.10);
  --glass-blur:       none;
}