/*
 * Theme: transporterglas24  („Transporterglas24“)
 *
 * Optikpaket des zweiten Shops (PM-Entscheidung P13a): Fahrzeugscheiben,
 * Fenster und Schiebefenster für Transporter. Gleicher Code wie mobyvan,
 * nur Theme, Logo und Texte getauscht. Vorgabe des PM: „etwas eckiger, mit
 * Blau gearbeitet“, klare technische Anmutung, WCAG AA.
 *
 * Struktur und Token-Namen folgen themes/moby-company.css, damit alle
 * Komponenten (.ds-*) ohne Änderung laufen. Kein Bezug zu moby van.
 *
 *     #126AC8  Glasblau       Primärfarbe / Marke
 *     #091B31  Nachtblau      Text, Wortmarke, dunkle Flächen
 *     #E27700  Signalorange   Kaufaktionen (ein Kauf-Knopf je Ansicht)
 *     #F3F6FB  Eisgrau        App-Grund (hell)
 *
 * ROLLENVERTEILUNG
 * ------------------------------------------------------------------------
 *              Hell                          Dunkel
 *   Grund      Eisgrau   #F3F6FB             Nachtgrund #070F19
 *   Panel      Weiß      #FFFFFF             #0E1824
 *   Text       Nachtblau #091B31             #EDF0F6
 *   Marke      Glasblau  #126AC8 (Weißtext)  Blau 400 #64A1EE (dunkler Text)
 *   Kaufen     Tieforange #B84B00 (Weißtext) Orange #FFA348 (dunkler Text)
 *
 * Anders als moby-company trägt Glasblau im hellen Modus WEISSEN Text
 * (5.36:1). Im dunklen Modus wird die Marke auf Blau 400 aufgehellt und
 * trägt dunklen Text (7.21:1) – spiegelbildlich, damit Knöpfe auf beiden
 * Gründen gleich stark wirken.
 *
 * BLAUSKALA (OKLCH, Farbton 255 Grad, Chroma zur Mitte hin am höchsten)
 * ------------------------------------------------------------------------
 *   50 #F1F7FF  100 #E2EEFE  200 #C5DDFC  300 #97C1F7  400 #64A1EE
 *   500 #3986E4  600 #126AC8  700 #0A56A6  800 #0A4483  900 #09305C
 *   950 #091B31
 * Die Stufen sind als --ds-brand-blau-* Referenz abgelegt. Komponenten
 * nutzen weiter nur die semantischen Tokens.
 *
 * FARBHARMONIE
 * ------------------------------------------------------------------------
 *   Glasblau      H 255 Grad  \
 *   Neutrale      H 252–265    > eine Farbton-Familie (Grautöne leicht bläulich)
 *   Nachtblau     H 255 Grad  /
 *   Signalorange  H  56 Grad     komplementär: 161 Grad Abstand (Ziel 180 ± 25)
 *
 * Orange ist die Gegenfarbe zu Blau und damit die auffälligste Farbe, die
 * das System hat. Deshalb gehört sie ausschließlich den Kaufaktionen
 * („In den Warenkorb“, „Zur Kasse“, Warenkorb-Zähler) – nicht Hinweisen,
 * nicht Rabatt-Deko. Ein orangefarbenes Element je Ansicht.
 *
 * SIGNALFARBEN sind vom Akzent getrennt (OKLab-dE ≥ 0.13): Warnung ist ein
 * dunkles Ocker statt Orange, Fehler ein Karminrot, Erfolg ein kühles Grün.
 * Im dunklen Modus weicht die Warnung nach Gelb und der Fehler nach Rosa
 * aus, weil helle Orange-, Gelb- und Rottöne sonst zusammenfallen.
 * Geprüft von scripts/check_theme_harmony.py.
 *
 * KONTRAST
 * ------------------------------------------------------------------------
 * Alle Pflicht-Paarungen aus scripts/check_theme_contrast.py bestehen in
 * beiden Modi, auch die dort nur als Warnung geführte Paarung „Markenfläche
 * direkt auf App-Grund“ (4.94:1). Zusätzlich geprüft (brand/transporter-
 * glas24/werkzeuge/check_tg24_extras.py): Kauf-Knopf (.ds-btn--buy im Shop:
 * fg-inverted auf accent-strong) 5.19:1 hell / 9.70:1 dunkel, Aktionstext
 * auf App-Grund 4.79:1, Linktext brand-strong 7.25:1, Eingaberahmen ≥ 3:1
 * auch gegen den App-Grund (WCAG 1.4.11).
 *
 * FORM
 * ------------------------------------------------------------------------
 * Eckig: Radien 2–4 px statt 6–28 px. Die Basis-Radien werden hier im
 * Theme überschrieben, damit auch Shop-Code, der direkt --ds-radius-md
 * oder --ds-radius-lg nutzt, eckig wird. Auch --ds-radius-pill ist hier
 * 2 px: Chips, Filter, Zähler und Pfeilknöpfe werden kleine Kacheln statt
 * Kapseln. Echte Kreise nur über --ds-radius-circle (Radio, Avatar).
 * Schatten dezent und im Nachtblau-Ton; Karten leben von Rahmen, nicht von
 * Schatten.
 *
 * SCHRIFT (beide SIL Open Font License 1.1, ohne Reserved Font Name)
 * ------------------------------------------------------------------------
 *   --ds-font-sans     Archivo (Omnibus-Type), variabel 400–800.
 *                      Groteske mit großer x-Höhe, gut lesbar bei 13–15 px,
 *                      Tabellenziffern für Preise und Maße.
 *   --ds-font-display  Chakra Petch (Cadson Demak), 600/700.
 *                      Abgeschrägte Ecken wie die Fase im Bildzeichen;
 *                      nur Überschriften, Preise groß, Wortmarke.
 * Die @font-face-Blöcke liegen in fonts/tg24-fonts.css (woff2, latin und
 * latin-ext), Lizenztexte daneben.
 *
 * Aktivierung: <html data-theme="transporterglas24" data-color-mode="light|dark">
 */

