/* CI4U Corporate Design - Fundament (Variante "Waermer" = Standard seit 22.10.2026), Token-VORSCHLAG (22.10.2026, B-fundament.md)
 *
 * Status: Vorschlag, nirgends eingebunden. Werte geprueft mit B-werkzeug/kontrast.py (liest DIESE Datei).
 * Aufbau:
 *   1. Schriften (@font-face, lokal, OFL-1.1)
 *   2. Grundwerte (Rohfarben, Skalen) - nie direkt in Komponenten verwenden
 *   3. Rollen HELL     (Block-Markierung @hell fuer das Pruefskript)
 *   4. Rollen DUNKEL   (@dunkel; per prefers-color-scheme ODER data-theme="dark")
 *   5. Variante "mutig" (data-variante="mutig"), ueberschreibt nur wenige Rollen
 *   6. Masse: Typo, Abstaende, Radien, Linien, Schatten, Dichte, Bewegung, Fokus
 *
 * Farbregeln (Kurzform):
 *   Violett  = Handeln und Entschieden (Knopf, Link, "bestaetigt" mit Haken/Kuerzel, durchgezogener Rand)
 *   Orange   = nur "Die KI schlaegt vor" (gestrichelter Rand + Wort "Vorschlag") und das Logo
 *   Gruen    = NUR Frist in Ordnung (kein Gruen fuer "Erfolg", Erfolg = violett "bestaetigt")
 *   Gelb/Rot = Frist bald/ueberfaellig; dieselben Familien fuer Warnung/Fehler, aber immer mit Wort + Form
 *   Blau gibt es nicht (Info = neutral).
 */

/* ---------- 1. Schriften ---------- */
/* Fira Sans / Fira Mono: SIL OFL 1.1, Carrois Apostrophe / Mozilla (Quelle: github.com/mozilla/Fira, Dateien via fontsource v18).
   latin = Deutsch komplett (Umlaute, ß, „“, €); latin-ext laedt nur bei Bedarf (z. B. Namen wie Łukasz, Çelik). */
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/fira-sans/latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/fira-sans/latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/fira-sans/latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/fira-sans/latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/fira-sans/latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/fira-sans/latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fira Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/fira-mono/latin-400-normal.woff2) format("woff2"); }

/* ---------- 2. Grundwerte ---------- */
:root {
  /* Logo (gemessen an etc/branding/logo/logo-light.png; Briefing nannte #5030F8/#F86828, Abstand dE 0.8/1.5 = nicht sichtbar) */
  --logo-violett: #5530F9;
  --logo-violett-dunkelgrund: #8B7BFF;   /* aus logo-dark.png */
  --logo-orange: #FF6B2B;

  /* Neutrale "Graphit": OKLCH-Farbton 285 (vom Violett), Buntheit steigt zum Dunklen hin -> Tinte statt Grau */
  --n-0:   #FFFFFF;
  --n-25:  #FCFBF9;
  --n-50:  #F6F3EF;
  --n-100: #ECE7E1;
  --n-200: #DDD6CE;
  --n-300: #C2B9AF;
  --n-400: #9A9087;
  --n-500: #7A7168;
  --n-600: #5F5750;
  --n-700: #46403B;
  --n-800: #2E2A28;
  --n-900: #211D1F;   /* Tinte */
  /* Dunkle Neutrale (fast unbunt, bewusst KEIN "Deep-Space-Violett") */
  --d-0:   #121217;
  --d-50:  #1B1B21;
  --d-100: #24242C;
  --d-200: #3C3C46;
  --d-400: #6E6E7C;
  --d-600: #AFB0BC;
  --d-900: #EEEEF4;

  /* Violett (Farbton 279-290) */
  --v-50:  #F5F4FE;
  --v-100: #E9E6FE;
  --v-200: #D1CEFE;
  --v-500: var(--logo-violett);
  --v-600: #4526CE;
  --v-700: #371FA8;
  --v-800: #27117A;
  --v-d-fill: #201F34;   /* bewusst wenig bunt: kein Violett-Leuchten im Dunkeln */

  /* Orange (Farbton 40-50) */
  --o-50:  #FEF5F0;
  --o-100: #FFE5D9;
  --o-500: var(--logo-orange);
  --o-600: #E4560F;   /* Linie "Vorschlag" auf Weiss >= 3:1 */
  --o-700: #BD4510;   /* Schrift "Vorschlag" auf Weiss >= 4.5:1 */
  --o-d:   #FE9652;   /* Farbton 52: weiter weg vom Frist-Rot */
  --o-d-fill: #3D2013;

  /* Fristen-Ampel (Farbtoene bewusst weit weg von Orange 41 und Violett 280: Gruen 152, Gelb 88, Rot 27) */
  --g-500: #198044;  --g-700: #17552E;  --g-50: #E0F7E5;
  --y-400: #F4BF1B;  --y-700: #64470E;  --y-50: #FFF3D0;  --y-rand: #7E5D1D;
  --r-500: #BE2323;  --r-700: #941617;  --r-50: #FEEBEA;
  --g-d: #54C57A; --g-d-fill: #16321F;
  --y-d: #F7C747; --y-d-fill: #392C0C;
  --r-d: #F56B76; --r-d-fill: #4B1D20;   /* Farbton 18 */
}

