/* byte & board — Design-Tokens.

   Farben und Schriften stammen aus dem Hausbestand, nicht aus einem Entwurf:
   byteandboard/bab-site/css/style.css, bab-admin_modul und wasch_modul führen
   dieselben Werte. Übernommen ist daraus das Hausblau; die Neonfarben und der
   dunkle Auftritt der Website bleiben bei der Website — hier wird stundenlang
   auf hellen Tabellen gelesen.

   Regeln, die man dieser Datei nicht ansieht (ausführlich: docs/ui-stil.md):
   · Blau = anfassen (Knöpfe, Links, Reiter) · Kupfer = hinsehen (Zustand)
   · --brand ist eine FLÄCHENfarbe: 2,49:1 auf Weiß, nie für Text
   · Für Text --brand-ink (6,17:1), für gefüllte Knöpfe --brand-fill (4,70:1)
*/

/* ── Schriften ──────────────────────────────────────────────────────────────
   Rajdhani + Inter sind die Hausschriften (dieselben woff2 wie bab-site).
   Inter gibt es im Hausbestand nur bis 600 — schwerer wird hier nichts.       */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300;
             font-display: swap; src: url("/static/fonts/inter-300.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400;
             font-display: swap; src: url("/static/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600;
             font-display: swap; src: url("/static/fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Rajdhani"; font-style: normal; font-weight: 500;
             font-display: swap; src: url("/static/fonts/rajdhani-500.woff2") format("woff2"); }
@font-face { font-family: "Rajdhani"; font-style: normal; font-weight: 700;
             font-display: swap; src: url("/static/fonts/rajdhani-700.woff2") format("woff2"); }
/* Einzige Nicht-Hausschrift, ausschließlich für Zahlenkolonnen und Kennungen.
   Variabel (100–800) — eine Datei genügt.                                     */
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800;
             font-display: swap; src: url("/static/fonts/jetbrainsmono-var.woff2") format("woff2"); }

:root {
  /* ── Flächen ───────────────────────────────────────────────────────────── */
  --bg:          #f1f3f7;
  --bg-deep:     #e8ebf1;
  --panel:       #ffffff;
  --panel-alt:   #f7f8fb;
  --sidebar-bg:  #ffffff;
  --topbar-bg:   #ffffff;

  /* ── Tinte ─────────────────────────────────────────────────────────────── */
  --ink:    #1a1f2b;
  --muted:  #5c6573;
  --faint:  #737e8e;          /* war #8893a3 — 3,11:1, unter AA */
  --border: #dfe2ea;

  /* ── Hausblau: Aktion ──────────────────────────────────────────────────────
     Eine Farbe in vier Stufen. Das reine #00e5ff ist auf Weiß mit 1,54:1
     unsichtbar und steht deshalb nur im Dunkelmodus.                          */
  --brand:       #0fb4cf;   /* Fläche: Linien, Balken, Reiter-Unterstrich (2,49:1 — nie Text) */
  --brand-fill:  #0a7f92;   /* gefüllte Knöpfe, weiße Schrift darauf: 4,70:1 */
  --brand-ink:   #076b7c;   /* Links und Text: 6,17:1 */
  --brand-dim:   #065c6b;   /* Hover auf gefüllt: 7,63:1 */
  --brand-soft:  rgba(15, 180, 207, 0.10);
  --brand-soft2: rgba(15, 180, 207, 0.22);

  /* Altnamen — die Templates kannten sie als *undefinierte* Variablen mit
     Fallback. Jetzt zeigen sie auf die Marke, statt zufällig zu wirken. */
  --signal:       var(--brand-ink);
  --signal-dim:   var(--brand-dim);
  --signal-soft:  var(--brand-soft);
  --signal-soft2: var(--brand-soft2);
  --primary:      var(--brand-ink);
  --accent:       var(--brand);

  /* ── Kupfer: Zustand ─────────────────────────────────────────────────────
     Die Signatur (Leiterbahn + Lötpunkt). War #b5742f — 3,82:1, unter AA.     */
  --copper:       #a8641f;
  --copper-soft:  rgba(168, 100, 31, 0.12);
  --copper-glow:  rgba(168, 100, 31, 0.35);

  --violet:       #6a3fc7;
  --violet-soft:  rgba(106, 63, 199, 0.10);

  /* ── Status ────────────────────────────────────────────────────────────── */
  --success:      #1e8a4e;  --success-soft: rgba(30, 138, 78, 0.10);
  --warning:      #a8641f;  --warning-soft: rgba(168, 100, 31, 0.10);
  --error:        #c62828;  --error-soft:   rgba(198, 40, 40, 0.10);
  --on-accent:    #ffffff;
  --good:         var(--success);   /* Altname aus den Templates */

  --row-hover:    #f2f7f9;
  --row-sel:      rgba(15, 180, 207, 0.13);

  /* ── Schriftrollen ─────────────────────────────────────────────────────── */
  --font-display: "Rajdhani", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", -apple-system, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* ── Maße ──────────────────────────────────────────────────────────────── */
  --radius:  8px;
  --radius-s: 5px;
  --line:    var(--border);        /* Altname aus den Templates */
  --card-bg: var(--panel);         /* Altname aus den Templates */
  --shadow:  0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --sidebar-w: 240px;

  /* Abstandsraster — ersetzt die freihändigen 22/18/14/12/10/6 der Templates */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
}

[data-theme="dark"] {
  --bg:          #0e1117;
  --bg-deep:     #090b10;
  --panel:       #161a23;
  --panel-alt:   #1a1f2a;
  --sidebar-bg:  #11141b;
  --topbar-bg:   #11141b;

  --ink:    #e6e9ef;
  --muted:  #9aa3b3;
  --faint:  #7d8899;
  --border: #2a3142;

  /* Im Dunkeln darf das Hausblau pur sein: #00e5ff erreicht hier 12,29:1. */
  --brand:       #00e5ff;
  --brand-fill:  #0a7f92;
  --brand-ink:   #3ed3ea;
  --brand-dim:   #0d9bb5;
  --brand-soft:  rgba(0, 229, 255, 0.13);
  --brand-soft2: rgba(0, 229, 255, 0.24);

  --copper:       #e0a368;
  --copper-soft:  rgba(224, 163, 104, 0.14);
  --copper-glow:  rgba(224, 163, 104, 0.40);

  --violet:       #a18cf0;
  --violet-soft:  rgba(161, 140, 240, 0.14);

  --success:      #5dd397;  --success-soft: rgba(93, 211, 151, 0.14);
  --warning:      #e0a368;  --warning-soft: rgba(224, 163, 104, 0.14);
  --error:        #ee6c6c;  --error-soft:   rgba(238, 108, 108, 0.14);

  --row-hover:    #1a1f2a;
  --row-sel:      rgba(0, 229, 255, 0.14);
  --shadow:  0 1px 2px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.40);
}

