/* note-it Design-Tokens · Stand 2026-10-28 · Endfassung 27.10.2026 · Quelle: design/system/_build/tokens.mjs
   Gemeinsame Basis für Widget (Preact, Shadow DOM) und Portal (React). Keine Komponenten, nur Werte. */
:root, :host {
  --ni-color-yellow: #FFBE0B;
  --ni-color-yellowDeep: #CC8F00;
  --ni-color-yellowSoft: #FFEDB3;
  --ni-color-ink: #1E2034;
  --ni-color-ink2: #2B2E4A;
  --ni-color-ink3: #3A3D5C;
  --ni-color-paper: #FFFFFF;
  --ni-color-paper2: #F6F5F0;
  --ni-color-paper3: #ECEAE2;
  --ni-color-line: #DCDAD0;
  --ni-color-preview: #E4E7ED;
  --ni-color-previewBar: #C9CED8;
  --ni-color-previewLine: #B9C0CC;
  --ni-color-fieldLine: #767B91;
  --ni-color-muted: #5B5F78;
  --ni-color-mutedDark: #A9ACC0;
  --ni-color-blue: #2458E6;
  --ni-color-violet: #6D3BD6;
  --ni-color-ask: #C92A6B;
  --ni-color-askInk: #C2286A;
  --ni-color-askDark: #FF8FBF;
  --ni-color-danger: #C93A27;
  --ni-color-dangerDeep: #A52E1E;
  --ni-color-penRed: #C93A27;
  --ni-color-green: #3DD68C;
  --ni-color-greenInk: #146E40;
  --ni-color-slate: #9094AD;
  --ni-color-slateInk: #5B5F78;
  --ni-color-slateDark: #C3C6D6;
  --ni-color-grey: #D9D8D0;
  --ni-color-offenInk: #7A5D00;
  --ni-color-orange: #E8731A;
  --ni-color-orangeInk: #A84B00;
  --ni-color-orangeDark: #FFA450;
  --ni-color-orangeSoft: #FFF0E0;
  /* Akzent-Set: Markierungsfarbe je Projekt. Das Widget setzt --ni-acc, --ni-acc-edge, --ni-acc-on aus der Projekteinstellung. */
  --ni-accent-gelb: #FFBE0B;
  --ni-accent-gelb-edge: #1E2034;
  --ni-accent-gelb-on: #1E2034;
  --ni-accent-blau: #2458E6;
  --ni-accent-blau-edge: #FFFFFF;
  --ni-accent-blau-on: #FFFFFF;
  --ni-accent-violett: #6D3BD6;
  --ni-accent-violett-edge: #FFFFFF;
  --ni-accent-violett-on: #FFFFFF;
  --ni-acc: #FFBE0B;
  --ni-acc-edge: #1E2034;
  --ni-acc-on: #1E2034;
  /* Zeichnen im Kommentar: Strich = Markierungsfarbe des Projekts, Kante als Doppelstrich, Schwärzen deckend (wird eingebrannt) */
  --ni-draw: var(--ni-acc);
  --ni-draw-edge: var(--ni-acc-edge);
  --ni-redact: #000000;
  --ni-draw-width: 4px;
  --ni-draw-width-rect: 3px;
  --ni-draw-width-touch: 5px;
  --ni-draw-edge-extra: 3px;
  /* Fehler: Orange (nie Rot). Fläche, Text auf hell, leise Fläche */
  --ni-error: #E8731A;
  --ni-error-text: #A84B00;
  --ni-error-soft: #FFF0E0;
  /* Status: Fläche (fill), Zeichen/Text darauf (on), als Text auf heller Fläche (text); interne Zweitstufe ohne Fläche */
  --ni-status-offen: #FFBE0B;
  --ni-status-offen-on: #1E2034;
  --ni-status-offen-text: #7A5D00;
  --ni-status-rueckfrage: #C92A6B;
  --ni-status-rueckfrage-on: #FFFFFF;
  --ni-status-rueckfrage-text: #C2286A;
  --ni-status-pruefen: #3DD68C;
  --ni-status-pruefen-on: #1E2034;
  --ni-status-pruefen-text: #146E40;
  --ni-status-nicht: #9094AD;
  --ni-status-nicht-on: #1E2034;
  --ni-status-nicht-text: #5B5F78;
  --ni-status-erledigt: #ECEAE2;
  --ni-status-erledigt-on: #1E2034;
  --ni-status-erledigt-text: #5B5F78;
  --ni-status-zurueck: #D9D8D0;
  --ni-status-zurueck-on: #1E2034;
  --ni-status-zurueck-text: #5B5F78;
  --ni-status-gefragt: #C92A6B;
  --ni-status-gefragt-on: #FFFFFF;
  --ni-status-gefragt-text: #C2286A;
  --ni-status-beantwortet: #FFBE0B;
  --ni-status-beantwortet-on: #1E2034;
  --ni-status-beantwortet-text: #7A5D00;
  --ni-status-gesucht: #FFBE0B;
  --ni-status-gesucht-on: #1E2034;
  --ni-status-gesucht-text: #7A5D00;
  --ni-status-geliefert: #3DD68C;
  --ni-status-geliefert-on: #1E2034;
  --ni-status-geliefert-text: #146E40;
  --ni-status-ausgewaehlt: #ECEAE2;
  --ni-status-ausgewaehlt-on: #1E2034;
  --ni-status-ausgewaehlt-text: #5B5F78;
  --ni-status-arbeit: transparent;
  --ni-status-arbeit-on: #1E2034;
  --ni-status-arbeit-text: #1E2034;
  --ni-status-agent: transparent;
  --ni-status-agent-on: #1E2034;
  --ni-status-agent-text: #1E2034;
  --ni-status-intern_beantwortet: transparent;
  --ni-status-intern_beantwortet-on: #1E2034;
  --ni-status-intern_beantwortet-text: #1E2034;
  --ni-status-agent_umgesetzt: transparent;
  --ni-status-agent_umgesetzt-on: #1E2034;
  --ni-status-agent_umgesetzt-text: #1E2034;
  --ni-status-vom_kunden: transparent;
  --ni-status-vom_kunden-on: #1E2034;
  --ni-status-vom_kunden-text: #1E2034;
  /* Breakpoints (nur als Wert; in Media Queries nicht als Variable nutzbar). Geräteklassen für die Knopf-Position: Handy < tablet, Tablet < desktop, Desktop ≥ desktop */
  --ni-bp-phone: 480px;
  --ni-bp-tablet: 768px;
  --ni-bp-desktop: 1100px;
  --ni-bp-dockRest: 1024px;
  /* Knopf-Position: Standard-Ecke je Gerät (tl tr bl br) und Abstand; je Projekt überschreibbar */
  --ni-float-corner-phone: br;
  --ni-float-corner-tablet: br;
  --ni-float-corner-desktop: tr;
  --ni-float-gap: 16px;
  /* Intern-Muster (nur Agentur): Schraffur über der Fläche, Tintenbalken links, Schloss; nie Gelb */
  --ni-intern-hatch: repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, #1E2034 6%, transparent) 7px 8px);
  /* Schrift */
  --ni-font-sans: "Instrument Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ni-font-widget: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ni-font-hand: Caveat, "Segoe Print", "Bradley Hand", cursive;
  --ni-font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --ni-text-xs: 12px;
  --ni-text-sm: 13px;
  --ni-text-md: 15px;
  --ni-text-field: 16px;
  --ni-text-lg: 17px;
  --ni-text-xl: 22px;
  --ni-text-2xl: 30px;
  --ni-text-3xl: 44px;
  --ni-text-4xl: 64px;
  --ni-weight-regular: 400;
  --ni-weight-medium: 500;
  --ni-weight-semibold: 600;
  --ni-weight-bold: 700;
  --ni-leading-tight: 1.1;
  --ni-leading-snug: 1.25;
  --ni-leading-normal: 1.45;
  --ni-leading-loose: 1.6;
  --ni-tracking-tight: -0.02em;
  --ni-tracking-normal: 0;
  --ni-tracking-wide: 0.04em;
  /* Abstände, Radien, Größen */
  --ni-space-1: 4px;
  --ni-space-2: 8px;
  --ni-space-3: 12px;
  --ni-space-4: 16px;
  --ni-space-5: 20px;
  --ni-space-6: 24px;
  --ni-space-8: 32px;
  --ni-space-10: 40px;
  --ni-space-12: 48px;
  --ni-space-16: 64px;
  --ni-radius-none: 0;
  --ni-radius-xs: 2px;
  --ni-radius-sm: 4px;
  --ni-radius-md: 8px;
  --ni-radius-round: 999px;
  --ni-size-tap: 44px;
  --ni-size-marker: 28px;
  --ni-size-markerSm: 22px;
  --ni-size-counter: 18px;
  --ni-size-fold: 14px;
  --ni-size-foldLg: 22px;
  --ni-size-foldCard: 22px;
  --ni-size-fold-s: 10px;
  --ni-size-fold-m: 14px;
  --ni-size-fold-l: 22px;
  --ni-size-float: 52px;
  --ni-size-floatRound: 56px;
  --ni-size-floatTab: 44px;
  --ni-size-menuW: 280px;
  --ni-size-strip: 48px;
  --ni-size-stripLine: 44px;
  --ni-size-floatGap: 16px;
  --ni-size-sidebar: 360px;
  --ni-size-dialog: 400px;
  --ni-size-flagMax: 320px;
  --ni-size-tour: 360px;
  --ni-size-tourMaxPhone: 45%;
  --ni-size-menuMaxPhone: 70%;
  --ni-size-counter: 18px;
  /* Schatten */
  --ni-shadow-soft: 0 10px 28px rgba(30,32,52,.18), 0 1px 2px rgba(30,32,52,.12);
  --ni-shadow-softFilter: 0 8px 20px rgba(30,32,52,.22);
  --ni-shadow-dragFilter: 0 16px 32px rgba(30,32,52,.30);
  --ni-shadow-marker: 1px 2px 1px rgba(0,0,0,.28);
  --ni-shadow-hardSm: 2px 2px 0 #1E2034;
  --ni-shadow-hard: 3px 3px 0 #1E2034;
  --ni-shadow-hardPaper: 3px 3px 0 #FFFFFF;
  --ni-shadow-lift: 5px 5px 0 #1E2034;
  --ni-shadow-focus: 0 0 0 2px #FFFFFF, 0 0 0 4px #1E2034;
  --ni-shadow-focusDark: 0 0 0 2px #1E2034, 0 0 0 4px #FFBE0B;
  /* Bewegung */
  --ni-motion-fast: 120ms;
  --ni-motion-base: 180ms;
  --ni-motion-slow: 320ms;
  --ni-motion-toastHold: 8000ms;
  --ni-motion-ease: cubic-bezier(.2,.7,.2,1);
  --ni-motion-ease-out: cubic-bezier(.16,1,.3,1);
  --ni-motion-spring: cubic-bezier(.34,1.4,.64,1);
  /* Ebenen über fremden Seiten (Dialoge und Vollbild liegen im Top Layer) */
  --ni-z-page: 0;
  --ni-z-marker: 2147483000;
  --ni-z-mode: 2147483010;
  --ni-z-kringel: 2147483020;
  --ni-z-float: 2147483030;
  --ni-z-menu: 2147483040;
  --ni-z-sidebar: 2147483050;
  --ni-z-toast: 2147483060;
}
/* Werkzeug-Ebene hell (Standard) und dunkel: die Komponenten lesen nur diese Oberflächen-Variablen. */
.ni-light, :host(.ni-light) {
  --ni-sf: #FFFFFF; --ni-sf2: #ECEAE2; --ni-fg: #1E2034; --ni-fg2: #5B5F78; --ni-line: #DCDAD0;
  --ni-edge: #1E2034; --ni-flap: #ECEAE2; --ni-shadow-hard-c: #1E2034; --ni-ring: #1E2034;
}
.ni-dark, :host(.ni-dark) {
  --ni-sf: #1E2034; --ni-sf2: #2B2E4A; --ni-fg: #FFFFFF; --ni-fg2: #A9ACC0; --ni-line: #3A3D5C;
  --ni-edge: #FFFFFF; --ni-flap: #3A3D5C; --ni-shadow-hard-c: #FFFFFF; --ni-ring: #FFBE0B;
  --ni-error-text: #FFA450;
  /* Status als Text auf der dunklen Ebene (hellere Fassungen, alle ≥ 4,5 : 1 auf Tinte) */
  --ni-status-offen-text: #FFBE0B;
  --ni-status-rueckfrage-text: #FF8FBF;
  --ni-status-pruefen-text: #3DD68C;
  --ni-status-nicht-text: #C3C6D6;
  --ni-status-erledigt-text: #A9ACC0;
  --ni-status-zurueck-text: #A9ACC0;
  --ni-status-gefragt-text: #FF8FBF;
  --ni-status-beantwortet-text: #FFBE0B;
  --ni-status-gesucht-text: #FFBE0B;
  --ni-status-geliefert-text: #3DD68C;
  --ni-status-ausgewaehlt-text: #A9ACC0;
  --ni-status-arbeit-on: #FFFFFF; --ni-status-arbeit-text: #FFFFFF;
  --ni-status-agent-on: #FFFFFF; --ni-status-agent-text: #FFFFFF;
  --ni-status-intern_beantwortet-on: #FFFFFF; --ni-status-intern_beantwortet-text: #FFFFFF;
  --ni-status-agent_umgesetzt-on: #FFFFFF; --ni-status-agent_umgesetzt-text: #FFFFFF;
  --ni-status-vom_kunden-on: #FFFFFF; --ni-status-vom_kunden-text: #FFFFFF;
}
/* Abgeleitete Variablen, die Ebene oder Projekt-Akzent lesen, hier noch einmal deklarieren: Eigene Eigenschaften werden
   dort aufgelöst, wo sie stehen. In :root wären --ni-fg (nur je Ebene) bzw. ein am Widget gesetztes --ni-acc nicht sichtbar. */
.ni-light, :host(.ni-light), .ni-dark, :host(.ni-dark) {
  --ni-draw: var(--ni-acc);
  --ni-draw-edge: var(--ni-acc-edge);
  --ni-intern-hatch: repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, var(--ni-fg) 6%, transparent) 7px 8px);
}