/* ==========================================================================
   CONWIN · Brand Theme                                             v3.4.0
   --------------------------------------------------------------------------
   Quelle:     https://brand.conwin.de/themes/brand/brand.css
   Doku:       https://brand.conwin.de/product-design/brand/
   Referenz:   Webseite (conwin.de)
   Modes:      nur Night.

   Diese Datei wird in Produkte KOPIERT. Nicht im Produkt ändern — Änderungen
   gehören ins Brand Board und kommen mit neuer Versionsnummer zurück.

   Aufbau (drei Ebenen):
     1. Marke   --cw-*   feste Grundwerte. Der Kern ist in jedem Theme identisch;
                         Ergänzungen eines Themes stehen getrennt davon.
     2. Theme   --ui-*   Rollen (Fläche, Text, Linie, Akzent …). Jedes Theme
                         setzt dieselben Namen mit eigenen Werten — Komponenten
                         schreiben nur gegen --ui-* und funktionieren so in
                         jedem Theme.
     3. Produkt          eigene Variablen nur für echte Ausnahmen.

   Anwendung:  <body class="cw-theme-brand">
   ========================================================================== */

/* ---------- 1. Marke ---------------------------------------------------- */
:root {
  --cw-green-950: #161e1b;   /* Tiefstes Grün — Terminal-Hintergrund */
  --cw-green-900: #1a2421;   /* Dunkelgrün — Primär */
  --cw-green-850: #232d2a;   /* Panel-Grün — Terminal-Flächen */
  --cw-green-800: #2b3c37;   /* Sekundärgrün */
  --cw-sage:      #cde2ba;   /* Salbeigrün */
  --cw-neon:      #e0fd0a;   /* Neon / Lime — Akzent, nur digital */
  --cw-white:     #ffffff;
  --cw-attention: #f23d25;   /* Signal Rot */
  --cw-green-3:   #21bd5f;   /* Signal Grün (Sekundärpalette „Green 3") */
  --cw-orange:    #f59e0b;   /* Signal Orange (Sekundärpalette „Orange") */

  --cw-font-sans: 'Moderat', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --cw-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
}