/* ---------- 3. Rollen HELL ---------- */
/* @hell */
:root {
  color-scheme: light;
  --c-bg:            var(--n-0);     /* Grund ist Weiss (Papier), Gliederung ueber Linien, nicht ueber Flaechen */
  --c-surface:       var(--n-0);
  --c-surface-2:     var(--n-50);    /* Tabellenkopf, Seitenleiste, Zebra */
  --c-surface-3:     var(--n-100);   /* gedrueckt/ausgewaehlt neutral */
  --c-text:          var(--n-900);
  --c-text-muted:    var(--n-600);
  --c-line:          var(--n-200);   /* Haarlinie, rein gliedernd (keine 3:1-Pflicht) */
  --c-line-strong:   var(--n-500);   /* Eingabefeld-Rand, Tabellen-Abschluss: >= 3:1 */
  --c-accent:        var(--v-500);   /* Hauptknopf-Flaeche */
  --c-accent-hover:  var(--v-600);
  --c-on-accent:     var(--n-0);
  --c-link:          var(--v-600);
  --c-focus:         var(--v-500);
  --c-focus-gap:     var(--n-0);

  --c-vorschlag-line:  var(--o-600);   /* gestrichelt */
  --c-vorschlag-text:  var(--o-700);
  --c-vorschlag-fill:  var(--n-0);     /* Vorschlag bleibt auf Weiss - Orange nur als Linie und Wort */
  --c-entschieden-line: var(--v-500);  /* durchgezogen */
  --c-entschieden-text: var(--v-700);
  --c-entschieden-fill: var(--v-50);

  --c-frist-ok:       var(--g-500);  --c-frist-ok-text:   var(--g-700); --c-frist-ok-fill:   var(--g-50);
  --c-frist-bald:     var(--y-400);  --c-frist-bald-text: var(--y-700); --c-frist-bald-fill: var(--y-50); --c-frist-bald-rand: var(--y-rand);
  --c-frist-ueber:    var(--r-500);  --c-frist-ueber-text: var(--r-700); --c-frist-ueber-fill: var(--r-50);
  --c-fehler:        var(--r-500);  --c-fehler-text:  var(--r-700);  --c-fehler-fill:  var(--r-50);
  --c-warnung:       var(--y-rand); --c-warnung-text: var(--y-700);  --c-warnung-fill: var(--y-50);
  --c-info:          var(--n-500);  --c-info-text:    var(--n-700);  --c-info-fill:    var(--n-50);

  --c-band:          var(--n-0);     /* Kopfband Website/App */
  --c-band-text:     var(--n-900);
  --c-signal-flaeche: var(--n-50);   /* grosse Hervorhebungsflaeche (Website) */
  --c-signal-text:   var(--n-900);
}
/* @ende */

