/* Nexovis Design Tokens — CSS Custom Properties
 * Quelle: NEXOVIS Brand Guidelines 2026 (Dok. 1601) + nexovis.com
 * Einbinden: <link rel="stylesheet" href="tokens.css">  oder  @import.
 * Webfonts zuerst laden: tokens/fonts.css
 * Stand: 2026-09-02 · Version 3.0.0
 *
 * PROVENIENZ — bitte beachten:
 *   Tokens im Block MARKENFARBEN und TYPOGRAFIE/Familien stammen direkt
 *   aus dem offiziellen Manual und sind VERBINDLICH.
 *   Alle uebrigen Tokens sind markenkonform ABGELEITET und im Manual
 *   nicht enthalten. Sie sind Arbeitsgrundlage, nicht Markenrecht.
 *   Massgeblich bei Konflikt: reference/NEXOVIS_Brand_Guidelines_1601.pdf
 */

:root {
  color-scheme: light;

  /* ================================================================ *
   * 1. MARKENFARBEN — offiziell, verbindlich (Manual S. 19)
   * ================================================================ */
  --nx-forest-green: #293F37;   /* Waldgruen — Primaerfarbe */
  --nx-sun-yellow:   #FFCF00;   /* Sonnengelb — Akzentfarbe */
  --nx-black:        #1D1D1B;   /* Schwarz (kein reines #000) */
  --nx-white:        #FFFFFF;

  /* ================================================================ *
   * 2. NEUTRALSKALA — abgeleitet
   * ================================================================ */
  --nx-neutral-50:   #F5F6F5;
  --nx-neutral-100:  #E8EAE9;
  --nx-neutral-200:  #D2D6D4;
  --nx-neutral-300:  #BCC2BF;
  --nx-neutral-400:  #9AA09D;
  --nx-neutral-600:  #6B716E;
  --nx-neutral-700:  #3D4844;
  --nx-neutral-900:  #1D1D1B;

  /* ================================================================ *
   * 3. GRUEN-/GELB-ABSTUFUNGEN — abgeleitet
   * ================================================================ */
  --nx-green-900:    #14201C;
  --nx-green-700:    #1C2B26;
  --nx-green-500:    #293F37;   /* = Waldgruen */
  --nx-green-300:    #5C6F68;
  --nx-green-100:    #DCE1DF;
  --nx-yellow-600:   #E0B600;
  --nx-yellow-500:   #FFCF00;   /* = Sonnengelb */
  --nx-yellow-200:   #FFE98A;
  --nx-yellow-100:   #FFF6D1;
  /* Es gibt bewusst KEIN dunkles Gelb als Textfarbe. Begruendung in
   * guidance/accessibility.md; Betonung auf Weiss ist --nx-emphasis. */

  /* ================================================================ *
   * 4. STATUSFARBEN — abgeleitet, alle >= 4.5:1 auf Weiss (WCAG AA)
   *    Reserviert fuer Zustand. NIE als Diagramm-Serienfarbe.
   *    Immer mit Icon + Label, nie Farbe allein.
   * ================================================================ */
  --nx-success:  #2F7D4F;   /* 5.04:1 */
  --nx-warning:  #A76700;   /* 4.58:1 — Amber, OKLCH Hue 68. Das ist eine
                             * FUNKTIONALE Statusfarbe, KEIN Markengelb
                             * (Sonnengelb liegt bei Hue 92). Nie als Akzent
                             * oder Betonungsfarbe einsetzen. */
  --nx-serious:  #C0571E;   /* 4.54:1 */
  --nx-error:    #C0392B;   /* 5.44:1 */
  --nx-info:     #3D6E8C;   /* 5.52:1 */
  /* Flaechen-/Marker-Variante der Statusfarben, NICHT fuer Text: */
  --nx-warning-fill: #E0B600;
  --nx-success-fill: #DCEFE3;
  --nx-error-fill:   #FBE6E3;
  /* Rahmen fuer Statusflaechen (Hinweiskasten, Badge mit Kontur) */
  --nx-success-border: #B9DCC7;
  --nx-warning-border: #F0DFA0;
  --nx-error-border:   #F0C9C3;
  /* SCHRIFT AUF EINER STATUSFUELLUNG (entschieden 02.09.2026): Schwarz.
   * Die Kontrastzahlen der Statusfarben gelten gegen WEISS, nicht gegen
   * ihre eigene Fuellung. Dort halten sie nicht: --nx-success auf
   * --nx-success-fill erreicht 4.20:1 und faellt durch; --nx-error auf
   * --nx-error-fill kommt auf 4.54:1 und liegt 0.04 ueber der Schwelle —
   * keine Spanne, auf der man baut. Schwarz erreicht auf beiden Fuellungen
   * 14.07:1 bzw. 14.09:1. Die Hue tragen Fuellung und Kontur, die zweite
   * Kodierung traegt das Wort im Badge. Begruendung mit allen Messwerten:
   * guidance/accessibility.md. */
  --nx-text-on-status-fill: #1D1D1B;

  /* ================================================================ *
   * 5. SEMANTIK — Light Mode
   * ================================================================ */
  --nx-bg:              #FFFFFF;
  --nx-bg-subtle:       #F5F6F5;
  --nx-surface:         #FFFFFF;
  --nx-surface-raised:  #FFFFFF;
  /* ACHTUNG: --nx-surface-inverse ist die Umkehrung der aktuellen Flaeche und
   * wird im Dark Mode WEISS. Wo Waldgruen gemeint ist — Topbar, Sidebar,
   * Kartenkopf, gruene Sektion — gehoert --nx-forest-green hin, das in
   * beiden Themes derselbe Wert bleibt. */
  --nx-surface-inverse: #293F37;
  --nx-border:          #D2D6D4;
  --nx-border-strong:   #9AA09D;
  --nx-text:            #1D1D1B;
  --nx-text-secondary:  #3D4844;
  --nx-text-muted:      #6B716E;
  --nx-text-on-dark:    #FFFFFF;
  --nx-text-on-yellow:  #293F37;   /* NIE weisser Text auf Gelb */
  --nx-accent:          #FFCF00;
  --nx-accent-hover:    #E0B600;
  --nx-emphasis:        #293F37;   /* Betonung auf Weiss = Waldgruen (11.29:1).
                                    * Es gibt kein gelbes Pendant — siehe
                                    * guidance/accessibility.md. */
  --nx-link:            #293F37;
  --nx-link-hover:      #1C2B26;
  /* FOKUSRING — zweifarbig (entschieden 02.09.2026).
   *
   * Ein einfarbig gelber Ring erreicht auf Weiss 1.48:1. Er ist damit
   * unsichtbar UND eine freistehende gelbe Linie auf Weiss, die §2.2
   * verbietet. Der Ring hat deshalb zwei Baender: Sonnengelb und Waldgruen,
   * je 2 px, direkt aneinander. Gelb grenzt so immer an Waldgruen — das ist
   * der Anker, den §2.2 fordert.
   *
   * Das AEUSSERE Band ist das, was gegen den Grund kontrastiert. Eine feste
   * Reihenfolge kann das nicht leisten: Weiss und Waldgruen sind Gegenpole,
   * eine Farbe muss auf einem der beiden verschwinden. Deshalb zwei Rollen:
   *
   *   --nx-focus-outer   grenzt an den Grund   >= 7.62:1 in jedem Fall
   *   --nx-focus-inner   grenzt an das Element und an das aeussere Band
   *
   * Gemessen (alle Werte >= 3:1 fuer Bedienelemente, tatsaechlich >= 7.62):
   *   heller Grund, aussen Waldgruen   Weiss 11.29 · neutral-50 10.42
   *                                    neutral-100 9.34 · Sonnengelb 7.62
   *                                    yellow-100 10.40 · yellow-200 9.29
   *   dunkler Grund, aussen Sonnengelb Waldgruen 7.62 · green-700 9.96
   *                                    green-900 11.31 · #24352F 8.72
   *
   * Im Dark Mode tauschen die Rollen automatisch. Auf einer gruenen Flaeche
   * INNERHALB des Light Mode — Topbar, Sidebar, gruene Sektion — muss die
   * Komponente sie selbst tauschen; guidance/web-app-ui.md §3 zeigt wie.
   * Umsetzung im Abschnitt Basis-Defaults am Dateiende. */
  --nx-focus-outer:     #293F37;   /* aussen: Waldgruen gegen hellen Grund */
  --nx-focus-inner:     #FFCF00;   /* innen: Sonnengelb, am Waldgruen verankert */
  /* Bestandsname, bleibt fuer bestehenden Code gueltig. Er benannte den
   * einfarbigen Ring; wer ihn noch verwendet, bekommt Sonnengelb ohne Anker
   * und damit auf Weiss 1.48:1. Auf --nx-focus-outer/-inner umstellen. */
  --nx-focus-ring:      #FFCF00;

  /* ================================================================ *
   * 6. DIAGRAMMFARBEN — abgeleitet und validiert
   * ================================================================ *
   * Waldgruen und Sonnengelb sind als Serienfarben strukturell
   * ungeeignet: Waldgruen ist zu dunkel und nahezu neutral
   * (OKLCH L .35 / C .03), Sonnengelb zu hell (L .87). Die Serien-
   * farben unten sind aus den MARKENTOENEN abgeleitet und in das
   * lesbare Band gesteppt. Nachweis: guidance/dataviz.md
   *
   * SERIENZAHL-GRENZEN (validiert):
   *   Balken / Linien / gestapelt  max. 6 Serien
   *   Streu / Bubble / Small Mult. max. 3 Serien, danach Sonstige
   * Slot 2 liegt unter 3:1 auf Weiss. Direktlabels oder Tabellen-
   * ansicht sind Pflicht, sobald er verwendet wird.
   */
  --nx-chart-1: #078568;   /* Waldgruen-Serie  — Markenanker */
  --nx-chart-2: #D1AD32;   /* Sonnengelb-Serie — Markenanker */
  --nx-chart-3: #0365AF;   /* Blau */
  --nx-chart-4: #CC342D;   /* Rot */
  --nx-chart-5: #822AAC;   /* Violett */
  --nx-chart-6: #D4771A;   /* Orange */

  /* Sequenziell (Magnitude) — eine Hue, hell nach dunkel.
   * Endet exakt auf Waldgruen. Ordinal-Nutzung erst ab Stufe 300. */
  --nx-seq-100: #E2F1EB;
  --nx-seq-150: #CEE4DB;
  --nx-seq-200: #B9D5CA;
  --nx-seq-250: #A1C4B6;
  --nx-seq-300: #86AFA0;
  --nx-seq-400: #6A9887;
  --nx-seq-500: #51806F;
  --nx-seq-600: #3C6456;
  --nx-seq-700: #2E5044;
  --nx-seq-800: #293F37;   /* = Waldgruen */

  /* Divergierend (Polaritaet, z. B. Plan/Ist, Gewinn/Verlust).
   * Negativ = Rot-Arm, Positiv = Waldgruen-Arm, Mitte neutral grau.
   * Vorzeichen oder Pfeil muss die Aussage mittragen, nie Farbe allein. */
  --nx-div-neg-4: #CC342D;
  --nx-div-neg-3: #EA6B5E;
  --nx-div-neg-2: #FDA296;
  --nx-div-neg-1: #FFD0C8;
  --nx-div-mid:   #F0F1F0;
  --nx-div-pos-1: #CCE5DB;
  --nx-div-pos-2: #9FC9B9;
  --nx-div-pos-3: #67A891;
  --nx-div-pos-4: #23876B;

  /* Diagramm-Chrom */
  --nx-chart-surface: #FFFFFF;
  --nx-chart-grid:    #E8EAE9;
  --nx-chart-axis:    #9AA09D;
  --nx-chart-label:   #3D4844;

  /* ================================================================ *
   * 7. TYPOGRAFIE
   * ================================================================ */
  /* EINE Familie fuer alle Medien: Metropolis, Regular und Bold.
   * Schrift offiziell (Manual S. 22), Zuordnung zu allen Medien und
   * Fallbacks abgeleitet — Begruendung in BRAND.md 3.1.
   * --nx-font-heading-print und --nx-font-body-print sind mit Kit 2.0.0
   * entfallen; wer sie noch verwendet, setzt --nx-font-brand ein. */
  --nx-font-brand:         "Metropolis", "Montserrat", "Segoe UI", system-ui, sans-serif;
  /* Bestandsname, gleicher Wert — bleibt fuer bestehenden Code gueltig. */
  --nx-font-web:           var(--nx-font-brand);
  /* Nur Briefpapier-Fusszeile, auf diesen Grad kalibriert. Nicht fuer Neues. */
  --nx-font-briefpapier:   "Open Sans", "Segoe UI", Arial, sans-serif;
  --nx-font-mono:          ui-monospace, "Cascadia Mono", "Consolas", monospace;
  /* ZAHLENSCHRIFT (entschieden 02.09.2026): Metropolis hat keine Tabellen-
   * ziffern — kein tnum, proportionale Ziffern (1 = 357, 0 = 683 Einheiten).
   * Zahlenspalten in Tabellen, Belegen, Kennzahlen und Diagrammen setzen
   * deshalb Montserrat mit tabular-nums. Beides zusammen ueber die Klasse
   * oder Regel:  font-family: var(--nx-font-numeric);
   *              font-variant-numeric: var(--nx-numeric);
   * Nur fuer Zahlen — Text in derselben Tabelle bleibt Metropolis. */
  --nx-font-numeric:       "Montserrat", "Segoe UI", system-ui, sans-serif;
  --nx-numeric:            tabular-nums;

  --nx-weight-regular:  400;
  --nx-weight-semibold: 600;
  --nx-weight-bold:     700;

  /* Typeskala — feste Stufen */
  --nx-text-display: 3.5rem;
  --nx-text-h1:      2.25rem;
  --nx-text-h2:      1.75rem;
  --nx-text-h3:      1.375rem;
  --nx-text-body:    1rem;
  --nx-text-small:   0.875rem;
  --nx-text-micro:   0.75rem;

  /* Typeskala — fluid, fuer Hero- und Sektionsheadlines */
  --nx-text-display-fluid: clamp(2.25rem, 1.25rem + 4.2vw, 4rem);
  --nx-text-h1-fluid:      clamp(1.75rem, 1.25rem + 2.1vw, 2.25rem);
  --nx-text-h2-fluid:      clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);

  --nx-leading-tight:  1.15;
  --nx-leading-snug:   1.35;
  --nx-leading-body:   1.6;
  --nx-tracking-tight: -0.01em;
  --nx-tracking-caps:  0.06em;   /* Versalien brauchen Laufweite */
  --nx-measure:        68ch;     /* max. Zeilenlaenge Fliesstext */

  /* ================================================================ *
   * 8. ABSTAENDE — 4px-Raster
   * ================================================================ */
  --nx-space-0:  0;
  --nx-space-1:  4px;
  --nx-space-2:  8px;
  --nx-space-3:  12px;
  --nx-space-4:  16px;
  --nx-space-5:  20px;
  --nx-space-6:  24px;
  --nx-space-8:  32px;
  --nx-space-10: 40px;
  --nx-space-12: 48px;
  --nx-space-16: 64px;
  --nx-space-20: 80px;
  --nx-space-24: 96px;
  --nx-space-32: 128px;

  /* ================================================================ *
   * 9. RADIEN — klein halten, technisch-praeziser Stil
   * ================================================================ */
  --nx-radius-none: 0;
  --nx-radius-sm:   4px;
  --nx-radius-md:   8px;
  --nx-radius-lg:   12px;
  --nx-radius-pill: 999px;   /* nur fuer Chips und Badges */

  /* ================================================================ *
   * 10. SCHATTEN — sparsam; Brand bevorzugt flache Flaechen
   * ================================================================ */
  --nx-shadow-sm: 0 1px 2px rgba(29, 29, 27, 0.06);
  --nx-shadow-md: 0 4px 12px rgba(29, 29, 27, 0.08);
  --nx-shadow-lg: 0 8px 28px rgba(29, 29, 27, 0.10);

  /* ================================================================ *
   * 11. UI-METRIK — abgeleitet, fuer Web-Applikationen
   * ================================================================ */
  --nx-control-h-sm: 32px;
  --nx-control-h:    40px;
  --nx-control-h-lg: 48px;
  --nx-tap-min:      44px;    /* Mindest-Trefferflaeche mobil */
  --nx-border-w:     1px;
  --nx-focus-w:      2px;
  --nx-focus-offset: 2px;
  --nx-icon-sm:      16px;
  --nx-icon:         20px;
  --nx-icon-lg:      24px;
  --nx-stroke:       1.5px;   /* Iconlinienstaerke */

  /* ================================================================ *
   * 12. MOTION — abgeleitet; ruhig, kurz, nie dekorativ
   * ================================================================ */
  --nx-dur-fast: 120ms;
  --nx-dur:      200ms;
  --nx-dur-slow: 320ms;
  --nx-ease:     cubic-bezier(0.2, 0, 0.2, 1);

  /* ================================================================ *
   * 13. MARKENELEMENT — Chevron/Winkelform als clip-path.
   *     Naeherung der Bildmarken-Geometrie fuer Bildmasken.
   *     Fuer exakte Wiedergabe die SVG-Form aus assets/logo/ nutzen.
   * ================================================================ */
  --nx-chevron-clip: polygon(0% 0%, 50% 38%, 100% 0%, 100% 62%, 50% 100%, 0% 62%);
}

