/* sexin.ch – Designtokens (Stand 19.09.2026, Palette Rot/Schwarz/Weiss/Grau nach Vorgabe)
   Alle Werte selbst gehostet, keine externen Requests.
   Dunkler Grund mit weissen Kontrastkarten; Rot als Akzent; Verifikation in Weiss/Rot. */

:root {
  /* Flächen (dunkel) */
  --grund:            #121214;  /* Seitenhintergrund */
  --grund-tief:       #0A0A0B;  /* Fusszeile */
  --flaeche:          #1C1C20;  /* dunkle Karten, Formulare */
  --flaeche-hoch:     #222226;  /* Panels */
  --flaeche-sektion:  #171719;  /* Bänder, Aufklapper */
  --haarlinie:        #26262A;  /* Sektionstrenner */
  --rahmen:           #2C2C31;  /* Kartenrahmen */
  --rahmen-stark:     #3C3C43;  /* Eingabefelder */
  --rahmen-aktiv:     #4A4A52;  /* Sekundäre Buttons */

  /* Kontrastflächen (hell) */
  --hell:             #FFFFFF;  /* weisse Karten, Dialoge */
  --hell-2:           #F4F4F6;  /* helle Nebenfläche */
  --hell-rahmen:      #E2E2E7;
  --hell-text:        #18181C;  /* Text auf Weiss */
  --hell-text-2:      #3A3A42;
  --hell-leise:       #6B6B75;
  --hell-still:       #8A8A94;

  /* Schrift auf dunklem Grund */
  --ton:              #FFFFFF;
  --ton-zurueck:      #D2D2D8;
  --ton-leise:        #A6A6B0;
  --ton-still:        #8C8C96;
  --ton-fast-weg:     #66666F;

  /* Akzent Rot */
  --akzent:           #E0243F;  /* Primäre Flächen, CTA */
  --akzent-dunkel:    #C41C34;  /* Hover */
  --akzent-schrift:   #FF5C73;  /* Rot auf dunklem Grund, Links */
  --akzent-hell:      #FF8797;  /* Hover, aktive Chips */
  --akzent-flaeche:   #2A1418;  /* Hintergrund aktiver Chips (dunkel) */
  --akzent-rahmen:    #7A2634;
  --akzent-hell-flaeche: #FFE9ED; /* aktive Chips auf Weiss */
  --akzent-text-hell: #C41C34;   /* Rot als Schrift auf Weiss, 5.9:1 */

  /* Verifikation und Premium (ehemals Messing): Weiss/Rot */
  --messing:          #FFFFFF;
  --messing-hell:     #FFFFFF;
  --messing-flaeche:  #232326;
  --messing-rahmen:   #45454C;

  /* Signal */
  --frei:             #4FD08A;  /* erreichbar, erfüllt */
  --frei-flaeche:     #182A20;
  --frei-rahmen:      #2C4D3A;

  /* Bildplatzhalter */
  --platzhalter-1:    #26262B;
  --platzhalter-2:    #2A2A30;
  --platzhalter-3:    #2E2E34;
  --platzhalter-4:    #232328;
  --platzhalter-5:    #303036;
  --platzhalter-6:    #28282D;

  /* Schriftfamilien: ein kräftiger Sans-Stack, Serif nur noch für Zitate */
  --schrift-display:  ui-sans-serif, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --schrift-text:     ui-sans-serif, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Schriftgrade */
  --grad-hero:        48px;
  --grad-titel:       40px;
  --grad-abschnitt:   34px;
  --grad-h2:          28px;
  --grad-h2-klein:    24px;
  --grad-lead:        18px;
  --grad-text:        16px;
  --grad-klein:       14px;
  --grad-meta:        13px;
  --grad-label:       12px;

  /* Radien */
  --radius-klein:      4px;
  --radius-feld:       8px;
  --radius-karte:     10px;
  --radius-gross:     16px;
  --radius-pille:     22px;

  /* Höhen */
  --hoehe-tipp:       44px;
  --hoehe-feld:       48px;
  --hoehe-cta:        50px;
}