/* ---------- 4. Rollen DUNKEL ---------- */
/* @dunkel */
:root[data-theme="dark"] {
  color-scheme: dark;
  --c-bg:            var(--d-0);
  --c-surface:       var(--d-50);
  --c-surface-2:     var(--d-100);
  --c-surface-3:     var(--d-200);
  --c-text:          var(--d-900);
  --c-text-muted:    var(--d-600);
  --c-line:          var(--d-200);
  --c-line-strong:   var(--d-400);
  --c-accent:        var(--logo-violett-dunkelgrund);   /* heller Knopf mit dunkler Schrift */
  --c-accent-hover:  var(--v-200);
  --c-on-accent:     var(--d-0);
  --c-link:          var(--logo-violett-dunkelgrund);
  --c-focus:         var(--logo-violett-dunkelgrund);
  --c-focus-gap:     var(--d-0);
  --c-vorschlag-line: var(--o-d);  --c-vorschlag-text: var(--o-d);  --c-vorschlag-fill: var(--d-50);
  --c-entschieden-line: var(--logo-violett-dunkelgrund); --c-entschieden-text: var(--v-200); --c-entschieden-fill: var(--v-d-fill);
  --c-frist-ok:   var(--g-d); --c-frist-ok-text:   var(--g-d); --c-frist-ok-fill:   var(--g-d-fill);
  --c-frist-bald: var(--y-d); --c-frist-bald-text: var(--y-d); --c-frist-bald-fill: var(--y-d-fill); --c-frist-bald-rand: var(--y-d);
  --c-frist-ueber: var(--r-d); --c-frist-ueber-text: var(--r-d); --c-frist-ueber-fill: var(--r-d-fill);
  --c-fehler:  var(--r-d); --c-fehler-text:  var(--r-d); --c-fehler-fill:  var(--r-d-fill);
  --c-warnung: var(--y-d); --c-warnung-text: var(--y-d); --c-warnung-fill: var(--y-d-fill);
  --c-info:    var(--d-600); --c-info-text:  var(--d-900); --c-info-fill:  var(--d-100);
  --c-band: var(--d-50); --c-band-text: var(--d-900);
  --c-signal-flaeche: var(--d-100); --c-signal-text: var(--d-900);
}
/* @ende */
/* Gleiche Werte fuer "System = dunkel", solange niemand ausdruecklich hell gewaehlt hat */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-bg: var(--d-0); --c-surface: var(--d-50); --c-surface-2: var(--d-100); --c-surface-3: var(--d-200);
    --c-text: var(--d-900); --c-text-muted: var(--d-600); --c-line: var(--d-200); --c-line-strong: var(--d-400);
    --c-accent: var(--logo-violett-dunkelgrund); --c-accent-hover: var(--v-200); --c-on-accent: var(--d-0);
    --c-link: var(--logo-violett-dunkelgrund); --c-focus: var(--logo-violett-dunkelgrund); --c-focus-gap: var(--d-0);
    --c-vorschlag-line: var(--o-d); --c-vorschlag-text: var(--o-d); --c-vorschlag-fill: var(--d-50);
    --c-entschieden-line: var(--logo-violett-dunkelgrund); --c-entschieden-text: var(--v-200); --c-entschieden-fill: var(--v-d-fill);
    --c-frist-ok: var(--g-d); --c-frist-ok-text: var(--g-d); --c-frist-ok-fill: var(--g-d-fill);
    --c-frist-bald: var(--y-d); --c-frist-bald-text: var(--y-d); --c-frist-bald-fill: var(--y-d-fill); --c-frist-bald-rand: var(--y-d);
    --c-frist-ueber: var(--r-d); --c-frist-ueber-text: var(--r-d); --c-frist-ueber-fill: var(--r-d-fill);
    --c-fehler: var(--r-d); --c-fehler-text: var(--r-d); --c-fehler-fill: var(--r-d-fill);
    --c-warnung: var(--y-d); --c-warnung-text: var(--y-d); --c-warnung-fill: var(--y-d-fill);
    --c-info: var(--d-600); --c-info-text: var(--d-900); --c-info-fill: var(--d-100);
    --c-band: var(--d-50); --c-band-text: var(--d-900); --c-signal-flaeche: var(--d-100); --c-signal-text: var(--d-900);
  }
}