/* ================================================================== *
 * DARK MODE — abgeleitet, nicht Teil des offiziellen Manuals.
 * Bewusst gewaehlte Stufen, keine automatische Invertierung.
 * Die Grundflaeche ist ein sehr dunkles Waldgruen, kein Neutralgrau,
 * damit der Auftritt auch dunkel erkennbar Nexovis bleibt.
 * ================================================================== */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;

    --nx-bg:              #14201C;
    --nx-bg-subtle:       #1C2B26;
    --nx-surface:         #1C2B26;
    --nx-surface-raised:  #24352F;
    --nx-surface-inverse: #FFFFFF;
    --nx-border:          #35453F;
    --nx-border-strong:   #56655F;
    --nx-text:            #FFFFFF;
    --nx-text-secondary:  #E4E9E7;
    --nx-text-muted:      #B8C2BE;
    --nx-text-on-dark:    #FFFFFF;
    --nx-accent:          #FFCF00;
    --nx-accent-hover:    #FFE98A;
    --nx-emphasis:        #FFCF00;
    --nx-link:            #FFCF00;
    --nx-link-hover:      #FFE98A;
    /* Fokusring: die Rollen tauschen. Aussen Sonnengelb, weil es gegen die
     * dunkle Grundflaeche kontrastiert (green-900 11.31:1); innen Waldgruen
     * als Anker. Siehe den Kommentar im Light-Satz. */
    --nx-focus-outer:     #FFCF00;
    --nx-focus-inner:     #293F37;

    --nx-success:  #6DBE8C;
    --nx-warning:  #E0B600;
    --nx-serious:  #EF8A55;
    --nx-error:    #F08479;
    --nx-info:     #7FB4D4;

    --nx-chart-1: #1F8A6C;
    --nx-chart-2: #AD8D15;
    --nx-chart-3: #2F8ADC;
    --nx-chart-4: #DE4F44;
    --nx-chart-5: #A752D4;
    --nx-chart-6: #CA6E08;

    --nx-chart-surface: #1C2B26;
    --nx-chart-grid:    #35453F;
    --nx-chart-axis:    #6B7B75;
    --nx-chart-label:   #E4E9E7;

    --nx-div-mid: #383F3C;

    --nx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --nx-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --nx-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.5);
  }
}

