/* =====================================================================
   Sportverein Beispiel e.V. — Design Tokens
   Basis für Contao 5.7 Templates. Alle Werte als CSS Custom Properties.
   ===================================================================== */

:root {
  /* ---- Farben: Primär (Teal) ---- */
  --color-primary:        #0f766e;
  --color-primary-hover:  #0b5e57;
  --color-primary-active: #094e48;
  --color-primary-soft:   #d7ebe8;  /* Tints / Flächen */
  --color-primary-tint:   #eef6f5;

  /* ---- Farben: Akzent (warmes Bernstein) ---- */
  --color-accent:         #e08a2e;
  --color-accent-hover:   #c8761f;
  --color-accent-soft:    #fbeeda;

  /* ---- Neutraltöne (kühl-warmes Grau-Grün) ---- */
  --color-bg:             #f6f8f7;
  --color-surface:        #ffffff;
  --color-surface-alt:    #eef3f1;
  --color-surface-sunken: #e7edeb;
  --color-border:         #dde5e2;
  --color-border-strong:  #c4d0cb;

  --color-text:           #1c2b28;
  --color-text-muted:     #56655f;
  --color-text-subtle:    #85938d;
  --color-text-invert:    #ffffff;

  /* ---- Semantik ---- */
  --color-success:        #2f8f4e;
  --color-success-soft:   #def0e4;
  --color-warning:        #c98a1a;
  --color-warning-soft:   #fbeed2;
  --color-error:          #c0392b;
  --color-error-soft:     #f7ddd9;
  --color-info:           #1f6fb2;
  --color-info-soft:      #dcebf6;

  /* ---- Kategorie-/Badge-Farben (gleiche Helligkeit & Sättigung) ---- */
  --cat-verein:   #0f766e;  --cat-verein-soft:  #d7ebe8;
  --cat-jugend:   #1f6fb2;  --cat-jugend-soft:  #dcebf6;
  --cat-event:    #e08a2e;  --cat-event-soft:   #fbeeda;
  --cat-sport:    #2f8f4e;  --cat-sport-soft:   #def0e4;
  --cat-wichtig:  #c0392b;  --cat-wichtig-soft: #f7ddd9;

  /* ---- Typografie ---- */
  --font-heading: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;

  --fs-h1:    clamp(2.25rem, 1.6rem + 2.6vw, 3rem);     /* 36 → 48 */
  --fs-h2:    clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);  /* 28 → 36 */
  --fs-h3:    1.5rem;     /* 24 */
  --fs-h4:    1.25rem;    /* 20 */
  --fs-lead:  1.125rem;   /* 18 */
  --fs-body:  1rem;       /* 16 */
  --fs-sm:    0.9375rem;  /* 15 */
  --fs-caption: 0.8125rem;/* 13 */

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-base:  1.65;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-xbold:   800;

  /* ---- Spacing-Skala (4 / 8 / 16 / 24 / 32 / 48 / 64 / 96) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* Dichte-Multiplikator (Tweak: kompakt ↔ luftig) */
  --density: 1;
  --section-y: calc(var(--space-8) * var(--density));

  /* ---- Radius ---- */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  22px;
  --radius-full: 999px;

  /* ---- Schatten (weich, niedrige Deckkraft) ---- */
  --shadow-xs: 0 1px 2px rgba(20, 40, 36, 0.06);
  --shadow-sm: 0 2px 6px rgba(20, 40, 36, 0.07);
  --shadow-md: 0 6px 18px rgba(20, 40, 36, 0.09);
  --shadow-lg: 0 16px 40px rgba(20, 40, 36, 0.12);

  /* ---- Layout ---- */
  --content-max: 1200px;
  --content-narrow: 760px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 76px;

  --ring: 0 0 0 3px color-mix(in srgb, var(--color-primary) 35%, transparent);
}