/* ---------- 5. Variante "mutig" (nur hell; dunkel bleibt gleich) ---------- */
/* Tinte wird sichtbar violett, Kopfband in Tinte, Orange darf grosse Flaechen tragen (mit Tinte als Schrift).
   Bedeutungsregel bleibt: in Arbeitsoberflaechen ist Orange weiter NUR "Vorschlag". */
/* @mutig */
:root[data-variante="mutig"]:not([data-theme="dark"]) {
  --c-text:          #1D1948;
  --c-band:          #1D1948;
  --c-band-text:     var(--n-0);
  --c-signal-flaeche: var(--logo-orange);
  --c-signal-text:   #1D1948;
  --c-surface-2:     var(--v-50);
  --c-line:          var(--v-200);
}
/* @ende */

/* ---------- 6. Masse ---------- */
:root {
  /* Schrift: EINE Familie fuer alles; Zahlen tabellarisch; Mono nur fuer Chargen-/Belegnummern */
  --font-text:  "Fira Sans", "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-head:  var(--font-text);
  --font-mono:  "Fira Mono", "Cascadia Mono", "Noto Sans Mono", "DejaVu Sans Mono", ui-monospace, monospace;
  --fw-text: 400; --fw-medium: 500; --fw-strong: 600; --fw-head: 700;

  /* Groessen (Verhaeltnis ca. 1,25). Fliesstext 18 px, kleinste Schrift 15 px (nur Fussnoten/Hinweise) */
  --fs-xs:  0.9375rem;  /* 15 */
  --fs-sm:  1rem;       /* 16 - UI-Beschriftung, Tabellen */
  --fs-md:  1.125rem;   /* 18 - Fliesstext */
  --fs-lg:  1.375rem;   /* 22 - H4 / Kartentitel */
  --fs-xl:  1.75rem;    /* 28 - H3 */
  --fs-2xl: clamp(1.75rem, 1.2rem + 2.2vw, 2.25rem);  /* 28-36 - H2 */
  --fs-3xl: clamp(2.125rem, 1.3rem + 3.6vw, 3.5rem);  /* 34-56 - H1; Ueberschriften immer mit hyphens:auto + lang="de" (Komposita wie "Rueckverfolgbarkeit" sprengen sonst 390 px) */
  --lh-text: 1.55; --lh-ui: 1.35; --lh-head: 1.12;
  --measure: 66ch;     /* Zeilenlaenge Fliesstext */
  --tracking-head: -0.01em;

  /* Abstaende: 4er-Basis, in der Praxis 8er-Schritte */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;

  /* Radien: kantig wie Formular/Beleg, nicht "SaaS-rund" */
  --r-1: 6px;  /* Abzeichen, Tabellenzellen */
  --r-2: 10px;  /* Knoepfe, Eingabefelder */
  --r-3: 18px;  /* Dialoge, schwebende Menues */
  --r-rund: 999px;  /* nur Ampel-Punkt und Kuerzel-Stempel */

  /* Linien */
  --b-haar: 1px; --b-regel: 2px; --b-fokus: 3px;
  --b-vorschlag: 2px dashed var(--c-vorschlag-line);
  --b-entschieden: 2px solid var(--c-entschieden-line);

  /* Schatten: genau einer, nur fuer Schwebendes (Menue, Dialog), nie fuer Karten */
  --shadow-float: 0 8px 24px rgb(25 23 46 / 0.16), 0 1px 3px rgb(25 23 46 / 0.12);

  /* Dichte / Touch */
  --hit: 48px;        /* Standard Tablet/Backstube */
  --hit-min: 44px;    /* Untergrenze (WCAG 2.5.5 AAA), dichte Desktop-Tabellen (ERP) */
  --field-h: 48px;

  /* Bewegung */
  --t-kurz: 120ms; --t-mittel: 200ms; --ease: cubic-bezier(.2, 0, 0, 1);

  /* Fokus: dicker Ring mit Abstand, auf jedem Grund sichtbar */
  --focus-ring: var(--b-fokus) solid var(--c-focus);
  --focus-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  :root { --t-kurz: 0ms; --t-mittel: 0ms; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }