/* SW tools -- Kleid, Basis fuer alle Sammlungen.
   Teil der Aenderungsschicht (siehe README.md in diesem Ordner): der Worker
   haengt diese Datei und /kleid/<sammlung>.css per HTMLRewriter in <head>
   ein; keine Datei einer Sammlung wird geaendert.
   Werte aus @sw-labs/ui v0.11.0, src/styles/tokens.css (dunkel). Eigene
   Namen mit Praefix --swk-, damit nichts mit den Variablen der Sammlungen
   kollidiert (CyberChef und Tailwind nutzen selbst --color-*). */

/* Schriften: Fontshare, ITF Free Font License; Selbsthosting fuer eigene
   Seiten erlaubt (Abschnitt 01). Nur fuer diese Seite, nicht unter
   /lizenzen/ als Download gelistet. */
@font-face {
  font-family: "Switzer";
  src: url("fonts/switzer-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("fonts/cabinet-grotesk-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --swk-bg: #121214;
  --swk-surface: #17171a;
  --swk-card: #1b1b1f;
  --swk-card-hover: #212126;
  --swk-border: #26262d;
  --swk-border-dim: #1e1e23;
  /* Zwischenstufe fuer Eingabefelder und Hover auf Flaechen: zwischen
     --color-card-hover und --color-border, kein eigener Token. */
  --swk-field: #1f1f24;
  --swk-text: #f0f0f2;
  --swk-text-muted: #b4b4bc;
  --swk-text-faint: #8a8a94;
  /* Amber nur an der Handlung: Primaerknopf, Fokus, aktive Auswahl. */
  --swk-accent: #f59e0b;
  --swk-accent-bright: #fbbf24;
  --swk-accent-dim: rgba(245, 158, 11, 0.15);
  --swk-accent-mid: rgba(245, 158, 11, 0.25);
  --swk-error: #f87171;
  --swk-success: #22c55e;
  --swk-btn-primary-bg: linear-gradient(180deg, #f6b33a 0%, #e7930c 100%);
  --swk-btn-primary-bg-hover: linear-gradient(180deg, #fac45d 0%, #f0a11a 100%);
  --swk-btn-primary-flat: #ef9f1f;
  --swk-btn-primary-border: rgba(255, 216, 138, 0.42);
  --swk-btn-primary-text: #120d04;
  --swk-btn-primary-shadow: 0 6px 14px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.24);
  --swk-btn-secondary-bg: linear-gradient(180deg, rgba(30, 31, 35, 0.96), rgba(20, 21, 24, 0.98));
  --swk-btn-secondary-bg-hover: linear-gradient(180deg, rgba(36, 37, 41, 0.98), rgba(23, 24, 27, 0.99));
  --swk-btn-secondary-border: rgba(255, 255, 255, 0.13);
  --swk-btn-secondary-border-hover: rgba(255, 255, 255, 0.26);
  --swk-btn-secondary-shadow: 0 6px 14px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.075);
  --swk-glass-border: rgba(255, 255, 255, 0.08);
  --swk-radius-sm: 4px;
  --swk-radius-md: 8px;
  --swk-radius-lg: 10px;
  --swk-radius-xl: 14px;
  --swk-font: "Switzer", Arial, sans-serif;
  --swk-font-display: "Cabinet Grotesk", Arial, sans-serif;
  --swk-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --swk-focus-ring: 0 0 0 2px rgba(245, 158, 11, 0.55);
  --swk-scrollbar: #2a2a30;
  --swk-scrollbar-hover: #3a3a40;
}

::selection {
  background: var(--swk-accent-mid);
  color: var(--swk-text);
}