/* ============================================================
   Website-Fabrik (Arbeitstitel): Design-Tokens, Version 0.1, 22.10.2026
   Gilt für Präsentationen, Vorschau-Seite und das Dashboard ("Fenster").
   Erfüllt den Token-Vertrag von design-foundations (taste, Richtung
   "clinical" mit Tech-Elementen). Kontrast prüfen nach jeder Änderung:
   python3 /workspace/skills/taste/scripts/check_contrast.py website-fabrik-tokens.css
   Dunkles Schema nur unter @media screen, Druck bleibt hell.
   ============================================================ */

/* ---------- Schriften (OFL, selbst gehostet, Unterordner fonts/) ---------- */
@font-face { font-family: "Geologica"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/geologica-latin-400.woff2") format("woff2"); 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: "Geologica"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/geologica-latin-600.woff2") format("woff2"); 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: "Geologica"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/geologica-latin-700.woff2") format("woff2"); 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: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-400.woff2") format("woff2"); 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: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-500.woff2") format("woff2"); 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: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-600.woff2") format("woff2"); 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: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-400.woff2") format("woff2"); 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: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-500.woff2") format("woff2"); 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; }

/* ---------- Helles Schema (Standard und Druck) ---------- */
:root {
  --font-display: "Geologica", "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --w-display: 600;
  --tr-display: -0.02em;
  --tr-h2: -0.015em;
  --lh-display: 1.05;
  --case-eyebrow: uppercase;
  --tr-eyebrow: 0.1em;
  --radius: 12px;          /* Karten, Flächen */
  --radius-sm: 8px;        /* Eingaben, Tabellen-Rahmen */
  --radius-button: 8px;    /* Knöpfe: eckig-weich, keine Pillen */
  --radius-xs: 4px;        /* Status-Marken, Tags */

  --bg: #f5f7fb;           /* Datenblatt: kühles Papier */
  --surface: #ffffff;      /* Vorschau-Weiß */
  --surface-2: #eaf0f8;    /* Lagerhalle hell */
  --ink: #0e1b33;          /* Nachtblau-Tinte (kein Schwarz) */
  --muted-strong: #33425e; /* Stahl 700 */
  --muted: #4f5d78;        /* Stahl 600 */
  --line: #dae1ec;         /* Haarlinie */
  --line-strong: #bcc7d8;  /* Stahl 300 */
  --ink-field: #0b1f4a;    /* Blaupause tief: Bänder, Titelflächen */
  --on-ink: #eef3fc;
  --on-ink-muted: #b4c3e3;
  --accent: #1f4fd8;       /* Fabrikblau: Leitfarbe, Hauptaktion, Fokus */
  --accent-fill: #1f4fd8;
  --accent-on-fill: #ffffff;
  --accent-text: #1a44bd;  /* Fabrikblau für Links und Text */
  --accent-soft: #e3ebfc;  /* Blaupause hell */
  --field-1: #e3ebfc;      /* Blaupause hell */
  --field-1-ink: #0e1b33;
  --field-2: #fdf0d5;      /* Bodenmarkierung hell */
  --field-2-ink: #0e1b33;
  --field-3: #0b1f4a;      /* Blaupause tief */
  --field-3-ink: #eef3fc;

  /* Signal: Bodenmarkierung der Fabrikhalle. Nur Marker und Hervorhebung,
     nie Fließtext auf Weiß; Text darauf immer --ink. */
  --signal: #f5a524;
  --signal-ink: #0e1b33;

  /* Status (Ampel nur bei Abweichung). Text-Farbe auf --surface und --bg,
     -soft als Grund für Marken, -solid für Punkte und Balken. */
  --ok: #12704f;      --ok-soft: #dcf2e8;      --ok-solid: #1f9d6e;      /* Abgenommen, bezahlt, live */
  --warn: #7f4d00;    --warn-soft: #fdf0d5;    --warn-solid: #f5a524;    /* wartet, Frist naht */
  --danger: #b42318;  --danger-soft: #fbe4e1;  --danger-solid: #d93a2b;  /* blockiert, Zahlung fehlgeschlagen */
  --info: #1a44bd;    --info-soft: #e3ebfc;    --info-solid: #1f4fd8;    /* in Arbeit, aktuelle Station */
  --neutral: #4f5d78; --neutral-soft: #edf1f7; --neutral-solid: #8a97ad;  /* offen, nicht begonnen */

  /* Diagramm-Reihen (dataviz): Reihenfolge einhalten */
  --series-1: #1f4fd8;  /* Fabrikblau */
  --series-2: #6a8cec;  /* Blaupause mittel */
  --series-3: #8a97ad;  /* Stahl */
  --series-4: #f5a524;  /* Bodenmarkierung: unter 3:1 auf Weiß, nur mit direkter Beschriftung */

  /* Abstände: 4er-Raster */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* Dashboard-Schriftgrößen */
  --ui-xs: 0.75rem;   /* 12px: Spaltenköpfe, Marken */
  --ui-sm: 0.875rem;  /* 14px: Tabellen, Formulare */
  --ui-md: 1rem;      /* 16px: Fließtext */
  --ui-lg: 1.25rem;   /* 20px: Kartentitel */
  --ui-xl: 1.5rem;    /* 24px: Seitentitel */
  --ui-kpi: 2rem;     /* 32px: Kennzahl in der Kachel */

  /* Dashboard-Maße */
  --row-h: 44px;          /* Tabellenzeile, Tap-Ziel */
  --row-h-dense: 36px;    /* dichte Tabellen, nur Desktop */
  --control-h: 40px;      /* Knopf und Eingabe Desktop */
  --control-h-touch: 44px;
  --sidebar-w: 240px;
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
  --shadow-overlay: 0 12px 32px rgba(14, 27, 51, 0.16); /* nur Menüs, Dialoge */
  color-scheme: light dark;
}

