/* Smart-Optimizer - Farb-Tokens
   Abgeleitet aus den vier CI-Werten, Stand 21.09.2026.
   Erzeugt von tokens.py - nicht von Hand aendern, sondern dort.
   Alle Paare sind gegen WCAG 2.2 AA geprueft. */

:root {
  /* Primitive */
  --so-blau-50: #F2F7FF;
  --so-blau-100: #E2EEFF;
  --so-blau-200: #C5DDFF;
  --so-blau-300: #9DC5FF;
  --so-blau-400: #75A9F6;
  --so-blau-500: #5291ED;
  --so-blau-600: #3975CA;
  --so-blau-700: #3257BC;
  --so-blau-800: #1A4684;
  --so-blau-900: #0F3162;
  --so-blau-950: #061F44;

  --so-grau-50: #F5F7FA;
  --so-grau-100: #EAEDF2;
  --so-grau-200: #D6DBE3;
  --so-grau-300: #BBC3CF;
  --so-grau-400: #9FA8B8;
  --so-grau-500: #838EA0;
  --so-grau-600: #6C7788;
  --so-grau-700: #555E6D;
  --so-grau-800: #374151;
  --so-grau-900: #2D333D;
  --so-grau-950: #1C2128;

  --so-erfolg-50: #EFFAF1;
  --so-erfolg-100: #E0F3E4;
  --so-erfolg-200: #C4E4CB;
  --so-erfolg-300: #A0D1AC;
  --so-erfolg-400: #77BA89;
  --so-erfolg-500: #51A26A;
  --so-erfolg-600: #388953;
  --so-erfolg-700: #266E3F;
  --so-erfolg-800: #18552E;
  --so-erfolg-900: #0C3D1F;
  --so-erfolg-950: #042812;

  --so-warnung-50: #FEF5EA;
  --so-warnung-100: #F9EAD7;
  --so-warnung-200: #F0D6B4;
  --so-warnung-300: #E2BC87;
  --so-warnung-400: #D09E55;
  --so-warnung-500: #BB811A;
  --so-warnung-600: #9E6A00;
  --so-warnung-700: #7E5400;
  --so-warnung-800: #624000;
  --so-warnung-900: #472D00;
  --so-warnung-950: #2F1C00;

  --so-fehler-50: #FFF4F2;
  --so-fehler-100: #FFE6E3;
  --so-fehler-200: #FCCEC8;
  --so-fehler-300: #F3AFA6;
  --so-fehler-400: #E48C82;
  --so-fehler-500: #D06C62;
  --so-fehler-600: #B5544C;
  --so-fehler-700: #934039;
  --so-fehler-800: #742E29;
  --so-fehler-900: #551F1A;
  --so-fehler-950: #3A110E;

  /* Semantisch - im Projekt ausschliesslich diese verwenden */
  --so-grund: #FFFFFF;                      /* Seitenhintergrund */
  --so-grund-gedaempft: #F5F7FA;            /* Abgesetzte Sektion */
  --so-flaeche: #FFFFFF;                    /* Karte, Kasten */
  --so-flaeche-gehoben: #F5F7FA;            /* Karte auf gedaempftem Grund */
  --so-rahmen: #D6DBE3;                     /* Trennlinie, Kartenrand (dekorativ) */
  --so-rahmen-stark: #838EA0;               /* Formularfeld, bedeutungstragend */
  --so-text: #374151;                       /* Fliesstext */
  --so-text-stark: #1C2128;                 /* Ueberschrift */
  --so-text-gedaempft: #6C7788;             /* Bildunterschrift, Hilfetext */
  --so-text-auf-farbe: #FFFFFF;             /* Text auf blauer Flaeche */
  --so-aktion: #3257BC;                     /* Primaerschaltflaeche, Link */
  --so-aktion-hover: #1A4684;               /* Zeigerkontakt */
  --so-aktion-aktiv: #0F3162;               /* Gedrueckt */
  --so-aktion-leise: #F2F7FF;               /* Hinterlegung, Markierung */
  --so-akzent: #5291ED;                     /* Akzentflaeche, Auszeichnung - nur dekorativ */
  --so-akzent-auf-dunkel: #9DC5FF;          /* Akzenttext auf dunkler Flaeche */
  --so-fokus: #3257BC;                      /* Fokusring, 3px, 2px Abstand */
  --so-erfolg: #266E3F;                     /* Bestaetigung */
  --so-warnung: #7E5400;                    /* Hinweis */
  --so-fehler: #934039;                     /* Fehlermeldung */
  --so-dunkelflaeche: #2D333D;              /* Dunkle Ankersektion */
  --so-backstein: #9E3B2E;                  /* Signalfarbe warnend - nie flaechig, nie Schaltflaeche */
  --so-backstein-flaeche: #F7EFEE;          /* Hinterlegung eines warnenden Hinweises */
  --so-backstein-rand: #EBD8D5;             /* Rand eines warnenden Hinweises */
  --so-waldgruen: #1F6B4C;                  /* Signalfarbe bestaetigend - nie flaechig, nie Schaltflaeche */
  --so-waldgruen-flaeche: #EDF3F1;          /* Hinterlegung eines bestaetigenden Hinweises */
  --so-waldgruen-hell: #E0EAE6;             /* Zweite Stufe der bestaetigenden Hinterlegung */
  --so-waldgruen-rand: #C9DBD4;             /* Rand eines bestaetigenden Hinweises */
  --so-stern: #FBBC04;                      /* Bewertungsstern in zitierter Google-Oberflaeche */

  /* Typografie */
  --so-schrift: 'Roboto', system-ui, sans-serif;
  --so-text-xs: 0.8125rem;   /* 13px - Kleinstgroesse, nie fuer Fliesstext */
  --so-text-sm: 0.9375rem;   /* 15px */
  --so-text-md: 1rem;        /* 16px - Fliesstext, Untergrenze */
  --so-text-lg: 1.25rem;     /* 20px */
  --so-text-xl: 1.5rem;      /* 24px */
  --so-text-2xl: 2rem;       /* 32px */
  --so-text-3xl: 2.75rem;    /* 44px */

  /* Bewegung - Regeln im Skill smart-optimizer-gestaltung */
  --so-dauer-mikro: 120ms;
  --so-dauer-klein: 240ms;
  --so-dauer-gross: 400ms;
  --so-kurve-ein: cubic-bezier(0.16, 1, 0.3, 1);
  --so-kurve-aus: cubic-bezier(0.7, 0, 0.84, 0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

:focus-visible {
  outline: 3px solid var(--so-fokus);
  outline-offset: 2px;
}