/* ============================================================
   DESIGN TOKENS — DE Casino Affiliate · Theme "Night Teal v2"
   Single dark theme. All text/background pairs below are WCAG AA
   (verified; see README "Kontrast").
   ============================================================ */
:root {
  color-scheme: dark;

  /* --- Farben: Flächen --- */
  --c-bg:        #1B262F;   /* Seitenhintergrund (vave body) */
  --c-surface:   #253442;   /* Karten, Header, Footer */
  --c-surface-2: #2E3F4E;   /* Chips, Tabellen-Zebra, Logo-Placeholder */
  --c-border:    rgba(255,255,255,.14);
  --c-border-strong: rgba(255,255,255,.24);

  /* --- Farben: Text --- */
  --c-text:      #E6EDF3;   /* 13.0:1 auf bg */
  --c-text-muted:#9FB3C0;   /* 7.1:1 auf bg, 5.9:1 auf surface */
  --c-text-on-accent: #1B262F;

  /* --- Farben: Akzente --- */
  --c-accent:    #2BC69D;   /* CTA, Links, aktive Nav (7.1:1 auf bg) */
  --c-accent-hover: #5FD9B8;
  --c-accent-soft: rgba(43,198,157,.14);
  --c-gold:      #E3B65C;   /* Bewertung / Sterne (8.1:1 auf bg) */
  --c-gold-soft: rgba(227,182,92,.16);
  --c-danger:    #FF6B6B;   /* Live, Warnungen (5.5:1 auf bg) */
  --c-focus:     #7FE7CB;

  /* --- Typografie --- */
  --f-display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body:    "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs: .75rem;    /* 12 */
  --fs-sm: .875rem;   /* 14 */
  --fs-md: 1rem;      /* 16 */
  --fs-lg: 1.125rem;  /* 18 */
  --fs-xl: 1.375rem;  /* 22 */
  --fs-2xl: 1.75rem;  /* 28 */
  --fs-3xl: 2.25rem;  /* 36 */
  --fs-4xl: 2.75rem;  /* 44 */

  --lh-tight: 1.2;
  --lh-body: 1.6;

  /* --- Abstände (4px-Raster) --- */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;

  /* --- Form --- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.18);

  /* --- Layout --- */
  --container: 1200px;
  --gutter: 1rem;          /* 16px mobile */
  --header-h: 56px;
  --header-h-lg: 64px;     /* desktop logo row */
  --nav-bar-h: 48px;       /* desktop menu row under the logo row */
  --sticky-cta-h: 64px;

  /* --- Motion --- */
  --t-fast: 120ms ease;
}
@media (min-width: 768px) {
  :root { --gutter: 1.5rem; }
}
@media (min-width: 1024px) {
  :root { --gutter: 2rem; --header-h: calc(var(--header-h-lg) + var(--nav-bar-h)); }
}
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; }
}