/* ============================================================
   SHAH CONSULTING GmbH — Design-System-Primitive (--sc-*)
   ------------------------------------------------------------
   GESPIEGELT aus shahgmbhdesignsytem/tokens/*.css.
   Quelle der Wahrheit ist das Design-System-Verzeichnis; diese
   Datei ist die deploybare Kopie, weil das Container-Image nur
   ``app/`` kopiert (siehe app/main.py, Kommentar am /static-Mount).
   Nach Aenderungen am DS: ``make check-ds-tokens`` meldet jede Abweichung
   zwischen dieser Kopie und den DS-Token-Dateien.

   BEWUSST NUR die ``--sc-*``-Praefix-Variablen. Die generischen
   Aliase des DS (``--space-*``, ``--shadow-card``, ``--border-*``,
   ``--status-*``, ``--radius-*``) sind hier WEGGELASSEN: die
   Komponentenschicht fuehrt dieselben Namen und wuerde in derselben
   Kaskade kollidieren. Die Zuordnung passiert explizit und an genau
   einer Stelle -- in sc-bridge.css.

   SCHRIFTEN: liegen lokal unter app/api/static/fonts/ und werden von
   sc-fonts.css eingebunden -- KEIN @import auf fonts.googleapis.com.
   Ein CDN-Aufruf wuerde bei jedem Seitenaufruf die Nutzer-IP an Google
   senden; das ist auf einer Compliance-Plattform nicht vertretbar.

   LADEREIHENFOLGE (verbindlich):
     sc-fonts.css -> sc-tokens.css -> sc-bridge.css -> sc.css
     -> sc-components.css -> sc-app.css
   ============================================================ */

:root {
  /* ---- Flaechenleiter (warm-neutrales Graustufen-Schwarz) ---- */
  --sc-bg:          #131415;  /* Seitengrund */
  --sc-bg-deep:     #0E0F10;  /* Decks, Overlays, Footer */
  --sc-bg-raised:   #1A1C1E;  /* Inputs, Rails, Hover-Wells */
  --sc-bg-card:     #1E2023;  /* Kacheln, Panels */
  --sc-bg-elevated: #25282B;  /* Popover, Hover auf Kacheln */

  /* ---- Haarlinien ---- */
  --sc-line-subtle: #292C2F;
  --sc-line:        #34383C;
  --sc-line-strong: #45494E;

  /* ---- Text (Logo-Hellgrau; nie reines Weiss im Fliesstext) ---- */
  --sc-text:          #E9EAEC;
  --sc-text-2:        #A3A9AE;
  --sc-text-3:        #6C7176;
  --sc-text-disabled: #4A4F54;
  --sc-white:         #FFFFFF;

  /* ---- Akzent = das Marken-Hellgrau. Interaktives invertiert. ---- */
  --sc-accent:       #E9EAEC;
  --sc-accent-hover: #FFFFFF;
  --sc-accent-down:  #D6D8DB;
  --sc-on-accent:    #131415;

  /* ---- Hell/Print ---- */
  --sc-paper:         #F4F4F4;
  --sc-paper-card:    #FFFFFF;
  --sc-ink:           #151617;
  --sc-ink-2:         #5C6165;
  --sc-line-on-paper: #DDDEE0;

  /* ---- Semantik: entsaettigt, NUR Produkt-UI ---- */
  --sc-ok:    #85B48F; --sc-ok-tint:    rgba(133,180,143,.12);
  --sc-warn:  #D2AF6F; --sc-warn-tint:  rgba(210,175,111,.12);
  --sc-error: #D28579; --sc-error-tint: rgba(210,133,121,.12);
  --sc-info:  #85A3BE; --sc-info-tint:  rgba(133,163,190,.12);

  /* ---- Glas (nur ueber Bild/Medien/dunklen Kacheln) ---- */
  --sc-glass-tint:      rgba(255,255,255,.15);
  --sc-glass-highlight: rgba(255,255,255,.45);
  --sc-glass-shadow:    0 6px 6px rgba(0,0,0,.2),0 0 20px rgba(0,0,0,.1);
  --sc-glass-blur:      3px;

  /* ---- Schriftfamilien ----
     Poppins (Display + Fliesstext), IBM Plex Mono (Code), Archivo 900
     (Wortmarke). Geladen per Google-CDN -- identisch zu
     shahgmbhdesignsytem/fonts/fonts.css. Der System-Stack bleibt als
     Fallback dahinter, damit ein blockierter CDN die Seite nicht kippt. */
  --sc-font-display:  "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-font-body:     "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-font-mono:     "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sc-font-wordmark: "Archivo", "Poppins", ui-sans-serif, sans-serif;

  /* ---- Typo-Skala (px-echte rem) ---- */
  --sc-text-xs:    0.75rem;    /* 12 — Meta-Labels (uppercase, getrackt) */
  --sc-text-sm:    0.8125rem;  /* 13 — Labels, Captions */
  --sc-text-base:  0.9375rem;  /* 15 — UI-Body */
  --sc-text-md:    1.0625rem;  /* 17 — Lesetext */
  --sc-text-lg:    1.25rem;    /* 20 — Leads */
  --sc-text-xl:    1.5rem;     /* 24 — Kacheltitel */
  --sc-text-2xl:   2rem;       /* 32 — h3 */
  --sc-text-3xl:   2.5rem;     /* 40 — h2 */
  --sc-text-hero:  3.5rem;     /* 56 — h1 */
  --sc-text-mega:  4.75rem;    /* 76 — Marketing-Hero */
  --sc-text-giant: 8.75rem;    /* 140 — Geister-Ziffern */

  /* ---- Gewichte: der Hausstil ist LEICHT (400 Headlines, 500 Betonung) ---- */
  --sc-weight-light:    300;
  --sc-weight-regular:  400;
  --sc-weight-medium:   500;
  --sc-weight-display:  400;
  --sc-weight-semibold: 600;

  /* ---- Leading / Tracking ---- */
  --sc-leading-display: 1.12;
  --sc-leading-heading: 1.2;
  --sc-leading-normal:  1.55;
  --sc-leading-relaxed: 1.7;
  --sc-tracking-display:  -0.015em;
  --sc-tracking-normal:   0;
  --sc-tracking-meta:     0.1em;
  --sc-tracking-wordmark: 0.14em;

  /* ---- Radien: alles Klickbare ist eine Pille ---- */
  --sc-radius-sm:   0.5rem;    /* 8 */
  --sc-radius-md:   0.875rem;  /* 14 — Inputs */
  --sc-radius-lg:   1.25rem;   /* 20 — Karten */
  --sc-radius-xl:   1.75rem;   /* 28 — aeussere Panels */
  --sc-radius-2xl:  2.5rem;    /* 40 — Page-Shell */
  --sc-radius-pill: 9999px;

  /* ---- Schatten: leise. Hierarchie traegt die Flaechenstufe. ---- */
  --sc-shadow-card:     0 1px 2px rgba(0,0,0,.4);
  --sc-shadow-raised:   0 8px 24px rgba(0,0,0,.35);
  --sc-shadow-floating: 0 16px 48px rgba(0,0,0,.5);
  --sc-edge-top:        inset 0 1px 0 rgba(255,255,255,.06);

  /* ---- Bewegung ---- */
  --sc-ease:           cubic-bezier(0.23,0.68,0.22,1);
  --sc-ease-out:       cubic-bezier(0.16,1,0.3,1);
  --sc-ease-spring:    cubic-bezier(0.175,0.885,0.32,2.2);
  --sc-duration-fast:  140ms;
  --sc-duration-base:  220ms;
  --sc-duration-slow:  480ms;
  --sc-duration-glass: 700ms;

  /* ---- Layout ---- */
  --sc-container:         75rem;   /* 1200 */
  --sc-container-content: 70rem;   /* 1120 */
  --sc-nav-height:        4.5rem;  /* 72 */
}

