/* ==========================================================================
   Taktgeber - Design-Tokens (Nacht-Palette)
   --------------------------------------------------------------------------
   Einzige Quelle der Wahrheit fuer Farben, Abstaende, Radien, Schatten, Typo
   und Bewegung. Dokumentiert in docs/DESIGN.md.

   Regeln:
   - Kein Hardcoding von Farb-/Abstandswerten in Komponenten. Immer var(--tg-*).
   - Kein ALMAS-Branding, kein roter Baer. Das ist ein privates Produkt.
   - Namensschema: --tg-<gruppe>-<rolle>[-<variante>]
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---------------------------------------------------------------- Flaechen */
  --tg-bg-abyss: #05050a; /* ausserhalb der Karten, TV-Ansicht         */
  --tg-bg-base: #0a0a14; /* Seitenhintergrund                          */
  --tg-bg-raised: #12121f; /* Karten                                   */
  --tg-bg-overlay: #1a1a2c; /* Bottom-Sheet, Menues, Popover           */
  --tg-bg-sunken: #08080f; /* Eingabefelder, Wells                     */
  --tg-bg-hover: #1f1f34;
  --tg-bg-active: #26263f;

  /* Glas-/Schleier-Flaechen ueber dem Aurora-Verlauf */
  --tg-glass: rgb(255 255 255 / 4%);
  --tg-glass-strong: rgb(255 255 255 / 8%);
  --tg-scrim: rgb(5 5 10 / 72%);

  /* ------------------------------------------------------------------ Linien */
  --tg-line: #24243c;
  --tg-line-soft: #1a1a2c;
  --tg-line-strong: #34345a;

  /* ------------------------------------------------------------------ Schrift */
  --tg-text: #f3f2fb; /* Ueberschriften, Primaertext                   */
  --tg-text-muted: #a9a6c8; /* Sekundaertext                           */
  --tg-text-faint: #8b88ad; /* Metadaten, Hilfetexte (AA auch bei 12 px) */
  --tg-text-on-accent: #0a0a14;

  /* ------------------------------------------------------------------ Akzente
     Violett fuehrt (Marke), Cyan ist der Gegenpol (Sekundaeraktion),
     Magenta markiert das Live-Geschehen, Amber die Gaestewuensche. */
  --tg-accent: #7c5cff;
  --tg-accent-strong: #9a80ff;
  --tg-accent-soft: rgb(124 92 255 / 16%);
  --tg-accent-line: rgb(124 92 255 / 38%);

  --tg-accent-2: #35e0d8;
  --tg-accent-2-soft: rgb(53 224 216 / 14%);

  --tg-accent-3: #ff4d9d;
  --tg-accent-3-soft: rgb(255 77 157 / 14%);

  --tg-accent-4: #ffb347;
  --tg-accent-4-soft: rgb(255 179 71 / 14%);

  /* ------------------------------------------------------------------- Status */
  --tg-ok: #3ddc97;
  --tg-ok-soft: rgb(61 220 151 / 14%);
  --tg-warn: #ffb347;
  --tg-warn-soft: rgb(255 179 71 / 14%);
  --tg-danger: #ff5d6e;
  --tg-danger-soft: rgb(255 93 110 / 14%);
  --tg-info: #59a8ff;
  --tg-info-soft: rgb(89 168 255 / 14%);
  --tg-neutral: #8b88ad;
  --tg-neutral-soft: rgb(139 136 173 / 12%);

  /* ---------------------------------------------------------------- Verlaeufe */
  --tg-grad-brand: linear-gradient(135deg, #7c5cff 0%, #ff4d9d 100%);
  --tg-grad-cool: linear-gradient(135deg, #35e0d8 0%, #7c5cff 100%);
  --tg-grad-night: linear-gradient(180deg, #12121f 0%, #0a0a14 100%);
  --tg-grad-aurora: radial-gradient(
      60rem 40rem at 12% -10%,
      rgb(124 92 255 / 24%) 0%,
      transparent 60%
    ),
    radial-gradient(48rem 34rem at 92% 6%, rgb(255 77 157 / 18%) 0%, transparent 58%),
    radial-gradient(52rem 40rem at 50% 108%, rgb(53 224 216 / 14%) 0%, transparent 62%);

  /* ---------------------------------------------------------------- Abstaende
     4-px-Raster. Niemals krumme Zwischenwerte erfinden. */
  --tg-space-0: 0;
  --tg-space-1: 0.25rem; /*  4px */
  --tg-space-2: 0.5rem; /*   8px */
  --tg-space-3: 0.75rem; /* 12px */
  --tg-space-4: 1rem; /*    16px */
  --tg-space-5: 1.5rem; /*  24px */
  --tg-space-6: 2rem; /*    32px */
  --tg-space-7: 3rem; /*    48px */
  --tg-space-8: 4rem; /*    64px */
  --tg-space-9: 6rem; /*    96px */

  /* ------------------------------------------------------------------ Radien */
  --tg-radius-xs: 0.375rem;
  --tg-radius-sm: 0.625rem;
  --tg-radius-md: 1rem;
  --tg-radius-lg: 1.5rem;
  --tg-radius-xl: 2rem;
  --tg-radius-pill: 999px;

  /* --------------------------------------------------------------- Schatten
     Mehrschichtig: Kontaktschatten + weiche Streuung + Innenkante.
     Im Dunkeln traegt zusaetzlich ein farbiger Schein (Glow). */
  --tg-shadow-1: 0 1px 2px rgb(0 0 0 / 40%), 0 2px 8px rgb(0 0 0 / 28%);
  --tg-shadow-2: 0 1px 2px rgb(0 0 0 / 44%), 0 6px 18px rgb(0 0 0 / 34%),
    0 16px 40px rgb(0 0 0 / 26%);
  --tg-shadow-3: 0 2px 4px rgb(0 0 0 / 48%), 0 12px 32px rgb(0 0 0 / 38%),
    0 32px 72px rgb(0 0 0 / 32%);
  --tg-shadow-inset: inset 0 1px 0 rgb(255 255 255 / 6%);
  --tg-glow-accent: 0 0 0 1px rgb(124 92 255 / 30%), 0 8px 32px rgb(124 92 255 / 28%);
  --tg-glow-live: 0 0 0 1px rgb(255 77 157 / 34%), 0 8px 28px rgb(255 77 157 / 26%);

  /* ------------------------------------------------------------------- Fokus
     Der Fokus laeuft ueber `outline`, NICHT ueber `box-shadow`. Grund: jede
     Komponente mit eigenem Schatten (Buttons, aktiver Schalter, Version-Badge)
     wuerde einen Schatten-Ring ersatzlos ueberschreiben. `outline` kann das
     nicht passieren, und es folgt automatisch dem `border-radius`.
     Regel: `outline: none` ist verboten, ausser direkt daneben steht ein
     Ersatz-`outline`. */
  --tg-focus-color: var(--tg-accent-strong);
  --tg-focus-width: 2px;
  --tg-focus-offset: 2px;

  /* --------------------------------------------------------------- Typografie */
  --tg-font-sans: 'Helvetica Neue', Helvetica, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Arial, sans-serif;
  --tg-font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo,
    Consolas, monospace;

  /* Fliessende Groessen: klein auf dem Handy, gross auf dem Beamer. */
  --tg-fs-xs: 0.75rem;
  --tg-fs-sm: 0.8125rem;
  --tg-fs-md: 0.9375rem;
  --tg-fs-lg: 1.0625rem;
  --tg-fs-xl: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);
  --tg-fs-2xl: clamp(1.625rem, 1.2rem + 2vw, 2.5rem);
  --tg-fs-3xl: clamp(2.25rem, 1.4rem + 4vw, 4rem);

  --tg-lh-tight: 1.15;
  --tg-lh-snug: 1.35;
  --tg-lh-normal: 1.6;

  --tg-fw-regular: 400;
  --tg-fw-medium: 500;
  --tg-fw-bold: 700;

  --tg-tracking-tight: -0.02em;
  --tg-tracking-wide: 0.08em;

  /* ------------------------------------------------------------------ Bewegung
     Viele Animationen sind erwuenscht - aber jede haengt an diesen Tokens,
     damit `prefers-reduced-motion` sie an EINER Stelle abschalten kann. */
  --tg-dur-instant: 80ms;
  --tg-dur-fast: 160ms;
  --tg-dur-base: 260ms;
  --tg-dur-slow: 420ms;
  --tg-dur-slower: 800ms;
  --tg-dur-ambient: 18s; /* Aurora, Equalizer, Dauerschleifen */

  --tg-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --tg-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --tg-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ------------------------------------------------------------------- Layout */
  --tg-container: 76rem;
  --tg-container-narrow: 44rem;
  --tg-header-h: 4rem;
  --tg-bottom-nav-h: 4.25rem; /* Gaesteansicht */
  --tg-tap-target: 2.75rem; /* 44px Mindestgroesse fuer Finger */

  /* -------------------------------------------------------------------- Ebenen */
  --tg-z-base: 0;
  --tg-z-sticky: 100;
  --tg-z-nav: 200;
  --tg-z-fab: 300;
  --tg-z-sheet: 400;
  --tg-z-toast: 500;
}

/* Bewegung aus - alle Dauern auf beinahe null. Komponenten muessen dafuer
   nichts wissen, solange sie ausschliesslich die Dauer-Tokens verwenden. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --tg-dur-instant: 1ms;
    --tg-dur-fast: 1ms;
    --tg-dur-base: 1ms;
    --tg-dur-slow: 1ms;
    --tg-dur-slower: 1ms;
    --tg-dur-ambient: 1ms;
  }
}

/* Hoher Kontrast: Linien und Sekundaertext anheben. */
@media (prefers-contrast: more) {
  :root {
    --tg-text-muted: #cfcde6;
    --tg-text-faint: #b4b1cf;
    --tg-focus-width: 3px;
    --tg-line: #3b3b60;
    --tg-line-soft: #2c2c48;
  }
}