/*
 * FITT-STEMI Branding — überschreibt --sq-* Variablen (Light + Dark).
 *
 * Referenz: https://transform-web-shine.lovable.app (styles.css, oklch-Tokens):
 *   --primary: oklch(66.5% .196 43)        ≈ #f15f03  (Signal-Orange, Herz im Logo)
 *   --accent:  oklch(95.5% .032 60)        ≈ #ffecdb  (getönte Fläche)
 *   --ink:     oklch(22% .012 250)         ≈ #161b20  (= --foreground, einzige
 *                                                     dunkle Fläche der Site)
 * Die Site hat KEINE Rot-/Brauntöne und keinen Dark Mode; der Header ist weiß.
 *
 * #f15f03 mit weißer Schrift liegt bei ~3:1 Kontrast — für Buttons/Labels
 * nehmen wir eine Stufe dunkler (#d74c00, oklch 60%) als Primary; das
 * Original-Orange bleibt als Hover.
 *
 * Topbar + Sidebar (Hauptmenü) wie der Site-Header: weiß (--background)
 * mit Ink-Text und --border-Linie (oklch(91% .008 250) ≈ #dde2e6), helles
 * Logo. --sq-primary-dark = Site-Ink #161b20 (Text auf getönten Flächen).
 */

:root {
  --sq-primary:         #d74c00;
  --sq-primary-dark:    #161b20;   /* Site --ink: Topbar/Sidebar, Text auf primary-light */
  --sq-primary-light:   #ffecdb;   /* Site --accent, getönte Fläche */
  --sq-primary-hover:   #f15f03;   /* Marken-Orange (Site --primary) */
  --sq-label-active-color: #d74c00;
  --sq-accent:          #d74c00;

  /* Topbar hell wie der Site-Header */
  --sq-topbar-bg:       #ffffff;   /* Site --background */
  --sq-topbar-fg:       #161b20;   /* Site --ink */
  --sq-topbar-border:   #dde2e6;   /* Site --border */
  --sq-topbar-positive: #15803d;   /* Green-700 — 5.0:1 auf Weiß */
  --sq-topbar-negative: #b91c1c;   /* Red-700   — 6.5:1 auf Weiß */
  --sq-topbar-logo-light: block;
  --sq-topbar-logo-dark:  none;

  /* Sidebar hell wie der Header; aktiver Eintrag bleibt Primary-Orange */
  --sq-sidebar-bg:      #ffffff;   /* Site --background */
  --sq-sidebar-fg:      #161b20;   /* Site --ink */
  --sq-sidebar-border:  #dde2e6;   /* Site --border */
}

[data-theme="dark"] {
  /* Flächen aus der Ink-Skala der Site (oklch L% .012 250) statt
     Squad-Slate — gleicher Farbton wie Topbar/Text der Site. */
  --sq-surface:         #161b20;   /* oklch 22% = --ink */
  --sq-surface-raised:  #22272c;   /* oklch 27% */
  --sq-surface-hover:   #31363b;   /* oklch 33% */
  --sq-border:          #31363b;   /* oklch 33% */
  --sq-border-focus:    #3e4349;   /* oklch 38% */
  --sq-text:            #f3f9ff;   /* oklch 98% */
  --sq-text-muted:      #999fa6;   /* oklch 70% */

  /* Primary bleibt Button-Füllung mit weißer Schrift → nicht heller als
     Orange-600 (#ea580c, 3.6:1); #f97c3d wäre nur 2.6:1. */
  --sq-primary:         #ea580c;
  /* primary-light ist im Dark Mode eine MITTLERE Füllfarbe: darauf steht
     --sq-primary-dark als Text (Picker-Auswahl, Chips; 4.9:1) bzw. Weiß
     (aktiver Sub-Tab; 3.6:1). Wie Squad-Default (Teal-600). */
  --sq-primary-light:   #ea580c;
  --sq-primary-hover:   #f97c3d;
  --sq-label-active-color: #fcbf95;
  --sq-accent:          #ea580c;   /* Alias für primary (Login-Button) */

  /* Ausgewählte Picker-Zeile: vollflächiges Orange konkurrierte mit dem
     Primary-Button ("Übernehmen"). Stattdessen 22 % Orange-600 auf der
     Dialogfläche (#22272c) + Akzentbalken links; Text 98 % (11:1). */
  --sq-selected-bg:        #4e3225;
  --sq-selected-fg:        #f3f9ff;
  --sq-selected-indicator: #ea580c;

  /* Gewählte Radio-Option: gleiches Muster wie die Picker-Auswahl (Tint +
     oranger Rand statt gefülltem Button). Rand #ea580c auf Kachel #22272c
     4.2:1 (Non-Text ≥ 3), Text 11:1. Im Hellen bleibt der gefüllte
     #d74c00-Default (Weiß darauf 4.3:1). */
  --sq-choice-selected-bg:     #4e3225;
  --sq-choice-selected-fg:     #f3f9ff;
  --sq-choice-selected-border: #ea580c;

  /* Topbar dunkel: eine Ink-Stufe über der Fläche (oklch 27%), damit sie
     sich abhebt; Grün/Rot wieder hell (squad-Default für dunklen Balken). */
  --sq-topbar-bg:       #22272c;
  --sq-topbar-fg:       #f3f9ff;
  --sq-topbar-border:   #31363b;
  --sq-topbar-positive: #4ade80;
  --sq-topbar-negative: #f87171;
  --sq-topbar-logo-light: none;
  --sq-topbar-logo-dark:  block;

  /* Sidebar wie die Topbar (Ink 27 %), abgesetzt von der Fläche (22 %) */
  --sq-sidebar-bg:      #22272c;
  --sq-sidebar-fg:      #f3f9ff;
  --sq-sidebar-border:  #31363b;
}