/* ── Dichte ──────────────────────────────────────────────────────────────────
   Endlich Zwischenstufen: vorher sprang die Skala von 14 direkt auf 26.       */
:root,
[data-density="normal"] {
  --fs-base: 14px; --fs-small: 12px; --fs-label: 11px;
  --fs-mid: 16px;  --fs-lead: 20px;  --fs-title: 26px;
  --fs-kpi: 28px;  --fs-table: 13px;
  --pad-y: 9px; --pad-x: 12px; --panel-pad: 16px; --row-h: 32px; --topbar-h: 52px;
}
[data-density="compact"] {
  --fs-base: 12px; --fs-small: 11px; --fs-label: 10px;
  --fs-mid: 14px;  --fs-lead: 17px;  --fs-title: 21px;
  --fs-kpi: 24px;  --fs-table: 12px;
  --pad-y: 5px; --pad-x: 9px; --panel-pad: 12px; --row-h: 24px; --topbar-h: 46px;
}
[data-density="comfortable"] {
  --fs-base: 16px; --fs-small: 13px; --fs-label: 12px;
  --fs-mid: 18px;  --fs-lead: 24px;  --fs-title: 32px;
  --fs-kpi: 34px;  --fs-table: 15px;
  --pad-y: 13px; --pad-x: 16px; --panel-pad: 22px; --row-h: 40px; --topbar-h: 60px;
}