/* ============================================================
   Die Blauen Panther — Design Tokens
   Variante „Ostkurve Flutlicht" (2b): dunkel zuerst, Archivo-Schrift.
   Farben abgeleitet vom Wappen (Royalblau, Marine, Weiß).
   Einbinden VOR panther-ui.css. Framework-agnostisch.
   ============================================================ */

:root {
  /* ---- Markenfarben ---- */
  --bp-royal:           #0A5AD0;   /* Panther-Blau aus dem Wappen: Bänder, Flächen, Markenfarbe */
  --bp-royal-strong:    #0C3A9A;   /* dunkles Royal: Hover auf Hell, Eyebrows auf Hell */
  --bp-flood:           #2F7FF2;   /* Flutlicht: Akzent auf Dunkel (Buttons, Linien, Icons) */
  --bp-sky:             #8FB8F5;   /* Himmel: Akzent-Text auf Dunkel, dezente Akzente */
  --bp-night:           #060A24;   /* Nacht: Seitenhintergrund dunkel */
  --bp-stand:           #0F1640;   /* Tribüne: Cards, Inputs auf Dunkel */
  --bp-night-soft:      #0A1033;   /* dezente Sektionsfläche dunkel */
  --bp-ink:             #060A24;   /* Text auf Hell */
  --bp-ink-soft:        #3D4670;
  --bp-white:           #F4F7FF;   /* kühles Weiß: Text auf Dunkel */
  --bp-ice:             #F2F5FC;   /* Seitenhintergrund hell */
  --bp-ice-deep:        #E6ECF8;   /* dezente Sektionsfläche hell */

  /* ---- Rollen: Akzent (theme-abhängig) ---- */
  --bp-accent:          var(--bp-flood);
  --bp-accent-strong:   var(--bp-royal);
  --bp-accent-soft:     var(--bp-sky);
  --bp-accent-tint:     rgba(47, 127, 242, 0.14);
  --bp-accent-tint-2:   rgba(47, 127, 242, 0.26);
  --bp-accent-text:     var(--bp-sky);     /* Eyebrows & Links: kontraststark pro Theme */

  /* ---- Rollen: Flächen ---- */
  --bp-bg:              var(--bp-night);
  --bp-surface:         var(--bp-stand);
  --bp-surface-subtle:  var(--bp-night-soft);
  --bp-hero-gradient:   radial-gradient(1200px 500px at 20% -10%, rgba(47,127,242,.35), transparent 60%),
                        linear-gradient(180deg, #0A1033 0%, #060A24 100%);

  /* ---- Rollen: Text & Linien ---- */
  --bp-text:            var(--bp-white);
  --bp-text-soft:       rgba(244, 247, 255, 0.74);
  --bp-text-muted:      #8A93C4;
  --bp-border:          rgba(255, 255, 255, 0.12);

  /* ---- Rollen: Kontrast-Button (invertiert) ---- */
  --bp-contrast-bg:     var(--bp-white);
  --bp-contrast-text:   var(--bp-night);

  /* ---- Band (immer royalblau, in beiden Themes) ---- */
  --bp-band-bg:         var(--bp-royal);
  --bp-band-surface:    rgba(255, 255, 255, 0.10);

  /* ---- Glow (Flutlicht-Schein) ---- */
  --bp-glow:            0 0 0 1px rgba(47,127,242,.35), 0 10px 40px rgba(47,127,242,.25);

  /* ---- Typografie: Archivo ---- */
  --bp-font:            "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bp-font-display:    "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bp-display-stretch: 125%;      /* breite Archivo-Schnitte für Headlines */
  --bp-fw-regular: 400;
  --bp-fw-semibold: 600;
  --bp-fw-extra: 800;

  --bp-text-eyebrow: 0.8rem;
  --bp-text-body:    1rem;
  --bp-text-lg:      1.125rem;
  --bp-h3:           1.15rem;
  --bp-h2:           clamp(1.7rem, 4vw, 2.4rem);
  --bp-h1:           clamp(2.2rem, 5.5vw, 3.6rem);

  --bp-tracking-eyebrow: 0.2em;
  --bp-tracking-caps:    0.06em;   /* Buttons, Status, Tags */

  /* ---- Radius (kantig) ---- */
  --bp-radius-sm: 4px;
  --bp-radius:    8px;

  /* ---- Schatten ---- */
  --bp-shadow:    0 4px 16px rgba(0, 0, 0, 0.45);

  /* ---- Spacing ---- */
  --bp-space-1: 0.25rem;
  --bp-space-2: 0.5rem;
  --bp-space-3: 0.75rem;
  --bp-space-4: 1rem;
  --bp-space-6: 1.5rem;
  --bp-space-8: 2rem;
  --bp-space-12: 3rem;
  --bp-space-16: 4rem;
  --bp-space-20: 5rem;

  /* ---- Layout ---- */
  --bp-container: 1200px;
  --bp-container-narrow: 820px;

  /* ---- Motion ---- */
  --bp-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --bp-dur:  180ms;

  color-scheme: dark;
}

/* ============================================================
   LIGHT MODE
   Aktivieren: <html data-theme="light">. Standard ist dunkel.
   Royalblau wird Akzent, Flächen kippen auf Eis/Weiß.
   ============================================================ */
[data-theme="light"] {
  color-scheme: light;

  --bp-accent:          var(--bp-royal);
  --bp-accent-strong:   var(--bp-royal-strong);
  --bp-accent-soft:     var(--bp-royal-strong);
  --bp-accent-tint:     rgba(10, 90, 208, 0.10);
  --bp-accent-tint-2:   rgba(10, 90, 208, 0.20);
  --bp-accent-text:     var(--bp-royal-strong);

  --bp-bg:              var(--bp-ice);
  --bp-surface:         #FFFFFF;
  --bp-surface-subtle:  var(--bp-ice-deep);
  --bp-hero-gradient:   radial-gradient(1200px 500px at 20% -10%, rgba(10,90,208,.18), transparent 60%),
                        linear-gradient(180deg, #E6ECF8 0%, #F2F5FC 100%);

  --bp-text:            var(--bp-ink);
  --bp-text-soft:       var(--bp-ink-soft);
  --bp-text-muted:      #6F78A3;
  --bp-border:          #D3DBEC;

  --bp-contrast-bg:     var(--bp-ink);
  --bp-contrast-text:   var(--bp-white);

  --bp-glow:            0 0 0 1px rgba(10,90,208,.25), 0 10px 40px rgba(10,90,208,.18);
  --bp-shadow:          0 4px 16px rgba(6, 10, 36, 0.10);
}

/* Optional: automatisch dem System folgen, wenn kein data-theme gesetzt ist.
   Auskommentiert lassen, wenn ausschließlich manuell umgeschaltet werden soll.
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { ... gleiche Werte wie [data-theme="light"] ... }
}
*/