/* ============================================================
   CMH Design Tokens — core/tokens.css — Skill v4.0
   Quelle: cmh-design-system/styles/tokens.css (2026-07-21).
   Die EINZIGE Quelle aller Werte. Kein Hex außerhalb dieser Datei.
   Light-Set (Sektion F) aus dem Live-Produkt abgeleitet, Freigabe offen.
   ============================================================ */

:root{
  /* A · Brand & Status */
  --brand-500:#b30919; --brand-hover:#A30817; --brand-pressed:#7F0612;
  --highlight-500:#0d97cb; --highlight-hover:#0C89B9; --highlight-pressed:#096B90;
  --success-500:#31a064; --success-hover:#2D925B; --success-pressed:#237247;
  --live-tag:#ff0000; --live-tag-hover:#E80000;
  --gradient-popular:linear-gradient(135deg,#f41b3b,#ae46b9,#8f76fc,#1884f7);
  --fei-purple:#4b0a57; --badminton-blue:#1d4c94; --major-league-green:#6ef322; --usef-blue:#14377d;

  /* B · Neutrals (dunkel) */
  --neutral-white:#ffffff; --neutral-50:#ebecec; --neutral-100:#c2c3c5; --neutral-200:#a3a6ab;
  --neutral-300:#7a7e82; --neutral-400:#61656a; --neutral-500:#393e45; --neutral-600:#333f53;
  --neutral-700:#222731; --neutral-800:#070e16; --neutral-900:#080e16; --neutral-950:#1f2226;

  /* C · Semantik dunkel */
  --text-primary:var(--neutral-white); --text-secondary:var(--neutral-100);
  --text-muted:var(--neutral-200); --text-subtle:var(--neutral-300); --text-disabled:var(--neutral-400);
  --card-bg:#222731; --card-surface:#333f53; --card-radius:12px; --card-padding:16px;
  --transparent-bg:rgba(7,14,22,0.75);

  /* D · Adaptive (dunkel; html.light überschreibt) */
  --lm-bg:var(--neutral-800); --lm-border:var(--neutral-600);
  --lm-text-primary:var(--neutral-white); --lm-text-muted:var(--neutral-200);
  --lm-input-bg:rgba(255,255,255,0.06); --lm-input-bg-focus:rgba(255,255,255,0.09);
  --lm-btn-bg:rgba(255,255,255,0.12); --lm-btn-bg-hover:rgba(255,255,255,0.20);

  /* E · Typografie, Spacing, Radius, Motion, Grid */
  --font-family:'Roboto',sans-serif; --heading-sm:24px;
  --text-xs:11px; --text-sm:14px; --text-base:15px; --text-md:17px; --text-lg:20px;
  --text-xl:24px; --text-2xl:30px; --text-3xl:38px; --text-4xl:48px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px;
  --space-24:96px; --space-40:160px;
  --radius-2xs:2px; --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
  --radius-xl:24px; --radius-2xl:32px; --radius-full:9999px;
  --ease-out:cubic-bezier(0.16,1,0.3,1); --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --transition-fast:150ms;
  --grid-columns-mobile:2; --grid-columns-tablet:4; --grid-columns-desktop:6; --grid-columns-ultrawide:8;
  --grid-gutter-mobile:8px; --grid-gutter-tablet:12px; --grid-gutter-desktop:16px;
  --grid-margin-mobile:20px; --grid-margin-tablet:32px; --grid-margin-desktop:40px; /* siehe DECISIONS-PENDING */
  --grid-max-width:1600px; --grid-max-width-ultrawide:2560px;
  --breakpoint-mobile:480px; --breakpoint-tablet:768px; --breakpoint-desktop:1200px; --breakpoint-ultrawide:1920px;

  /* F · LIGHT SURFACE für interne Tools / Formulare (abgeleitet aus clipmyhorse.tv/register) */
  --light-canvas:#ffffff;                  /* Seiten-/Content-Hintergrund */
  --light-card:#ffffff;                    /* Karten auf Canvas, 1px Border */
  --light-card-border:var(--neutral-50);   /* #ebecec */
  --light-panel:var(--neutral-50);         /* Info-Boxen, Zebra-Zeilen */
  --light-text-primary:var(--neutral-800); /* #070e16 */
  --light-text-body:var(--neutral-500);    /* #393e45, ~11:1 auf Weiß */
  --light-text-muted:var(--neutral-400);   /* #61656a, 5.7:1 (AA) — Minimum für Fließtext hell */
  --light-text-subtle:var(--neutral-300);  /* #7a7e82, nur Captions ≥ 14px bold / uppercase */
  --light-btn-dark:var(--neutral-500);     /* dunkler Vollflächen-Button wie im Checkout */
  --light-btn-dark-hover:var(--neutral-600);
  --light-focus:var(--highlight-500);
}
@media (max-width:480px){:root{--radius-lg:12px;--radius-xl:16px;--radius-2xl:20px}}
@media (min-width:481px) and (max-width:1024px){:root{--radius-lg:14px;--radius-xl:20px;--radius-2xl:26px}}

/* Light Mode der Produkt-UI (offiziell) */
html.light{
  --lm-bg:#dde0e4;
  /* weitere html.light-Overrides liegen in der DS-App; bis zur vollständigen Übernahme
     nutzen interne Tools die Sektion F oben, nicht html.light. */
}