/* Theme-Schicht: überträgt das cnoss Designsystem (tokens.css) auf Web Awesome.
   Die einzige Stelle, an der --wa-* überschrieben wird. Alles andere nutzt nur --wa-* Tokens.
   Ohne Cascade Layer, damit es die Layer von Web Awesome sicher überschreibt.
   Nur helles Theme, wie im Designsystem.
   ------------------------------------------------------------------------ */

:where(:root),
.wa-light {
  /* Markenfarbe: Pink, die Interaktionsfarbe des Designsystems. Die Leiter von hell (95)
     bis dunkel (05) wird aus dem Pink gemischt, damit alle Komponenten passende Töne bekommen. */
  --wa-color-brand-95: color-mix(in oklab, var(--interaction-color) 6%, white);
  --wa-color-brand-90: color-mix(in oklab, var(--interaction-color) 13%, white);
  --wa-color-brand-80: color-mix(in oklab, var(--interaction-color) 28%, white);
  --wa-color-brand-70: color-mix(in oklab, var(--interaction-color) 50%, white);
  --wa-color-brand-60: color-mix(in oklab, var(--interaction-color) 75%, white);
  --wa-color-brand-50: var(--interaction-color);
  --wa-color-brand-40: color-mix(in oklab, var(--interaction-color) 85%, black);
  --wa-color-brand-30: color-mix(in oklab, var(--interaction-color) 68%, black);
  --wa-color-brand-20: color-mix(in oklab, var(--interaction-color) 50%, black);
  --wa-color-brand-10: color-mix(in oklab, var(--interaction-color) 33%, black);
  --wa-color-brand-05: color-mix(in oklab, var(--interaction-color) 22%, black);

  /* Flächen und Text */
  --wa-color-surface-default: var(--background-color);
  --wa-color-surface-raised: var(--background-color);
  --wa-color-surface-lowered: color-mix(in oklab, var(--surface-band-color) 45%, white);
  --wa-color-surface-border: var(--border-color);
  --wa-color-text-normal: var(--text-color);
  --wa-color-text-quiet: var(--text-muted-color);
  --wa-color-text-link: var(--interaction-color);

  /* Fokus: 2px Pink, wie im Designsystem ergänzt */
  --wa-color-focus: var(--interaction-color);
  --wa-focus-ring-width: var(--border-width);
  --wa-focus-ring-offset: 2px;

  /* Schrift: Barlow. Fließtext leicht (300), Aktionen und Überschriften mittelfett (500). */
  --wa-font-family-body: var(--font-family-sans);
  --wa-font-family-heading: var(--font-family-sans);
  --wa-font-family-longform: var(--font-family-sans);
  --wa-font-weight-body: var(--fw-light);
  --wa-font-weight-heading: var(--fw-medium);
  --wa-font-weight-action: var(--fw-medium);
  --wa-form-control-value-font-weight: var(--fw-normal);
  --wa-font-size-scale: var(--scaling-factor);

  /* Radien sparsam: Knöpfe 3px, Panels 0,5rem */
  --wa-border-radius-scale: 0.67;
  --wa-panel-border-radius: var(--radius-s);

  /* Schatten nur dezent */
  --wa-shadow-blur-scale: 0.8;
}

/* Namenskollision: tokens.css definiert --box-shadow global, und wa-input nutzt eine eigene
   Variable gleichen Namens. Ohne diese Zeile erben alle Eingabefelder den weichen Hover-Schatten. */
wa-input {
  --box-shadow: none;
}