:root {
  /* Primärfarben */
  --sq-primary:         #0f766e;   /* Teal-700  */
  --sq-primary-dark:    #134e4a;   /* Teal-900  */
  --sq-primary-light:   #ccfbf1;   /* Teal-100  */
  --sq-primary-hover:   #0d9488;   /* Teal-600  */
  --sq-label-active-color: #0f766e; /* = sq-primary (overridden in dark mode) */
  /* Icon/Text-Akzent AUF --sq-primary-light (Kachel-Icons, Icon-Buttons im
     Hover). Hell: Primary auf Teal-100. Dark: primary-light ist ein
     Mittelton (Teal-600) — Primary darauf wäre ~1.5:1, daher Weiß. */
  --sq-on-primary-light: var(--sq-primary);
  /* Ausgewählte Listen-Zeile (Picker/Multiselect/Wizard: .sq-pd-item--selected).
     Default = primary-light/primary-dark wie bisher; Brandings mit kräftigem
     Dark-Mode-primary-light können hier einen dezenten Tint setzen, ohne
     Chips/Sub-Tabs/Icons (die primary-light weiter nutzen) zu verändern.
     Indicator = Akzentbalken links (inset box-shadow), Default unsichtbar. */
  --sq-selected-bg:        var(--sq-primary-light);
  --sq-selected-fg:        var(--sq-primary-dark);
  --sq-selected-indicator: transparent;
  /* Gewählte Option einer Radio-Group (.sq-radio-group .sq-btn.selected).
     Default = gefüllter Primary-Button wie bisher; Brandings können die
     Auswahl vom Primary-Button (Aktion) absetzen, z.B. Tint + Rand. */
  --sq-choice-selected-bg:     var(--sq-primary);
  --sq-choice-selected-fg:     var(--sq-text-inverse);
  --sq-choice-selected-border: var(--sq-primary);

  /* Neutrale Farben */
  --sq-surface:         #f8fafc;   /* Slate-50  */
  --sq-surface-raised:  #ffffff;
  --sq-surface-hover:   #f1f5f9;   /* Slate-100 */
  --sq-border:          #e2e8f0;   /* Slate-200 */
  --sq-border-focus:    #94a3b8;   /* Slate-400 */
  --sq-text:            #0f172a;   /* Slate-900 */
  --sq-text-muted:      #64748b;   /* Slate-500 */
  --sq-text-inverse:    #ffffff;

  /* Status-Farben */
  --sq-required:        #ea580c;   /* Orange-600 */
  --sq-required-light:  #fff7ed;   /* Orange-50  */
  --sq-danger:          #dc2626;   /* Red-600    */
  --sq-success:         #16a34a;   /* Green-600  */
  --sq-warning:         #d97706;   /* Amber-600  */
  --sq-info:            #0284c7;   /* Sky-600    */

  /* Badge/Highlight */
  --sq-badge-bg:        #dc2626;   /* Red-600    */
  --sq-badge-text:      #ffffff;
  --sq-accent:          #0f766e;   /* Teal-700 — alias for primary */

  /* Topbar — theme-invariant dunkel per Default. Brandings mit hellem
     Header (z.B. Kundenwebsite mit weißem Balken) überschreiben die Tokens
     und schalten per --sq-topbar-logo-light/-dark (display-Werte) auf die
     Hell-Fassung des Logos. */
  --sq-topbar-bg:       var(--sq-primary-dark);
  --sq-topbar-fg:       var(--sq-text-inverse);
  --sq-topbar-border:   transparent;
  --sq-topbar-positive: #4ade80;   /* Green-400 — Transition-Icon auf dunklem BG */
  --sq-topbar-negative: #f87171;   /* Red-400   — Transition-Icon auf dunklem BG */
  --sq-topbar-logo-light: none;
  --sq-topbar-logo-dark:  block;

  /* Sidebar (Hauptmenü) — per Default eine Stufe dunkler als die Topbar.
     Brandings mit hellem Header setzen hier helle Werte (Text, Hover und
     Fokus leiten sich aus --sq-sidebar-fg ab). */
  --sq-sidebar-bg:      color-mix(in srgb, var(--sq-primary-dark) 88%, black);
  --sq-sidebar-fg:      var(--sq-text-inverse);
  --sq-sidebar-border:  rgb(0 0 0 / 0.15);

  /* Layout-Dimensionen */
  --sq-topbar-height:   56px;
  --sq-sidebar-width:   220px;
  --sq-sidebar-collapsed: 64px;
  --sq-tile-gap:        20px;
  --sq-field-height:    52px;
  --sq-field-height-sm: 44px;
  /* Vertikaler Abstand zwischen Feldzeilen einer Tile (und in Stack-Zellen).
     Radio-Groups sind 2 Felder + 1 Row-Gap hoch → fluchten mit Stacks. */
  --sq-row-gap:         0.875rem;

  /* Border-Radius */
  --sq-radius:          8px;
  --sq-radius-sm:       4px;
  --sq-radius-lg:       12px;
  --sq-radius-full:     9999px;

  /* Schatten */
  --sq-shadow-sm:       0 1px 2px 0 rgb(0 0 0 / 0.05);
  --sq-shadow:          0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --sq-shadow-md:       0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --sq-shadow-lg:       0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* Typografie */
  --sq-font:            'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sq-font-mono:       'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --sq-text-xs:         0.75rem;
  --sq-text-sm:         0.875rem;
  --sq-text-base:       1rem;
  --sq-text-lg:         1.125rem;

  /* Transitions */
  --sq-transition:      150ms ease;
  --sq-transition-slow: 250ms ease;

  /* Z-Ebenen */
  --sq-z-sidebar:       100;
  --sq-z-topbar:        200;
  --sq-z-overlay:       300;
  --sq-z-modal:         400;
  --sq-z-dropdown:      200;   /* Topbar-Dropdowns */
  --sq-z-field-error:   10;    /* Fehler-Tooltip am Feld */
}

/* Dark Mode */
[data-theme="dark"] {
  --sq-surface:         #0f172a;   /* Slate-900  */
  --sq-surface-raised:  #1e293b;   /* Slate-800  */
  --sq-surface-hover:   #334155;   /* Slate-700  */
  --sq-border:          #334155;   /* Slate-700  */
  --sq-border-focus:    #475569;   /* Slate-600  */
  --sq-text:            #f1f5f9;   /* Slate-100  */
  --sq-text-muted:      #94a3b8;   /* Slate-400  */
  --sq-primary-light:   #0d9488;   /* Teal-600   */
  --sq-label-active-color: #5eead4; /* Teal-300 — lighter label color on dark bg */
  --sq-on-primary-light: var(--sq-text-inverse); /* 3.7:1 auf Teal-600 */
  --sq-accent:          #0d9488;   /* Teal-600 — brighter on dark bg */
  --sq-shadow-sm:       0 1px 2px 0 rgb(0 0 0 / 0.3);
  --sq-shadow:          0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
  --sq-shadow-md:       0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
  --sq-shadow-lg:       0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
}

[data-theme="dark"] .sq-subnav-tab.active {
  color: var(--sq-text-inverse);
}

[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"] {
  color-scheme: dark;
}