/* ─────────────────────────────────────────────────────────────
   V4 Fitness — Design-Tokens (Single Source of Truth)
   Heller Modus = Standard (Shop/Studio/Marke).
   Dunkler "Performance"-Modus = [data-theme="performance"] (Trainingsportal).
   Rot AUSSCHLIESSLICH für Aktionen (Kaufen, Reservieren, Angebote, Level-Up).
   ───────────────────────────────────────────────────────────── */

:root {
  /* Marken-Primärfarben */
  --v4-black: #0E0E10;
  --v4-white: #FFFFFF;
  --v4-off:   #F5F5F7;
  --v4-red:   #E2001A;
  --v4-red-dark: #B00015;
  --v4-grey:  #6B6B70;
  --v4-line:  #E3E3E6;

  /* Semantische Tokens — heller Modus */
  --v4-bg:        var(--v4-white);
  --v4-bg-soft:   var(--v4-off);
  --v4-fg:        var(--v4-black);
  --v4-fg-muted:  var(--v4-grey);
  --v4-border:    var(--v4-line);
  --v4-action:    var(--v4-red);
  --v4-action-hover: var(--v4-red-dark);
  --v4-on-action: var(--v4-white);

  /* Typo (Geist + Geist Mono + Instrument Serif für Kursiv-Akzente) */
  --v4-font-sans:  "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --v4-font-mono:  "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --v4-font-serif: "Instrument Serif", "Times New Roman", Georgia, serif;

  /* Radius / Schatten */
  --v4-radius-lg: 24px;
  --v4-radius:    16px;
  --v4-radius-sm: 10px;
  --v4-shadow:    0 2px 8px rgba(14, 14, 16, 0.08);
  --v4-shadow-hover: 0 1px 0 var(--v4-line), 0 16px 30px -18px rgba(14,14,16,0.22);

  /* Akzent-Helfer */
  --v4-red-tint:  rgba(226, 0, 26, 0.07);
  --v4-line-strong: #C9C9CE;
  --v4-gold:      #E8A200;
  --v4-ok:        #0A8F5B;
  --v4-ok-bg:     rgba(10, 143, 91, 0.10);
  --v4-warn:      #B46A00;
  --v4-warn-bg:   rgba(180, 106, 0, 0.12);

  /* 4px-Spacing-Grid */
  --v4-s1: 0.25rem; --v4-s2: 0.5rem; --v4-s3: 0.75rem; --v4-s4: 1rem;
  --v4-s6: 1.5rem;  --v4-s8: 2rem;   --v4-s12: 3rem;   --v4-s16: 4rem;
  --v4-section: clamp(4.5rem, 3rem + 8vw, 8.75rem);   /* 72→140px */
  --v4-maxw: 1280px;
  --v4-gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  /* Fluide Type-Scale */
  --v4-fs-eyebrow: clamp(0.6875rem, 0.66rem + 0.14vw, 0.75rem);
  --v4-fs-lead:    clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --v4-fs-display: clamp(2.75rem, 1.6rem + 5.8vw, 6rem);

  /* Motion — EINE Easing-Sprache */
  --v4-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --v4-t-fast: 140ms; --v4-t-base: 240ms;
}

/* Dunkler Performance-Modus — Trainingsportal */
[data-theme="performance"] {
  --v4-bg:        var(--v4-black);
  --v4-bg-soft:   #17171A;
  --v4-fg:        var(--v4-white);
  --v4-fg-muted:  #A0A0A6;
  --v4-border:    #2A2A2E;
  --v4-action:    var(--v4-red);
  --v4-action-hover: #FF1A30;
  --v4-on-action: var(--v4-white);
  --v4-shadow:    0 2px 12px rgba(0, 0, 0, 0.5);
}

/* Optional: respektiere System-Präferenz nur innerhalb des Portals */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --v4-bg: var(--v4-black);
    --v4-bg-soft: #17171A;
    --v4-fg: var(--v4-white);
    --v4-fg-muted: #A0A0A6;
    --v4-border: #2A2A2E;
  }
}

/* Basis-Anwendung (minimal — Layout kommt modular) */
body {
  margin: 0;
  background: var(--v4-bg);
  color: var(--v4-fg);
  font-family: var(--v4-font-sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--v4-action); }

.v4-btn-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--v4-action);
  color: var(--v4-on-action);
  border: 0;
  border-radius: var(--v4-radius-sm);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.v4-btn-action:hover { background: var(--v4-action-hover); }

/* Kontrast AA: Fokus immer sichtbar (WCAG 2.4.7) */
:focus-visible {
  outline: 3px solid var(--v4-action);
  outline-offset: 2px;
}