/* ---------- 2. Theme: Brand (Night) ------------------------------------- */
.cw-theme-brand {
  color-scheme: dark;

  /* Flächen — die Webseite liegt bewusst dunkler als die Werkzeuge */
  --ui-surface-0: #0e1512;               /* Seiten-Hintergrund */
  --ui-surface-1: #141c17;               /* erhöhte Flächen, Karten, Widgets */
  --ui-surface-2: var(--cw-green-900);   /* Overlays, Hover auf Karten, Menüs */

  /* Überlagerungen (Weiß mit Deckkraft) */
  --ui-fill-1: rgba(255, 255, 255, 0.03);   /* Hover auf Fläche */
  --ui-fill-2: rgba(255, 255, 255, 0.04);   /* ruhende Kachel */
  --ui-fill-3: rgba(255, 255, 255, 0.06);   /* Hover stark */
  --ui-fill-4: rgba(255, 255, 255, 0.10);   /* aktiv */

  /* Linien */
  --ui-line-1: rgba(255, 255, 255, 0.04);   /* Haarlinie */
  --ui-line-2: rgba(255, 255, 255, 0.07);   /* Standard-Rahmen, Trenner */
  --ui-line-3: rgba(205, 226, 186, 0.18);   /* Hover-Rahmen, betonte Karte (Salbei) */
  --ui-line-4: rgba(255, 255, 255, 0.30);   /* betonter Rahmen */

  /* Text */
  --ui-text-strong: var(--cw-white);          /* Headlines */
  --ui-text-1: rgba(255, 255, 255, 0.85);     /* Fließtext */
  --ui-text-2: rgba(255, 255, 255, 0.45);     /* Sekundärtext — 4,5:1 auf surface-0 */
  --ui-text-3: rgba(255, 255, 255, 0.22);     /* Dekor, Linien-Labels — kein Lesetext (2:1) */
  --ui-text-soft: var(--cw-sage);             /* Markenton, z. B. Zitate */

  /* Akzent */
  --ui-accent:             var(--cw-neon);
  --ui-accent-hover:       #f0ff2a;           /* Neon heller — Hover auf Neon-Buttons */
  --ui-on-accent:          #000000;
  --ui-accent-bg:          rgba(224, 253, 10, 0.05);
  --ui-accent-bg-strong:   rgba(224, 253, 10, 0.12);
  --ui-accent-line:        rgba(224, 253, 10, 0.30);
  --ui-accent-line-strong: rgba(224, 253, 10, 0.40);
  --ui-accent-glow:        rgba(224, 253, 10, 0.25);   /* Leuchten um Neon-Elemente */

  /* Signal */
  --ui-signal:    var(--cw-neon);
  --ui-on-signal: #000000;

  /* Status */
  --ui-danger:       var(--cw-attention);
  --ui-danger-text:  #ff6a55;               /* Marken-Rot aufgehellt, ≥ 6:1 auf surface-0 */
  --ui-danger-bg:    rgba(242, 61, 37, 0.08);
  --ui-danger-line:  rgba(242, 61, 37, 0.40);
  --ui-success:      var(--cw-green-3);
  --ui-warning:      var(--cw-orange);

  /* Fokus */
  --ui-focus: var(--cw-neon);

  /* Kit-Stufen — BRAND-EIGEN, nicht Teil des Kern-Vertrags (ROLLEN-KERN.md): feste Deckkraftstufen
     (--ui-white-a*, --ui-black-a*, --ui-accent-a*, --ui-sage-a* …), die die Bausteine von conwin.de brauchen.
     Gibt es nur in Brand; Product und Whiteboard kennen sie nicht. Für neue Bausteine zuerst die Rollen oben verwenden. */
  --ui-white-a02:  rgba(255, 255, 255, 0.02);   /* Weiß mit Deckkraft */
  --ui-white-a025: rgba(255, 255, 255, 0.025);
  --ui-white-a05:  rgba(255, 255, 255, 0.05);
  --ui-white-a08:  rgba(255, 255, 255, 0.08);
  --ui-white-a10:  rgba(255, 255, 255, 0.1);
  --ui-white-a15:  rgba(255, 255, 255, 0.15);
  --ui-white-a20:  rgba(255, 255, 255, 0.2);
  --ui-white-a25:  rgba(255, 255, 255, 0.25);
  --ui-white-a40:  rgba(255, 255, 255, 0.4);
  --ui-white-a60:  rgba(255, 255, 255, 0.6);
  --ui-white-a70:  rgba(255, 255, 255, 0.7);
  --ui-white-a80:  rgba(255, 255, 255, 0.8);
  --ui-white-a90:  rgba(255, 255, 255, 0.9);
  --ui-white-soft: #efefef;                     /* fast Weiß, Texte in Widgets */
  --ui-black:      #000000;                     /* Schrift auf Weiß */
  --ui-black-a04:  rgba(0, 0, 0, 0.04);         /* Schwarz mit Deckkraft: Schatten, Scrims */
  --ui-black-a05:  rgba(0, 0, 0, 0.05);
  --ui-black-a06:  rgba(0, 0, 0, 0.06);
  --ui-black-a07:  rgba(0, 0, 0, 0.07);
  --ui-black-a10:  rgba(0, 0, 0, 0.1);
  --ui-black-a20:  rgba(0, 0, 0, 0.2);
  --ui-black-a25:  rgba(0, 0, 0, 0.25);
  --ui-black-a50:  rgba(0, 0, 0, 0.5);
  --ui-black-a60:  rgba(0, 0, 0, 0.6);
  --ui-accent-deep: #b8d900;                    /* Ende des Neon-Verlaufs */
  --ui-accent-a04: rgba(224, 253, 10, 0.04);    /* Neon-Flächen, -Linien und -Glows */
  --ui-accent-a06: rgba(224, 253, 10, 0.06);
  --ui-accent-a07: rgba(224, 253, 10, 0.07);
  --ui-accent-a08: rgba(224, 253, 10, 0.08);
  --ui-accent-a10: rgba(224, 253, 10, 0.1);
  --ui-accent-a15: rgba(224, 253, 10, 0.15);
  --ui-accent-a20: rgba(224, 253, 10, 0.2);
  --ui-accent-a22: rgba(224, 253, 10, 0.22);
  --ui-accent-a50: rgba(224, 253, 10, 0.5);
  --ui-accent-a60: rgba(224, 253, 10, 0.6);
  --ui-sage-a05:   rgba(205, 226, 186, 0.05);   /* Salbei mit Deckkraft: Schrift und Balken in Widgets */
  --ui-sage-a10:   rgba(205, 226, 186, 0.1);    /* Hover einer Taste in Salbei (Rechner, E79) */
  --ui-sage-a15:   rgba(205, 226, 186, 0.15);   /* getönte Fläche in Salbei, Gegenstück zu --ui-accent-a15 (E79) */
  --ui-sage-a20:   rgba(205, 226, 186, 0.2);    /* gedrückte Taste in Salbei (Rechner, E79) */
  --ui-sage-a30:   rgba(205, 226, 186, 0.3);    /* Rahmen in Salbei, Gegenstück zu --ui-accent-line (E79) */
  --ui-sage-a40:   rgba(205, 226, 186, 0.4);
  --ui-sage-a45:   rgba(205, 226, 186, 0.45);
  --ui-sage-a50:   rgba(205, 226, 186, 0.5);
  --ui-sage-a60:   rgba(205, 226, 186, 0.6);
  --ui-sage-a70:   rgba(205, 226, 186, 0.7);
  --ui-sage-a80:   rgba(205, 226, 186, 0.8);
  --ui-ambient-blue: #2e31ff;                   /* Blau im Hintergrund-Glow (br-ambient) */
  --ui-surface-deep: #0a0f0d;                   /* tiefste Fläche, Schrift auf Salbei */
  --ui-divider:     #35433e;                    /* Trenner und Schalter in Widgets */
  --ui-divider-a70: rgba(53, 67, 62, 0.7);
  --ui-moss:        #829e85;                    /* gedämpftes Grün in Widgets */
  --ui-moss-a30:    rgba(130, 158, 133, 0.3);
  --ui-moss-a40:    rgba(130, 158, 133, 0.4);
  /* Datenfarben (E86, Issue #28): Serien und Kategorien in Diagrammen, Legenden, Gruppen – ohne Statusbedeutung.
     1–6 wie Product (Night), 7 Blau aus der Sekundärpalette, 8 Salbei aus der Marke; nie Rot, Grün oder Orange (Status). */
  --ui-chart-1: var(--ui-text-strong);                       /* neutral, erste Serie */
  --ui-chart-2: #1eced0;                                     /* Turquoise */
  --ui-chart-3: #d55181;                                     /* Rosa */
  --ui-chart-4: color-mix(in srgb, #a812cd 75%, #ffffff);    /* Purple aufgehellt */
  --ui-chart-5: #9085e9;                                     /* Lavendel */
  --ui-chart-6: #34c79a;                                     /* Smaragd */
  --ui-chart-7: #3c88d9;                                     /* Blau (Sekundärpalette „Blue“) */
  --ui-chart-8: var(--cw-sage);                              /* Salbei */
  --ui-green-800-a40: rgba(43, 60, 55, 0.4);    /* Hintergrund-Flecken */
  --ui-green-800-a80: rgba(43, 60, 55, 0.8);
  --ui-green-900-a06: rgba(26, 36, 33, 0.06);   /* Kennzahl auf heller Diagramm-Karte */
  --ui-error:       #ef4444;                    /* Formular-Fehler der Webseite (nicht --ui-danger) */
  --ui-error-text:  #f87171;
  --ui-error-a10:   rgba(239, 68, 68, 0.1);
  --ui-error-a20:   rgba(239, 68, 68, 0.2);

  /* Schrift — gemeinsame Skala aller Themes */
  --ui-font:       var(--cw-font-sans);
  --ui-font-mono:  var(--cw-font-mono);
  --ui-fw-body:    300;                   /* Moderat Light */
  --ui-fw-regular: 400;
  --ui-fw-title:   500;                   /* Moderat Medium */

  --ui-fs-4xs:   8px;    /* Mini-Labels in Widgets */
  --ui-fs-3xs:   9px;
  --ui-fs-micro: 10px;
  --ui-fs-2xs:   11px;   /* Eyebrows, Labels in Versalien */
  --ui-fs-xs:    12px;
  --ui-fs-sm:    13px;   /* Buttons, Sekundärtext */
  --ui-fs-base:  14px;
  --ui-fs-md:    15px;
  --ui-fs-lg:    16px;   /* Fließtext */
  --ui-fs-xl:    18px;
  --ui-fs-2xl:   20px;   /* Karten-Titel */
  --ui-fs-3xl:   24px;
  --ui-fs-4xl:   2.2rem; /* Feature-Titel, Kennzahlen */
  --ui-fs-5xl:   3rem;
  --ui-fs-6xl:   4rem;   /* große Kennzahlen */
  --ui-fs-headline: clamp(2rem, 3.5vw, 3rem);     /* Abschnitts-Überschrift (h2) */
  --ui-fs-display:  clamp(2.5rem, 8vw, 3.8rem);   /* Seiten-Überschrift (Hero, h1) */
  /* Kit-Stufen der Webseite */
  --ui-fs-lead-sm:  17.6px;   /* Lead, schmal */
  --ui-fs-lead:     18.4px;   /* Lead, Fragen */
  --ui-fs-title-xs: 19.2px;
  --ui-fs-title-sm: 22.4px;
  --ui-fs-title-md: 25.6px;
  --ui-fs-title:    28px;
  --ui-fs-title-lg: 32px;
  --ui-fs-quote:    36px;     /* Zitat */
  --ui-fs-stat:     52px;     /* große Zahl im Widget */
  /* Großbild (Messe, Bühne): Stufen --ui-fs-stage-* gelten nur unter .br-stage (brand-kit.css, Block 2 Typografie, E81) */

  --ui-lh-display: 1.08;   /* große Überschriften */
  --ui-lh-tight:   1.1;
  --ui-lh-heading: 1.2;
  --ui-lh-snug:    1.45;   /* Lead, Karten-Text */
  --ui-lh-body:    1.6;

  --ui-tracking-display: -0.03em;   /* Display-Überschriften */
  --ui-tracking-tight:   -0.02em;   /* Überschriften */
  --ui-tracking-wide:    0.05em;
  --ui-tracking-label:   0.08em;    /* Labels */
  --ui-tracking-loose:   0.1em;
  --ui-tracking-caps:    0.12em;    /* Eyebrows in Versalien */

  --ui-icon-xs: 14px;
  --ui-icon-sm: 16px;
  --ui-icon-md: 18px;
  --ui-icon-lg: 20px;
  --ui-icon-xl: 24px;

  /* Radius — die Webseite ist runder als die Werkzeuge */
  --ui-radius-xs:   4px;
  --ui-radius-sm:   6px;
  --ui-radius-md:   8px;    /* Buttons, kleine Elemente */
  --ui-radius-lg:   14px;   /* Karten, Widgets */
  --ui-radius-xl:   22px;   /* große Flächen, Hero-Karten */
  --ui-radius-pill: 999px;

  /* Abstand — 4er-Raster */
  --ui-space-1:  4px;
  --ui-space-2:  8px;
  --ui-space-3:  12px;
  --ui-space-4:  16px;
  --ui-space-5:  20px;
  --ui-space-6:  24px;
  --ui-space-8:  32px;
  --ui-space-10: 40px;
  --ui-space-12: 48px;
  --ui-space-16: 64px;
  --ui-space-20: 80px;
  --ui-space-24: 96px;

  /* Layout */
  --ui-layout-gap:  24px;
  --ui-panel-pad:   40px;
  --ui-rail-w:  68px;
  --ui-content-max: 1200px;

  /* Tiefe & Bewegung — weiche, lange Ease für Reveals */
  --ui-shadow-pop:  0 24px 60px rgba(0, 0, 0, 0.5);
  --ui-shadow-glow: 0 0 24px var(--ui-accent-glow);   /* Neon-Buttons, aktive Punkte */
  --ui-shadow-rail: 0 4px 20px rgba(0, 0, 0, 0.5);
  --ui-scrim:       rgba(14, 21, 18, 0.85);
  --ui-ease:        cubic-bezier(.16, 1, .3, 1);
  --ui-dur-fast:    0.15s;
  --ui-dur:         0.25s;
  --ui-dur-slow:    0.6s;

  /* Grundlage */
  font-family: var(--ui-font);
  color: var(--ui-text-1);
  background-color: var(--ui-surface-0);
}