/* Expliziter Theme-Umschalter gewinnt in beide Richtungen */
:root[data-theme="dark"] {
  color-scheme: dark;

  --nx-bg:              #14201C;
  --nx-bg-subtle:       #1C2B26;
  --nx-surface:         #1C2B26;
  --nx-surface-raised:  #24352F;
  --nx-surface-inverse: #FFFFFF;
  --nx-border:          #35453F;
  --nx-border-strong:   #56655F;
  --nx-text:            #FFFFFF;
  --nx-text-secondary:  #E4E9E7;
  --nx-text-muted:      #B8C2BE;
  --nx-text-on-dark:    #FFFFFF;
  --nx-accent:          #FFCF00;
  --nx-accent-hover:    #FFE98A;
  --nx-emphasis:        #FFCF00;
  --nx-link:            #FFCF00;
  --nx-link-hover:      #FFE98A;
  /* Fokusring: die Rollen tauschen. Aussen Sonnengelb, weil es gegen die
   * dunkle Grundflaeche kontrastiert (green-900 11.31:1); innen Waldgruen
   * als Anker. Siehe den Kommentar im Light-Satz. */
  --nx-focus-outer:     #FFCF00;
  --nx-focus-inner:     #293F37;

  --nx-success:  #6DBE8C;
  --nx-warning:  #E0B600;
  --nx-serious:  #EF8A55;
  --nx-error:    #F08479;
  --nx-info:     #7FB4D4;

  --nx-chart-1: #1F8A6C;
  --nx-chart-2: #AD8D15;
  --nx-chart-3: #2F8ADC;
  --nx-chart-4: #DE4F44;
  --nx-chart-5: #A752D4;
  --nx-chart-6: #CA6E08;

  --nx-chart-surface: #1C2B26;
  --nx-chart-grid:    #35453F;
  --nx-chart-axis:    #6B7B75;
  --nx-chart-label:   #E4E9E7;

  --nx-div-mid: #383F3C;

  --nx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --nx-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --nx-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.5);
}