[data-theme="transporterglas24"] {
  /* === MARKENFARBEN (Referenz – nicht überschreiben) === */
  --ds-brand-glasblau: #126AC8;
  --ds-brand-nachtblau: #091B31;
  --ds-brand-signalorange: #E27700;
  --ds-brand-eisgrau: #F3F6FB;

  --ds-brand-blau-50: #F1F7FF;
  --ds-brand-blau-100: #E2EEFE;
  --ds-brand-blau-200: #C5DDFC;
  --ds-brand-blau-300: #97C1F7;
  --ds-brand-blau-400: #64A1EE;
  --ds-brand-blau-500: #3986E4;
  --ds-brand-blau-600: #126AC8;
  --ds-brand-blau-700: #0A56A6;
  --ds-brand-blau-800: #0A4483;
  --ds-brand-blau-900: #09305C;
  --ds-brand-blau-950: #091B31;

  /* Neutrale Namen für „dunkle Fläche“ und „heller Text auf Bild/dunkel“.
     Der Shop-Vorlauf liest dafür noch die moby-company-Namen
     --ds-brand-abyss / --ds-brand-seafoam; die Brücke unten hält ihn
     lauffähig, bis W4 auf diese neutralen Namen umstellt. */
  --ds-brand-ink: #091B31;
  --ds-brand-paper: #EEF3F9;

  /* === BACKGROUNDS ===
     Eisgrau trägt den App-Grund, Panels und Karten stehen weiß darauf. */
  --ds-color-bg-app: #F3F6FB;
  --ds-color-bg-surface: #FFFFFF;
  --ds-color-bg-elevated: #FFFFFF;
  --ds-color-bg-muted: #F7F9FC;
  --ds-color-bg-hover: #E8EDF5;
  --ds-color-bg-selected: #E2EEFE;

  /* === FOREGROUNDS ===
     Nachtblau als Text: 17.32:1 auf Weiß, 15.99:1 auf Eisgrau. */
  --ds-color-fg-default: #091B31;
  --ds-color-fg-muted: #435163;
  --ds-color-fg-subtle: #5C6979;
  --ds-color-fg-faint: #969FAB;
  --ds-color-fg-inverted: #FFFFFF;

  /* === BRAND (Glasblau) ===
     brand trägt Weißtext (5.36:1). brand-hover dunkelt ab (Blau 700),
     brand-strong ist die Textfarbe für Links und Werte (7.25:1). */
  --ds-color-brand: #126AC8;
  --ds-color-brand-hover: #0A56A6;
  --ds-color-brand-soft: rgba(18, 106, 200, 0.12);
  --ds-color-brand-strong: #0A56A6;

  /* === ACCENT (Signalorange) ===
     Nur Kaufaktionen. accent ist die Signalfläche (3.06:1 gegen Weiß,
     genügt für Flächen/Rahmen), accent-strong trägt Weißtext (5.19:1)
     und ist die Fläche des Kauf-Knopfs; als Text 4.79:1 auf Eisgrau. */
  --ds-color-accent: #E27700;
  --ds-color-accent-hover: #F08A1F;
  --ds-color-accent-soft: rgba(226, 119, 0, 0.10);
  --ds-color-accent-strong: #B84B00;

  /* === SEMANTIC ===
     Warnung Ocker statt Orange und Fehler Karmin statt Orangerot, damit
     „Achtung“ und „Löschen“ nie wie „Kaufen“ aussehen. */
  --ds-color-success: #177A43;
  --ds-color-success-soft: #E2F3E8;
  --ds-color-warning: #8F5500;
  --ds-color-warning-soft: #FBF0DD;
  --ds-color-danger: #B4172F;
  --ds-color-danger-soft: #FCE7EA;
  --ds-color-info: #0A56A6;
  --ds-color-info-soft: #E6F0FD;

  /* === BORDERS === */
  --ds-color-border: #CBD2DA;
  --ds-color-border-strong: #7C8795;
  --ds-color-border-focus: #126AC8;

  /* === INPUTS ===
     Eingaberahmen bewusst kräftiger als --ds-color-border: 3.36:1 gegen
     Weiß und 3.11:1 gegen Eisgrau, damit Felder ohne Schatten als Felder
     erkennbar sind (WCAG 1.4.11). */
  --ds-color-input-bg: #FFFFFF;
  --ds-color-input-border: #838D9A;
  --ds-color-input-fg: #091B31;
  --ds-color-input-placeholder: #6B7583;

  /* === BUTTON-TEXTFARBEN ===
     Glasblau ist dunkel genug für Weiß – explizit gesetzt, damit ein
     späterer Wechsel des Defaults dieses Theme nicht verschiebt. */
  --ds-btn-primary-fg: #FFFFFF;

  /* === SHADOWS ===
     Dezent, im Nachtblau-Ton. Karten tragen Rahmen, der Schatten ist nur
     ein Hauch Tiefe. */
  --ds-shadow-sm: 0 1px 2px rgba(9, 27, 49, 0.06);
  --ds-shadow-md: 0 2px 8px rgba(9, 27, 49, 0.08);
  --ds-shadow-lg: 0 6px 18px rgba(9, 27, 49, 0.10);
  --ds-shadow-xl: 0 12px 32px rgba(9, 27, 49, 0.14);
  --ds-shadow-card: 0 1px 3px rgba(9, 27, 49, 0.07);

  /* === RADIEN (eckig) ===
     Überschreibt die Basis-Skala (4/6/10/14/20/28/999 px);
     --ds-radius-circle (50 %) bleibt. */
  --ds-radius-xs: 2px;
  --ds-radius-sm: 2px;
  --ds-radius-md: 3px;
  --ds-radius-lg: 4px;
  --ds-radius-xl: 4px;
  --ds-radius-2xl: 4px;
  --ds-radius-pill: 2px;

  /* === TYPOGRAFIE ===
     Archivo für Oberfläche und Fließtext, Chakra Petch für Überschriften
     (fonts/tg24-fonts.css). */
  --ds-font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                  Roboto, Helvetica, Arial, sans-serif;
  --ds-font-display: "Chakra Petch", "Archivo", ui-sans-serif, system-ui,
                     -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* === BRANDING === */
  --ds-brand-name: "transporterglas24";
  --ds-brand-gradient: linear-gradient(135deg, #126AC8 0%, #0A4483 55%, #091B31 100%);
  --ds-brand-pattern: linear-gradient(180deg, #F3F6FB 0%, #F7F9FC 100%);

  /* === KOMPONENTEN-DEFAULTS ===
     Knöpfe und Felder 2 px, Karten 4 px. */
  --ds-button-radius: var(--ds-radius-sm);
  --ds-input-radius: var(--ds-radius-sm);
  --ds-card-radius: var(--ds-radius-lg);
  --ds-card-shadow: var(--ds-shadow-card);

  /* === BRÜCKE FÜR DEN SHOP-VORLAUF ===
     Der Vorlauf (src/styles/base.css, pages.css, pdp.css, systems.css)
     liest noch Referenznamen aus moby-company. Hier mit Werten dieses
     Themes belegt; nur Namen, keine moby-Optik. */
  --ds-brand-abyss: #091B31;
  --ds-brand-seafoam: #EEF3F9;

  /* === LEGACY-BRÜCKE (Komponenten erwarten diese Namen) === */
  --ds-moby-footer: #091B31;
  --ds-moby-footer-dark: #06121F;
  --ds-moby-accent: #0A56A6;
  --ds-moby-accent-hover: #126AC8;
  --ds-moby-teal: #126AC8;
  --ds-moby-heart-red: #B4172F;
  --ds-moby-card-dark: #091B31;
  --ds-moby-bar-gray: #06121F;

  color-scheme: light;
}

/* === DARK VARIANT ======================================================
   Nachtgrund statt Eisgrau. Die Marke hellt auf Blau 400 auf und trägt
   dunklen Text; Kauf-Knopf wird helles Orange mit dunklem Text. */
[data-theme="transporterglas24"][data-color-mode="dark"] {
  --ds-color-bg-app: #070F19;
  --ds-color-bg-surface: #0E1824;
  --ds-color-bg-elevated: #16212F;
  --ds-color-bg-muted: #0B131E;
  --ds-color-bg-hover: #1C2838;
  --ds-color-bg-selected: #183150;

  --ds-color-fg-default: #EDF0F6;
  --ds-color-fg-muted: #BAC3D0;
  --ds-color-fg-subtle: #99A4B2;
  --ds-color-fg-faint: #626D7A;
  --ds-color-fg-inverted: #070F19;

  --ds-color-brand: #64A1EE;
  --ds-color-brand-hover: #7DB1F2;
  --ds-color-brand-soft: rgba(100, 161, 238, 0.18);
  --ds-color-brand-strong: #97C1F7;

  --ds-color-accent: #FF8A2A;
  --ds-color-accent-hover: #FFB066;
  --ds-color-accent-soft: rgba(255, 138, 42, 0.16);
  --ds-color-accent-strong: #FFA348;

  /* Helle Signale auf transluzenten Soft-Flächen; Warnung nach Gelb,
     Fehler nach Rosa verschoben (Trennung vom Orange). */
  --ds-color-success: #56C98F;
  --ds-color-success-soft: rgba(86, 201, 143, 0.16);
  --ds-color-warning: #F0D060;
  --ds-color-warning-soft: rgba(240, 208, 96, 0.14);
  --ds-color-danger: #FF94AE;
  --ds-color-danger-soft: rgba(255, 148, 174, 0.16);
  --ds-color-info: #97C1F7;
  --ds-color-info-soft: rgba(151, 193, 247, 0.16);

  --ds-color-border: #2F3B4B;
  --ds-color-border-strong: #617083;
  --ds-color-border-focus: #7DB1F2;

  --ds-color-input-bg: #0B131E;
  --ds-color-input-border: #5D6B7E;
  --ds-color-input-fg: #EDF0F6;
  --ds-color-input-placeholder: #8893A2;

  --ds-btn-primary-fg: #070F19;

  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --ds-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45);
  --ds-shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.50);
  --ds-shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.58);
  --ds-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.40);

  --ds-brand-gradient: linear-gradient(135deg, #0A4483 0%, #09305C 55%, #070F19 100%);
  --ds-brand-pattern: linear-gradient(180deg, #070F19 0%, #0E1824 100%);

  --ds-moby-footer: #070F19;
  --ds-moby-footer-dark: #04090F;
  --ds-moby-accent: #97C1F7;
  --ds-moby-accent-hover: #64A1EE;
  --ds-moby-heart-red: #FF94AE;
  --ds-moby-card-dark: #0E1824;
  --ds-moby-bar-gray: #04090F;

  color-scheme: dark;
}