/* ==========================================================================
   Design-Tokens
   --------------------------------------------------------------------------
   Das ist die Stellschraube für das Aussehen. Farben, Radien, Abstaende und
   Schatten sind hier zentral definiert - wer das Erscheinungsbild anpassen
   will, ändert im Normalfall nur diese Datei.

   Die Farbwelt orientiert sich am hartech-Auftritt:
     #009ed4  Primaerfarbe (Buttons, Links, Symbole)
     #0071a4  dunklere Variante für Verlaeufe
     #e9b400  goldener Akzent für Hinweise und aktive Sitzungen
     #192d34  Petrol als Flaechenhintergrund, #0b1e24 als Grundton

   --accent / --accent-2 werden zusätzlich zur Laufzeit aus den
   Branding-Einstellungen überschrieben (Trainer -> Erscheinungsbild).
   ========================================================================== */

:root {
  /* Markenfarben (Standard, wird vom Branding überschrieben) */
  --accent: #009ed4;
  --accent-2: #0071a4;
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-gradient: linear-gradient(135deg, var(--accent), var(--accent-2));

  /* Goldener Zweitakzent - hebt aktive Sitzungen und Hinweise hervor */
  --gold: #e9b400;
  --gold-soft: color-mix(in srgb, var(--gold) 16%, transparent);

  /* Statusfarben */
  --ok: #12a150;
  --warn: #e9b400;
  --danger: #e5484d;
  --info: #009ed4;

  /* Typografie - Systemschriften, damit nichts extern nachgeladen wird */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
          Arial, 'Noto Sans', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
               'Liberation Mono', monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.75rem;

  /* Abstaende */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* Radien */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  /* Bewegung */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 140ms;
  --normal: 240ms;

  --sidebar-w: 244px;
}

/* --------------------------- Dunkles Thema ------------------------------ */
:root,
:root[data-theme='dark'] {
  --bg: #0b1e24;
  --bg-elev: #192d34;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-hover: rgba(255, 255, 255, 0.075);
  --surface-solid: #1e343c;
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.18);

  --fg: #fdfdfd;
  --fg-muted: #9ba9b1;
  --fg-subtle: #84949d;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 24px 60px -16px rgba(0, 0, 0, 0.7);
  --glow: 0 0 0 1px var(--accent-soft), 0 8px 32px -8px var(--accent-soft);
}

/* --------------------------- Helles Thema ------------------------------- */
:root[data-theme='light'] {
  --bg: #f3f5f6;
  --bg-elev: #fdfdfd;
  --surface: rgba(25, 45, 52, 0.03);
  --surface-hover: rgba(25, 45, 52, 0.06);
  --surface-solid: #ffffff;
  --border: #e5e9eb;
  --border-strong: #cbd4d8;

  --fg: #192d34;
  --fg-muted: #445760;
  --fg-subtle: #84949d;

  --shadow-sm: 0 1px 2px rgba(25, 45, 52, 0.07);
  --shadow-md: 0 8px 24px -10px rgba(25, 45, 52, 0.2);
  --shadow-lg: 0 24px 60px -20px rgba(25, 45, 52, 0.28);
  --glow: 0 0 0 1px var(--accent-soft), 0 8px 32px -12px var(--accent-soft);
}

/* Wer Animationen abgeschaltet hat, bekommt keine */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}