/* ============================================================
   DESIGN-TOKENS — CDI Alumni Deutschland e.V.
   ------------------------------------------------------------
   Zentrale Stelle fuer Farben, Schriften, Abstaende & Co.
   Werte hier aendern -> wirkt auf die GESAMTE Website.

   Hinweis (DSGVO): Es werden bewusst KEINE externen Schrift-
   arten (z. B. von Google-Servern) geladen. Die Schrift
   IBM Plex Sans liegt lokal in /fonts und wird ausschliesslich
   vom eigenen Server geladen — kein externer Datenabruf.
   ============================================================ */

:root {
  /* ---------- 1. FARBEN: Marke ---------- */
  --color-primary:       #2F4A6D;              /* Primaer */
  --color-accent:        #A50000;              /* Akzent */
  --color-accent-strong: #870000;              /* Akzent, dunkler (Hover) */
  --color-gold:          #C79A54;              /* Auszeichnungs-Gold (aus GLA-Logo) */
  --color-gold-soft:     #E1B978;              /* Gold, heller (auf dunklem Grund) */

  /* Navy-Abstufungen (aus der Primaerfarbe abgeleitet) */
  --navy-900: #14213A;
  --navy-800: #1B2C48;
  --navy-700: #223B5A;
  --navy-600: #2F4A6D;  /* = Primaer */
  --navy-500: #3E5C82;
  --navy-400: #5F7597;
  --navy-300: #93A6BF;
  --navy-200: #C3CFDF;
  --navy-100: #DEE6F0;
  --navy-50:  #EEF3F9;

  /* ---------- 2. FARBEN: Flaechen & Text ---------- */
  --color-bg:            #F5F8FC;  /* Seitenhintergrund (kuehles Off-White) */
  --color-surface:       #FFFFFF;  /* Karten, Panels */
  --color-surface-alt:   #EAF1F8;  /* abgesetzte Abschnitte */
  --color-border:        #D7E0EC;  /* Linien/Raender */
  --color-ink:           #14213A;  /* Ueberschriften */
  --color-text:          #24344E;  /* Fliesstext */
  --color-text-muted:    #4F5F77;  /* Nebentext (Kontrast >= 4.5:1 auf BG) */
  --color-on-dark:       #FFFFFF;  /* Text auf dunklem Grund */
  --color-on-dark-muted: #C4D2E4;  /* Nebentext auf dunklem Grund */

  /* ---------- 3. TYPOGRAFIE ---------- */
  /* IBM Plex Sans (lokal gehostet, siehe @font-face in style.css);
     Ersatz bis zum Laden: System-Sans */
  --font-sans:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-body:    var(--font-sans);

  --fw-light:    300;
  --fw-regular:  400;
  --fw-semibold: 600;

  /* Fluid-Schriftgroessen (skalieren mit der Fensterbreite) */
  --fs-hero: clamp(2.6rem, 1.55rem + 4.4vw, 4.6rem);
  --fs-h2:   clamp(1.85rem, 1.35rem + 2.1vw, 2.75rem);
  --fs-h3:   clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --fs-lead: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);
  --fs-base: 1.0625rem;  /* ~17px */
  --fs-sm:   0.9rem;
  --fs-xs:   0.78rem;
  --fs-nav:  1.05rem;   /* einheitliche Groesse fuer Navigationslinks & Buttons */

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.65;

  --tracking-tight: -0.015em;
  --tracking-wide:   0.12em;

  /* ---------- 4. ABSTAENDE ---------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --section-y: clamp(4rem, 2rem + 7vw, 8rem);  /* vertikale Abschnitts-Polsterung */

  /* ---------- 5. LAYOUT ---------- */
  --container:        1320px;  /* maximale Inhaltsbreite (auch auf sehr breiten Monitoren) */
  --container-narrow: 1100px;
  --gutter:           clamp(1.15rem, 0.6rem + 2.5vw, 2.5rem);  /* seitlicher Innenabstand */
  --header-h:         4.75rem;

  --radius-sm:   8px;
  --radius:      14px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(20, 33, 58, 0.08);
  --shadow:    0 14px 34px -16px rgba(20, 33, 58, 0.28);
  --shadow-lg: 0 30px 70px -24px rgba(20, 33, 58, 0.40);

  /* ---------- 6. BEWEGUNG ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);  /* exponentielles Ausklingen, kein Bounce */
  --dur:      0.5s;
  --dur-fast: 0.24s;

  /* ---------- 7. Z-INDEX-SKALA ---------- */
  --z-header:  100;
  --z-overlay: 200;
}