/* ============================================================
   Team MPowerment — Design Tokens
   Schwarz / Weiß / Rot — brutalistisch-sportlich
   ============================================================ */
:root {
  /* === Brand-Farben === */
  --c-red-50:  #fff1f0;
  --c-red-100: #ffd6d2;
  --c-red-200: #ffaaa3;
  --c-red-300: #ff7569;
  --c-red-400: #ff3a2a;
  --c-red-500: #E10600;   /* Brand Primary */
  --c-red-600: #b80500;
  --c-red-700: #8e0400;
  --c-red-800: #650300;
  --c-red-900: #3d0200;
  --c-red-950: #1f0100;

  --c-black: #0a0a0a;
  --c-ink:   #111111;
  --c-graphite: #1a1a1a;
  --c-charcoal: #2a2a2a;
  --c-smoke: #3d3d3d;
  --c-mid:   #6b6b6b;
  --c-fog:   #a3a3a3;
  --c-mist:  #d4d4d4;
  --c-paper: #f5f5f5;
  --c-snow:  #fafafa;
  --c-white: #ffffff;

  /* === Semantik === */
  --c-bg:        var(--c-black);
  --c-bg-soft:   var(--c-graphite);
  --c-bg-card:   var(--c-charcoal);
  --c-text:      var(--c-white);
  --c-text-soft: var(--c-mist);
  --c-text-mute: var(--c-fog);
  --c-accent:    var(--c-red-500);
  --c-accent-h:  var(--c-red-400);
  --c-border:    rgba(255,255,255,0.08);
  --c-border-strong: rgba(255,255,255,0.18);
  --c-success:   #00C853;
  --c-warn:      #FFB300;
  --c-error:     var(--c-red-500);

  /* === Typografie === */
  --ff-display: 'Anton', 'Bebas Neue', 'Impact', system-ui, sans-serif;
  --ff-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ff-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-xs:   clamp(0.72rem, 0.69rem + 0.13vw, 0.78rem);
  --fs-sm:   clamp(0.84rem, 0.80rem + 0.18vw, 0.92rem);
  --fs-base: clamp(0.98rem, 0.93rem + 0.22vw, 1.06rem);
  --fs-md:   clamp(1.10rem, 1.04rem + 0.30vw, 1.22rem);
  --fs-lg:   clamp(1.30rem, 1.20rem + 0.50vw, 1.55rem);
  --fs-xl:   clamp(1.60rem, 1.42rem + 0.85vw, 2.10rem);
  --fs-2xl:  clamp(2.00rem, 1.70rem + 1.45vw, 2.95rem);
  --fs-3xl:  clamp(2.50rem, 1.95rem + 2.65vw, 4.20rem);
  --fs-4xl:  clamp(3.20rem, 2.30rem + 4.40vw, 6.00rem);
  --fs-5xl:  clamp(4.20rem, 2.60rem + 7.80vw, 9.50rem);
  --fs-mega: clamp(5.00rem, 3.00rem + 10.00vw, 13.00rem);

  --lh-tight: 0.92;
  --lh-snug: 1.08;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  --ls-tight: -0.02em;
  --ls-display: -0.025em;
  --ls-wide: 0.04em;
  --ls-mega: 0.18em;

  /* === Spacing 8pt === */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --sp-11: 192px;

  /* === Radii === */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 24px;
  --r-2xl: 36px;
  --r-full: 9999px;

  /* === Container === */
  --w-tight: 720px;
  --w-prose: 880px;
  --w-content: 1180px;
  --w-wide: 1440px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* === Shadows === */
  --sh-sm: 0 1px 2px rgba(0,0,0,0.18);
  --sh-md: 0 4px 16px rgba(0,0,0,0.32);
  --sh-lg: 0 12px 36px rgba(0,0,0,0.44);
  --sh-xl: 0 24px 60px rgba(0,0,0,0.52);
  --sh-glow: 0 0 0 2px var(--c-red-500), 0 0 32px rgba(225,6,0,0.55);
  --sh-glow-soft: 0 0 28px rgba(225,6,0,0.32);

  /* === Z-Index === */
  --z-base: 1;
  --z-sticky: 30;
  --z-header: 40;
  --z-overlay: 9000;
  --z-modal: 9500;
  --z-toast: 9800;

  /* === Motion === */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0.08, 0.68, 0.53);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap: cubic-bezier(0.86, 0, 0.07, 1);
  --t-fast: 160ms;
  --t-base: 280ms;
  --t-slow: 520ms;
  --t-epic: 920ms;
}

/* Light-Mode-Variante (für Athleten-Backend optional) */
[data-theme="light"] {
  --c-bg: var(--c-snow);
  --c-bg-soft: var(--c-paper);
  --c-bg-card: var(--c-white);
  --c-text: var(--c-ink);
  --c-text-soft: var(--c-charcoal);
  --c-text-mute: var(--c-mid);
  --c-border: rgba(0,0,0,0.08);
  --c-border-strong: rgba(0,0,0,0.18);
}