/* ---------- Palette (feste Werte, schalten nie um) ----------
   Für Logo, Druck, Farbmuster und Fremdsysteme (Close, Stripe-Checkout).
   In Oberflächen die Rollen-Tokens weiter unten verwenden. */
:root {
  --c-fabrikblau: #1f4fd8;        /* Leitfarbe */
  --c-fabrikblau-nacht: #6e95ff;  /* Leitfarbe auf dunklem Grund */
  --c-blaupause-tief: #0b1f4a;
  --c-blaupause-hell: #e3ebfc;
  --c-tinte: #0e1b33;             /* Nachtblau, ersetzt Schwarz */
  --c-nachtschicht: #0a1324;
  --c-datenblatt: #f5f7fb;
  --c-lagerhalle: #eaf0f8;
  --c-stahl-600: #4f5d78;
  --c-stahl-300: #bcc7d8;
  --c-bodenmarkierung: #f5a524;
  --c-weiss: #ffffff;
}

/* ---------- Dunkles Schema: Nachtschicht ---------- */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a1324;           /* Nachtschicht */
    --surface: #101c33;
    --surface-2: #16243f;
    --ink: #e8eef9;
    --muted-strong: #c3cee3;
    --muted: #94a3c0;
    --line: rgba(232, 238, 249, 0.1);
    --line-strong: rgba(232, 238, 249, 0.2);
    --ink-field: #061029;
    --on-ink: #e8eef9;
    --on-ink-muted: #aab8d6;
    --accent: #6e95ff;       /* Fabrikblau, nachts aufgehellt */
    --accent-fill: #6e95ff;
    --accent-on-fill: #0a1324;
    --accent-text: #8fb0ff;
    --accent-soft: rgba(110, 149, 255, 0.16);
    --field-1: #15264a;
    --field-1-ink: #e8eef9;
    --field-2: #3a2c0e;
    --field-2-ink: #f8e9c8;
    --field-3: #061029;
    --field-3-ink: #e8eef9;
    --signal: #f5b544;
    --signal-ink: #0a1324;
    --ok: #5fd3a6;      --ok-soft: rgba(95, 211, 166, 0.14);    --ok-solid: #3fbf8c;
    --warn: #f5b544;    --warn-soft: rgba(245, 181, 68, 0.14);  --warn-solid: #f5b544;
    --danger: #ff8a7e;  --danger-soft: rgba(255, 138, 126, 0.14); --danger-solid: #f0645a;
    --info: #8fb0ff;    --info-soft: rgba(110, 149, 255, 0.16); --info-solid: #6e95ff;
    --neutral: #94a3c0; --neutral-soft: rgba(148, 163, 192, 0.14); --neutral-solid: #6b7a96;
    --series-1: #6e95ff; --series-2: #a9c0ff; --series-3: #6b7a96; --series-4: #f5b544;
    --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.5);
  }
}
@media screen {
  :root[data-theme="dark"] {
    --bg: #0a1324;
    --surface: #101c33;
    --surface-2: #16243f;
    --ink: #e8eef9;
    --muted-strong: #c3cee3;
    --muted: #94a3c0;
    --line: rgba(232, 238, 249, 0.1);
    --line-strong: rgba(232, 238, 249, 0.2);
    --ink-field: #061029;
    --on-ink: #e8eef9;
    --on-ink-muted: #aab8d6;
    --accent: #6e95ff;
    --accent-fill: #6e95ff;
    --accent-on-fill: #0a1324;
    --accent-text: #8fb0ff;
    --accent-soft: rgba(110, 149, 255, 0.16);
    --field-1: #15264a;
    --field-1-ink: #e8eef9;
    --field-2: #3a2c0e;
    --field-2-ink: #f8e9c8;
    --field-3: #061029;
    --field-3-ink: #e8eef9;
    --signal: #f5b544;
    --signal-ink: #0a1324;
    --ok: #5fd3a6;      --ok-soft: rgba(95, 211, 166, 0.14);    --ok-solid: #3fbf8c;
    --warn: #f5b544;    --warn-soft: rgba(245, 181, 68, 0.14);  --warn-solid: #f5b544;
    --danger: #ff8a7e;  --danger-soft: rgba(255, 138, 126, 0.14); --danger-solid: #f0645a;
    --info: #8fb0ff;    --info-soft: rgba(110, 149, 255, 0.16); --info-solid: #6e95ff;
    --neutral: #94a3c0; --neutral-soft: rgba(148, 163, 192, 0.14); --neutral-solid: #6b7a96;
    --series-1: #6e95ff; --series-2: #a9c0ff; --series-3: #6b7a96; --series-4: #f5b544;
    --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.5);
  }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] { color-scheme: dark; }
}

/* Zahlen in Tabellen und Kacheln immer gleich breit */
body { font-variant-numeric: tabular-nums; }