/* ============================================================
   SSCX Design Tokens — MYC 2.0
   Quelle: SSCX Brand Guidelines v1.0, März 2026
   Verbindlich laut Lastenheft MYC 2.0, Kapitel 8.

   Diese Datei ist die einzige Wahrheit für Farben, Schrift und
   Abstände. Werte werden von hier verwendet, nicht im Code
   wiederholt. Änderungen laufen über den Lead PO.
   ============================================================ */

:root {

  /* --- Farben, Kern --------------------------------------- */
  --sscx-black:        #0D0D0D;   /* Flächen, Kopfbereiche, Cover */
  --sscx-white:        #FFFFFF;   /* Text auf Dunkel, Flächen */
  --sscx-orange:       #E8681A;   /* Akzent — sparsam einsetzen */
  --sscx-paper:        #F5F2EB;   /* heller Seitenhintergrund */

  /* --- Graustufen, unterstützend -------------------------- */
  --sscx-gray-900:     #1A1A18;   /* Fließtext auf Hell */
  --sscx-gray-700:     #4A4A46;   /* Beschriftungen, Captions */
  --sscx-gray-500:     #9A9A94;   /* gedämpft */
  --sscx-gray-300:     #D4D0C8;   /* Linien, Rahmen */
  --sscx-gray-100:     #F0EDE6;   /* zurückgenommene Fläche */

  /* --- Text auf dunklem Grund ------------------------------
     Kein grauer Text auf Schwarz (Lastenheft L8.1).
     Sekundärtext liegt bei mindestens 72 % Weiß.            */
  --sscx-on-dark:      rgba(255,255,255,1);
  --sscx-on-dark-2:    rgba(255,255,255,.84);
  --sscx-on-dark-3:    rgba(255,255,255,.72);   /* Untergrenze */
  --sscx-rule-dark:    #33332F;
  --sscx-rule-dark-2:  #4A4A46;

  /* --- Client-Skin -----------------------------------------
     Wird je Client aus der Konfiguration gesetzt und ersetzt
     den Akzent. Die übrige Oberfläche bleibt SSCX (L8.4).    */
  --client-accent:     var(--sscx-orange);
  --client-accent-ink: var(--sscx-white);

  /* --- Schrift ---------------------------------------------
     IBM Plex Sans, Google Fonts.
     300 Beschriftungen · 400 Fließtext · 600/700 Überschriften */
  --sscx-font: "IBM Plex Sans", system-ui, -apple-system,
               "Segoe UI", Helvetica, Arial, sans-serif;
  --sscx-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --sscx-weight-label:   300;
  --sscx-weight-body:    400;
  --sscx-weight-strong:  600;
  --sscx-weight-head:    700;

  --sscx-size-h1:      34px;
  --sscx-size-h2:      26px;
  --sscx-size-h3:      17px;
  --sscx-size-body:    15px;
  --sscx-size-small:   13px;
  --sscx-size-label:   11px;

  --sscx-tracking-label:  .14em;   /* Versalien mit Sperrung */
  --sscx-tracking-head:   -.02em;
  --sscx-leading-body:    1.6;
  --sscx-leading-read:    1.7;     /* Gesprächsverlauf */

  /* --- Raster ----------------------------------------------
     Grundmaß 8 px. Alle Abstände sind Vielfache davon.       */
  --sscx-u:     8px;
  --sscx-u-05:  4px;
  --sscx-u-1:   8px;
  --sscx-u-2:  16px;
  --sscx-u-3:  24px;
  --sscx-u-4:  32px;
  --sscx-u-5:  40px;
  --sscx-u-6:  48px;
  --sscx-u-8:  64px;

  /* --- Layout ---------------------------------------------- */
  --sscx-read-width:    680px;   /* maximale Lesespalte */
  --sscx-rail-width:    268px;   /* Seitenleiste */
  --sscx-page-pad:      40px;    /* Seitenrand Desktop */
  --sscx-page-pad-sm:   20px;    /* Seitenrand schmal */
  --sscx-card-pad:      24px;

  /* --- Logo ------------------------------------------------
     Nur das Signet, rechts daneben die Wortmarke in derselben
     Schrift. Nie auf orangefarbenem Grund, nie ohne Schriftzug
     (L8.3).                                                   */
  --sscx-signet-h:        22px;   /* in der Seitenleiste */
  --sscx-signet-h-large:  56px;   /* auf der Anmeldung */
  --sscx-logo-min-width: 120px;   /* Mindestbreite Gesamtlockup */
}

/* ============================================================
   Was hier NICHT hingehört
   ------------------------------------------------------------
   Komponenten-CSS, Layoutregeln einzelner Screens, Zustände.
   Diese Datei trägt Werte, keine Gestaltung.

   Verbote aus den Guidelines, die kein Token abbilden kann:
   · keine Schlagschatten
   · keine Verlaufsflächen
   · keine dekorativen Linien unter Überschriften
   · Trennlinie vor Kasten
   · Weißraum ist Inhalt — nicht füllen
   · der Akzent markiert je Ansicht genau eine Handlung
   ============================================================ */