/* ===== OSC Design Tokens ===================================================
   Alle Werte hier definiert — nie inline, nie doppelt.
   Dept-Farben werden per body.dept-X überschrieben.
   ========================================================================== */

:root {
  /* OSC Vereinsfarben: Rot · Schwarz · Weiß · Gelb (nach Vereinswappen) */
  --osc-red:     #CC0000;   /* Primärrot OSC */
  --osc-yellow:  #F5C200;   /* Akzentgelb */
  --osc-dark:    #1A1A1A;   /* Fast Schwarz */
  --osc-mid:     #3D3D3D;
  --osc-muted:   #717171;
  --osc-border:  #E5E5E5;
  --osc-light:   #F7F7F7;
  --osc-white:   #FFFFFF;

  /* OSC-Header nutzt die Vereinsfarben */
  --header-bg:   #1A1A1A;
  --header-text: #FFFFFF;
  --header-accent: #CC0000;

  /* Dept-Farbe: Standard = OSC-Rot, wird per body.dept-X überschrieben */
  --dept-primary:   #CC0000;
  --dept-secondary: #990000;
  --dept-light:     #FFF5F5;
  --dept-contrast:  #FFFFFF;

  /* Typografie */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold: 800;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  clamp(1.5rem,  2.5vw, 1.875rem);
  --text-4xl:  clamp(1.75rem, 3vw,   2.25rem);
  --text-5xl:  clamp(2rem,    4vw,   3rem);
  --text-6xl:  clamp(2.5rem,  5vw,   3.75rem);

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Radien */
  --radius-sm: 3px;
  --radius:    6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow:    0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -1px rgba(0,0,0,.06);
  --shadow-md: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.05);
  --shadow-lg: 0 20px 25px -5px rgba(0,0,0,.1),  0 10px 10px -5px rgba(0,0,0,.04);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* Layout */
  --header-height: 60px;
  --subnav-height: 48px;
  --max-content:   720px;
  --max-wide:      1200px;
  --max-full:      1440px;

  /* Header */
  --header-bg: #111827;
  --header-text: #FFFFFF;
}

/* ===== Dept Color Overrides ===============================================
   Basis-Farbe = WP-Preset-Variable (änderbar im Site Editor unter Stile → Farben)
   Nuancen werden automatisch per color-mix() berechnet — keine manuellen Werte.
   ========================================================================== */

body.dept-eiserne {
  --dept-base:      var(--wp--preset--color--eiserne, #CC0000);
  --dept-primary:   var(--dept-base);
  --dept-secondary: color-mix(in srgb, var(--dept-base) 75%, black);
  --dept-light:     color-mix(in srgb, var(--dept-base) 8%,  white);
  --dept-contrast:  #FFFFFF;
}

body.dept-towers {
  --dept-base:      var(--wp--preset--color--towers, #EA580C);
  --dept-primary:   var(--dept-base);
  --dept-secondary: color-mix(in srgb, var(--dept-base) 75%, black);
  --dept-light:     color-mix(in srgb, var(--dept-base) 8%,  white);
  --dept-contrast:  #FFFFFF;
}

body.dept-kempo {
  --dept-base:      var(--wp--preset--color--kempo, #B45309);
  --dept-primary:   var(--dept-base);
  --dept-secondary: color-mix(in srgb, var(--dept-base) 75%, black);
  --dept-light:     color-mix(in srgb, var(--dept-base) 8%,  white);
  /* Kempo-Farbe ist hell (Gelb) → dunkler Text statt weiß für Lesbarkeit */
  --dept-contrast:  var(--osc-dark, #111827);
}

body.dept-loewen {
  --dept-base:      var(--wp--preset--color--loewen, #1D4ED8);
  --dept-primary:   var(--dept-base);
  --dept-secondary: color-mix(in srgb, var(--dept-base) 75%, black);
  --dept-light:     color-mix(in srgb, var(--dept-base) 8%,  white);
  --dept-contrast:  #FFFFFF;
}

body.dept-gymnastik {
  --dept-base:      var(--wp--preset--color--gymnastik, #9D174D);
  --dept-primary:   var(--dept-base);
  --dept-secondary: color-mix(in srgb, var(--dept-base) 75%, black);
  --dept-light:     color-mix(in srgb, var(--dept-base) 8%,  white);
  --dept-contrast:  #FFFFFF;
}