/* ============================================================
   DESIGN TOKENS — Wundexperte ICW
   ============================================================ */

:root {
  /* ── Colors ── */
  --color-primary:       #1A5C52;   /* Dark teal-green (logo) */
  --color-primary-dark:  #134840;   /* Dark teal-green hover */
  --color-accent:        #2E9B85;   /* Medium teal-green */
  --color-accent-dark:   #268A75;   /* Medium teal-green hover */
  --color-accent-light:  #D0EDE8;   /* Pale teal-green (badges, bg) */
  --color-bg:            #FFFFFF;
  --color-bg-soft:       #F4FAF9;
  --color-text:          #1A2E2B;   /* Near-black with green tint */
  --color-text-muted:    #5A6F6C;
  --color-border:        #C8DDD9;
  --color-success:       #1E8449;
  --color-success-light: #D5F5E3;
  --color-error:         #B03A2E;
  --color-error-light:   #FADBD8;
  --color-white:         #FFFFFF;
  --color-footer-bg:     #112E29;

  /* ── Typography ── */
  --font-family: 'Inter', -apple-system, 'Segoe UI', Arial, Helvetica, sans-serif;

  --font-size-xs:   13px;
  --font-size-sm:   15px;
  --font-size-base: 18px;
  --font-size-lg:   20px;
  --font-size-xl:   22px;
  --font-size-h4:   22px;
  --font-size-h3:   26px;
  --font-size-h2:   32px;
  --font-size-h1:   44px;

  --font-weight-regular: 400;
  --font-weight-medium:  600;
  --font-weight-bold:    700;

  --line-height-body:     1.7;
  --line-height-heading:  1.25;
  --line-height-tight:    1.1;

  --letter-spacing-heading: -0.01em;
  --letter-spacing-eyebrow:  0.12em;

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

  /* ── Border radius ── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:  10px;
  --radius-xl:  16px;
  --radius-pill: 999px;

  /* ── Shadows ── */
  --shadow-sm:  0 2px  8px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.09);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12);
  --shadow-card-hover: 0 6px 24px rgba(0,0,0,0.10);

  /* ── Layout ── */
  --container-max: 1400px;
  --container-padding: clamp(16px, 5vw, 48px);
  --section-py: var(--space-7);
  --nav-height: 140px;

  /* ── Transitions ── */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;

  /* ── Focus ring ── */
  --focus-ring: 0 0 0 3px rgba(46,134,171,0.4);
}

@media (max-width: 992px) {
  :root {
    --section-py: var(--space-6);
  }
}

@media (max-width: 768px) {
  :root {
    --section-py: var(--space-5);
    --font-size-h1: 28px;
    --font-size-h2: 26px;
    --font-size-h3: 22px;
    --font-size-lg: 18px;
    --nav-height: 100px;
  }
}

@media (max-width: 480px) {
  :root {
    --font-size-h1: 24px;
    --font-size-h2: 21px;
    --font-size-h3: 19px;
    --font-size-base: 16px;
  }
}