/* ================================================================== *
 * Bewegungsreduktion respektieren
 * ================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root { --nx-dur-fast: 0ms; --nx-dur: 0ms; --nx-dur-slow: 0ms; }
}

/* ================================================================== *
 * Optionale Basis-Defaults — bei Bedarf aktivieren
 * ================================================================== */
/*
body {
  font-family: var(--nx-font-web);
  color: var(--nx-text);
  background: var(--nx-bg);
  line-height: var(--nx-leading-body);
}
h1, h2, h3 { font-weight: var(--nx-weight-bold); line-height: var(--nx-leading-tight); }
a { color: var(--nx-link); }
a:hover { color: var(--nx-link-hover); }
:focus-visible {
  /* Zweifarbiger Ring: das aeussere Band als outline, das innere als
   * box-shadow, das genau den Offset ausfuellt. Beide Baender liegen damit
   * direkt aneinander — Gelb hat seinen Anker, das aeussere Band den
   * Kontrast gegen den Grund. */
  outline: var(--nx-focus-w) solid var(--nx-focus-outer);
  outline-offset: var(--nx-focus-offset);
  box-shadow: 0 0 0 var(--nx-focus-offset) var(--nx-focus-inner);
}
/* Auf einer gruenen Flaeche im Light Mode die Rollen tauschen, sonst
 * verschwindet das aeussere Waldgruen im Grund. Im Dark Mode passiert das
 * automatisch ueber die Tokens. */
.nx-on-green :focus-visible {
  outline-color: var(--nx-focus-inner);
  box-shadow: 0 0 0 var(--nx-focus-offset) var(--nx-focus-outer);
}
table { font-variant-numeric: var(--nx-numeric); }
*/