/* ===========================================================================
   Eifel Krankenfahrten — Design tokens
   Consolidated from the Eifel Krankenfahrten Design System handoff
   (tokens/fonts.css, colors.css, typography.css, spacing.css, base.css).
   =========================================================================== */

/* --- Webfonts: Montserrat (display) + Nunito Sans (body) ------------------ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,500;0,600;0,700;0,800;1,600&family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,500;0,6..12,600;0,6..12,700;1,6..12,400&display=swap');

:root {
  /* --- Brand blue (the droplet) ------------------------------------------ */
  --blue-50:  #F2FAFD;
  --blue-100: #E4F4FB;
  --blue-200: #C1E7F7;
  --blue-300: #8FD4F0;
  --blue-400: #4FBDE9;
  --blue-500: #00A0DF;   /* PRIMARY brand color */
  --blue-600: #0090C9;   /* hover */
  --blue-700: #0079A8;   /* active / press */
  --blue-800: #015E83;

  /* --- Navy / teal (deep backgrounds, header chrome) --------------------- */
  --navy-600: #14474F;
  --navy-700: #0C353D;
  --navy-800: #072227;   /* PRIMARY dark surface */
  --navy-900: #051A1E;

  /* --- Slate gray (wordmark, body text, neutrals) ----------------------- */
  --slate-900: #25282C;
  --slate-800: #34383D;
  --slate-700: #53585F;  /* EIFEL wordmark gray */
  --slate-600: #5B6067;
  --slate-500: #767B82;
  --slate-400: #9AA0A6;
  --slate-300: #C4C8CC;
  --slate-200: #E2E4E7;
  --slate-100: #F0F1F3;
  --slate-50:  #F7F8F9;
  --white:     #FFFFFF;

  /* --- Status (functional only) ----------------------------------------- */
  --green-500:  #2E9E5B;
  --green-100:  #E2F3E9;
  --amber-500:  #E0982E;
  --amber-100:  #FBF0DD;
  --red-500:    #D2453B;
  --red-100:    #F9E3E1;

  /* --- Semantic aliases -------------------------------------------------- */
  --color-primary:          var(--blue-500);
  --color-primary-hover:    var(--blue-600);
  --color-primary-active:   var(--blue-700);
  --color-primary-contrast: var(--white);
  --color-primary-soft:     var(--blue-100);
  --color-primary-soft-fg:  var(--blue-800);

  --color-dark:             var(--navy-800);
  --color-dark-hover:       var(--navy-700);
  --color-dark-contrast:    var(--white);

  --surface-page:    var(--white);
  --surface-muted:   var(--slate-50);
  --surface-soft:    var(--blue-50);
  --surface-card:    var(--white);
  --surface-dark:    var(--navy-800);
  --surface-brand:   var(--blue-500);

  --text-strong:   var(--slate-900);
  --text-body:     var(--slate-700);
  --text-muted:    var(--slate-500);
  --text-on-dark:  var(--white);
  --text-on-dark-muted: rgba(255,255,255,0.72);
  --text-on-brand: var(--white);
  --text-link:     var(--blue-600);

  --border-subtle:  var(--slate-200);
  --border-default: var(--slate-300);
  --border-strong:  var(--slate-400);
  --border-brand:   var(--blue-500);
  --divider-on-dark: rgba(255,255,255,0.16);

  --focus-ring: 0 0 0 3px rgba(0,160,223,0.40);

  --color-success:    var(--green-500);
  --color-success-bg: var(--green-100);
  --color-warning:    var(--amber-500);
  --color-warning-bg: var(--amber-100);
  --color-danger:     var(--red-500);
  --color-danger-bg:  var(--red-100);

  /* --- Typography -------------------------------------------------------- */
  --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

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

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  3rem;
  --text-4xl:  3.75rem;
  --text-5xl:  4.75rem;

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* --- Spacing (4px base) ------------------------------------------------ */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-12: 7rem;

  /* --- Radii ------------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   28px;
  --radius-2xl:  40px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);

  /* --- Shadows (soft, blue-tinted, low) ---------------------------------- */
  --shadow-xs:   0 1px 2px rgba(7,34,39,0.06);
  --shadow-sm:   0 2px 6px rgba(7,34,39,0.07);
  --shadow-md:   0 8px 20px rgba(7,34,39,0.08);
  --shadow-lg:   0 18px 40px rgba(7,34,39,0.10);
  --shadow-brand: 0 12px 28px rgba(0,160,223,0.28);
  --shadow-focus: var(--focus-ring);

  /* --- Layout ------------------------------------------------------------ */
  --container-max: 1200px;
  --container-pad: var(--space-5);
  --section-y:     var(--space-12);
  --header-h:      76px;

  /* --- Motion (gentle, reassuring; no bounce) ---------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   400ms;
}

/* --- Base element defaults ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: var(--text-4xl); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; }

strong { font-weight: var(--fw-bold); color: var(--text-strong); }

.eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}