/* ==========================================================================
   kraftwerk Design Tokens — msu.Wasserportal
   --------------------------------------------------------------------------
   Drei Ebenen:
     1. Primitive   (--kw-*)      feste kraftwerk-Palette, nie direkt benutzen
     2. Marke       (--brand-*)   pro Mandant überschreibbar (Weißlabel)
     3. Semantisch  (--text-*, --surface-*, …)  das, was Templates benutzen

   Ein Mandant überschreibt nur die --brand-*-Ebene; alles andere zieht mit.
   Siehe base-new.html.twig, Block "brand-overrides".
   ========================================================================== */

/* --- Schrift ------------------------------------------------------------ */

@font-face {
  font-family: 'Natom Pro';
  src: url('/fonts/natom/NatomPro-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Natom Pro';
  src: url('/fonts/natom/NatomPro-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Natom Pro';
  src: url('/fonts/natom/NatomPro-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Natom Pro';
  src: url('/fonts/natom/NatomPro-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Natom Pro Black';
  src: url('/fonts/natom/NatomPro-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* --- 1. Primitive: kraftwerk-Palette ------------------------------------ */

:root {
  --kw-green:       #93C90E;
  --kw-green-mid:   #76A211;
  --kw-green-dark:  #58790E;
  --kw-green-deep:  #263406;
  --kw-green-80:    #A9D43E;
  --kw-green-60:    #BEDF6E;
  --kw-green-40:    #D4E99F;

  --kw-ink:         #2F3636;
  --kw-black:       #000000;
  --kw-white:       #FFFFFF;
  --kw-off-white:   #F7F7F7;
  --kw-grey-700:    #5D6264;
  --kw-grey-500:    #74787A;
  --kw-grey-400:    #8E9193;
  --kw-grey-200:    #D7D9D9;

  --kw-red:         #D0183D;
  --kw-blue:        #2DAFE6;

  --kw-font-display: 'Natom Pro Black', 'Natom Pro', system-ui, sans-serif;
  --kw-font-body:    'Natom Pro', system-ui, sans-serif;

  /* Icewall setzt body { font-family: var(--font-display) } und meint damit
     die GRUNDschrift, nicht die Auszeichnungsschrift. Der Name kollidiert
     mit unserem Begriff — deshalb zeigt er hier bewusst auf die Body-Schrift,
     sonst steht die ganze Anwendung in Natom Pro Black. */
  --font-display: var(--kw-font-body);
  --font-body:    var(--kw-font-body);
}

/* --- 2. Marke: pro Mandant überschreibbar ------------------------------- */

:root {
  --brand-primary:      var(--kw-green);
  --brand-primary-mid:  var(--kw-green-mid);
  --brand-primary-dark: var(--kw-green-dark);
  --brand-surface:      var(--kw-ink);   /* dunkle Markenfläche */

  /* Textfarbe AUF der Markenfarbe.
     Bewusst Ink statt Weiß: Weiß auf #93C90E ergibt 1,98:1 und verfehlt
     WCAG AA (4,5:1) deutlich. Ink erreicht 6,23:1, Schwarz 10,60:1.
     Ein Mandant mit dunklerer Markenfarbe setzt hier auf --kw-white. */
  --brand-on-primary:   var(--kw-ink);

  /* Akzent auf der dunklen Markenfläche (Punkte, Symbole).
     Wird vom Mandanten-Branding überschrieben, falls die Markenfarbe dort
     zu kontrastarm wäre — siehe PortalBrandExtension::visibleOn(). */
  --accent-on-surface:  var(--brand-primary);
}

/* --- Brücke zum Icewall-Bestand ----------------------------------------
   Die Tailwind-Klassen bg-primary / text-primary / border-primary hängen an
   --color-primary (Icewall-Default: blue-900). 193 Nutzungen in Templates.
   Statt sie einzeln zu ersetzen, zeigt die Variable auf die Markenfarbe.

   Bewusst der DUNKLE Grünton: Icewall nutzt dieselbe Variable sowohl für
   Text auf Weiß (text-primary) als auch für Flächen mit weißem Text
   (bg-primary + text-white). Nur --brand-primary-dark trägt beide Fälle
   (je 5,05:1). Das helle #93C90E ergäbe 1,98:1 und wäre unlesbar.
   Das prägnante Hellgrün sitzt dafür in den kw-Komponenten unten.
   ------------------------------------------------------------------------ */

:root {
  --color-primary: var(--brand-primary-dark);
}

/* --- 3. Semantisch: das benutzen die Templates -------------------------- */

:root {
  --text-primary:    var(--kw-ink);
  --text-secondary:  var(--kw-grey-700);
  --text-muted:      var(--kw-grey-400);
  --text-on-dark:    var(--kw-white);
  --text-on-accent:  var(--brand-on-primary);
  --text-accent:     var(--brand-primary-dark);
  --text-link:       var(--brand-primary-dark);

  --surface-page:    var(--kw-white);
  --surface-subtle:  var(--kw-off-white);
  --surface-dark:    var(--brand-surface);
  --surface-accent:  var(--brand-primary);

  --border-subtle:   var(--kw-grey-200);
  --border-strong:   var(--kw-ink);
  --border-on-dark:  rgba(255, 255, 255, 0.16);

  --positive:        var(--brand-primary);
  --negative:        var(--kw-red);
  --info:            var(--kw-blue);

  /* Statusfarben bleiben bewusst markenunabhängig: Erfolg ist grün und
     Fehler rot, auch wenn ein Mandant eine grüne oder rote Hausfarbe hat. */
  --status-ok:          #15803D;
  --status-ok-bg:       #DCFCE7;
  --status-ok-border:   #A7E8BD;
  --status-error:       #B91C1C;
  --status-error-bg:    #FEF2F2;
  --status-error-border:#FECACA;
  --status-warn:        #7A4A00;
  --status-warn-bg:     #FFF8E6;
  --status-warn-border: #F2DFAE;
  --status-info:        #0A5A7A;
  --status-info-bg:     #DBEAFE;
  --status-info-border: #BFDBFE;

  /* Typo-Skala */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;

  --text-h1:      2.25rem;
  --text-h2:      1.75rem;
  --text-h3:      1.375rem;
  --text-body-lg: 1.25rem;
  --text-body:    1.0625rem;
  --text-small:   0.9375rem;
  --text-caption: 0.8125rem;

  --leading-tight:   1.02;
  --leading-snug:    1.18;
  --leading-normal:  1.5;
  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;

  /* 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;
  --space-9: 96px; --space-10: 128px;

  --radius-xs: 4px;  --radius-sm: 8px;  --radius-md: 12px;
  --radius-lg: 20px; --radius-capsule: 999px;

  --border-hairline: 1px;
  --border-regular:  2px;

  --shadow-sm: 0 1px 2px rgba(47, 54, 54, 0.06), 0 1px 3px rgba(47, 54, 54, 0.10);
  --shadow-md: 0 2px 6px rgba(47, 54, 54, 0.08), 0 6px 16px rgba(47, 54, 54, 0.10);
  --shadow-lg: 0 8px 24px rgba(47, 54, 54, 0.12), 0 18px 48px rgba(47, 54, 54, 0.14);

  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;

  --container-max: 1200px;
}

/* --- Typo-Hilfsklassen -------------------------------------------------- */

.kw-h1 {
  font-family: var(--kw-font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-h1);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.kw-h2 {
  font-family: var(--kw-font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.kw-h3 {
  font-family: var(--kw-font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}
.kw-body {
  font-family: var(--kw-font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--text-primary);
}
.kw-small  { font-family: var(--kw-font-body); font-size: var(--text-small);   color: var(--text-secondary); }
.kw-caption{ font-family: var(--kw-font-body); font-size: var(--text-caption); color: var(--text-muted); }
.kw-accent { color: var(--text-accent); }

/* --- Bausteine ---------------------------------------------------------- */

.kw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  padding: 15px var(--space-5);
  border: none;
  border-radius: var(--radius-capsule);
  font-family: var(--kw-font-body);
  font-weight: var(--weight-bold);
  font-size: 17px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.kw-btn-primary {
  background: var(--surface-accent);
  color: var(--text-on-accent);
}
.kw-btn-primary:hover { background: var(--brand-primary-mid); }

.kw-btn-secondary {
  padding: 13px var(--space-5);
  background: transparent;
  border: var(--border-regular) solid var(--kw-ink);
  color: var(--kw-ink);
  font-size: 15px;
}
.kw-btn-secondary:hover { background: var(--kw-ink); color: var(--kw-white); }

.kw-field {
  width: 100%;
  padding: 13px var(--space-4);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-family: var(--kw-font-body);
  font-size: 16px;
  color: var(--text-primary);
  background: var(--surface-page);
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.kw-field:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 22%, transparent);
}
.kw-label {
  display: block;
  font-family: var(--kw-font-body);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

/* Sichtbarer Fokus für Tastaturbedienung (BFSG) */
.kw-btn:focus-visible,
.kw-field:focus-visible,
a:focus-visible {
  outline: 3px solid var(--brand-primary-dark);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .kw-btn, .kw-field { transition: none; }
}