/* ==========================================================================
   Variables – Globale CSS-Variablen für Farben, Abstände, Schriften etc.
   ========================================================================== */

:root {
  /* ── Primärfarben ─────────────────────────────────────────────────────── */
  --color-primary:          #1E3A5F;
  --color-primary-light:    #2A4F7A;
  --color-primary-dark:     #152C48;
  --color-primary-rgb:      30, 58, 95;

  /* ── Akzentfarbe ──────────────────────────────────────────────────────── */
  --color-accent:           #E28C50;
  --color-accent-light:     #EDA46F;
  --color-accent-dark:      #C67539;
  --color-accent-rgb:       226, 140, 80;

  /* ── Hintergrundfarben (Dunkel / Blau-Ton) ─────────────────────────── */
  --color-bg:               #0F1D2E;
  --color-bg-light:         #142536;
  --color-bg-alt:           #1A2E44;
  --color-bg-dark:          #0A1520;
  --color-bg-card:          #162A40;
  --color-bg-card-hover:    #1C3350;

  /* ── Textfarben (angepasst an dunklen Hintergrund) ────────────────── */
  --color-text:             #D6DDE6;
  --color-text-light:       #A0AEBB;
  --color-text-muted:       #6B7F94;
  --color-text-on-dark:     #FFFFFF;
  --color-text-on-primary:  #FFFFFF;

  /* ── Border & Schatten ────────────────────────────────────────────────── */
  --color-border:           #243B54;
  --color-border-light:     #1E3248;
  --shadow-sm:              0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:              0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg:              0 8px 30px rgba(0, 0, 0, 0.4);
  --shadow-card:            0 2px 12px rgba(0, 0, 0, 0.25);

  /* ── Typografie ───────────────────────────────────────────────────────── */
  --font-family:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-heading:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --font-size-xs:           0.75rem;    /* 12px */
  --font-size-sm:           0.875rem;   /* 14px */
  --font-size-base:         1rem;       /* 16px */
  --font-size-md:           1.125rem;   /* 18px */
  --font-size-lg:           1.25rem;    /* 20px */
  --font-size-xl:           1.5rem;     /* 24px */
  --font-size-2xl:          2rem;       /* 32px */
  --font-size-3xl:          2.5rem;     /* 40px */
  --font-size-4xl:          3rem;       /* 48px */

  --font-weight-normal:     400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;

  --line-height-tight:      1.2;
  --line-height-normal:     1.6;
  --line-height-relaxed:    1.8;

  /* ── Abstände ─────────────────────────────────────────────────────────── */
  --spacing-xs:             0.25rem;    /* 4px */
  --spacing-sm:             0.5rem;     /* 8px */
  --spacing-md:             1rem;       /* 16px */
  --spacing-lg:             1.5rem;     /* 24px */
  --spacing-xl:             2rem;       /* 32px */
  --spacing-2xl:            3rem;       /* 48px */
  --spacing-3xl:            4rem;       /* 64px */
  --spacing-4xl:            6rem;       /* 96px */

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --container-max:          1200px;
  --container-narrow:       900px;
  --header-height:          80px;

  /* ── Border-Radius ────────────────────────────────────────────────────── */
  --radius-sm:              4px;
  --radius-md:              8px;
  --radius-lg:              12px;
  --radius-xl:              16px;
  --radius-full:            50%;

  /* ── Transitions ──────────────────────────────────────────────────────── */
  --transition-fast:        0.2s ease;
  --transition-base:        0.3s ease;
  --transition-slow:        0.5s ease;
}