/* ============================================================
   Hell-Variante der Primitiven.
   Das DS kennt Hell nur fuer Print/Dokumente (--sc-paper/--sc-ink).
   Die Plattform hat einen echten Theme-Toggle, deshalb ist hier eine
   vollstaendige helle Flaechenleiter ABGELEITET: die drei Papier-Werte
   des DS bilden Grund/Karte/Tinte, die Zwischenstufen sind daraus
   interpoliert. Der Akzent invertiert (dunkle Flaeche, helle Schrift),
   damit die DS-Regel "Interaktives invertiert" auch hell gilt.
   ============================================================ */
:root[data-theme="light"],
[data-theme="light"],
.sc-light {
  --sc-bg:          #F4F4F4;
  --sc-bg-deep:     #EAEAEB;
  --sc-bg-raised:   #FFFFFF;
  --sc-bg-card:     #FFFFFF;
  --sc-bg-elevated: #FFFFFF;

  --sc-line-subtle: #E4E5E6;
  --sc-line:        #DDDEE0;
  --sc-line-strong: #C6C8CA;

  --sc-text:          #151617;
  --sc-text-2:        #5C6165;
  --sc-text-3:        #85898D;
  --sc-text-disabled: #B0B3B6;
  --sc-white:         #000000;  /* "maximaler Kontrast" kippt auf hell */

  --sc-accent:       #151617;
  --sc-accent-hover: #000000;
  --sc-accent-down:  #34383C;
  --sc-on-accent:    #F4F4F4;

  /* Semantik eine Stufe dunkler, damit sie auf Papier AA erreicht */
  --sc-ok:    #4E7A58; --sc-ok-tint:    rgba(78,122,88,.12);
  --sc-warn:  #8A6A2E; --sc-warn-tint:  rgba(138,106,46,.12);
  --sc-error: #96453A; --sc-error-tint: rgba(150,69,58,.12);
  --sc-info:  #45657F; --sc-info-tint:  rgba(69,101,127,.12);

  --sc-glass-tint:      rgba(19,20,21,.06);
  --sc-glass-highlight: rgba(255,255,255,.9);
  --sc-glass-shadow:    0 6px 6px rgba(19,20,21,.06),0 0 20px rgba(19,20,21,.04);

  --sc-shadow-card:     0 1px 2px rgba(19,20,21,.08);
  --sc-shadow-raised:   0 8px 24px rgba(19,20,21,.08);
  --sc-shadow-floating: 0 16px 48px rgba(19,20,21,.12);
  --sc-edge-top:        inset 0 1px 0 rgba(255,255,255,.9);
}