/* ============================================================
   Vital Scheffer — Foundations
   Colors + Typography + Spacing tokens
   ============================================================ */

:root {
  /* ---- COLOR — Brand primaries ---- */
  --vital-blue:        #3A9BC7;
  --vital-green:       #5ACB3D;

  --blue-50:           #EAF5FA;
  --blue-100:          #C9E5F0;
  --blue-200:          #9FD0E5;
  --blue-300:          #6EB7D6;
  --blue-400:          #3A9BC7;
  --blue-500:          #2F87B1;
  --blue-600:          #246E92;
  --blue-700:          #1C5775;
  --blue-800:          #163F55;

  --green-50:          #ECF8E8;
  --green-100:         #CDEEC2;
  --green-200:         #A6E193;
  --green-300:         #7FD466;
  --green-400:         #5ACB3D;
  --green-500:         #46A92E;
  --green-600:         #348422;
  --green-700:         #266418;
  --green-800:         #1A4710;

  /* ---- Neutrals ---- */
  --clinical-white:    #FFFFFF;
  --bg:                #FFFFFF;
  --bg-muted:          #F7F9FB;
  --bg-soft:           #F1F4F7;
  --soft-gray:         #E8E8E8;
  --line:              #E1E6EB;
  --line-strong:       #C9D1D9;
  --graphite:          #666666;
  --ink-2:             #555E66;
  --ink:               #333B42;

  --teal-soft:         #6FB7C6;
  --petrol-soft:       #4A7C8E;
  --olive-soft:        #A8B97A;
  --mint:              #B7E4C7;
  --green-gray:        #DDE5DF;

  /* ---- Semantic ---- */
  --fg:                var(--ink);
  --fg-1:              var(--ink);
  --fg-2:              var(--ink-2);
  --fg-3:              var(--graphite);
  --fg-muted:          #8A98A6;
  --fg-on-color:       #FFFFFF;

  --accent:            var(--vital-blue);
  --accent-hover:      var(--blue-500);
  --accent-soft:       var(--blue-50);

  --success:           var(--vital-green);
  --success-soft:      var(--green-50);
  --warning:           #E6A23C;
  --warning-soft:      #FDF4E5;
  --danger:            #D9534F;
  --danger-soft:       #FBEAE9;
  --info:              var(--vital-blue);
  --info-soft:         var(--blue-50);

  /* ---- Typography ---- */
  --font-display:      'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:         'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:         'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

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

  --fs-xs:             12px;
  --fs-sm:             14px;
  --fs-md:             16px;
  --fs-lg:             18px;
  --fs-xl:             20px;
  --fs-2xl:            24px;
  --fs-3xl:            30px;
  --fs-4xl:            36px;
  --fs-5xl:            44px;
  --fs-6xl:            56px;
  --fs-display:        72px;

  --lh-tight:          1.1;
  --lh-snug:           1.25;
  --lh-normal:         1.5;
  --lh-relaxed:        1.65;

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

  /* ---- Spacing ---- */
  --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* ---- Radii ---- */
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px;
  --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-xs:         0 1px 2px rgba(31, 42, 51, 0.04);
  --shadow-sm:         0 2px 6px rgba(31, 42, 51, 0.06);
  --shadow-md:         0 6px 18px rgba(31, 42, 51, 0.08);
  --shadow-lg:         0 16px 40px rgba(31, 42, 51, 0.10);
  --shadow-xl:         0 24px 64px rgba(31, 42, 51, 0.14);
  --shadow-focus:      0 0 0 4px rgba(58, 155, 199, 0.22);
  --shadow-inner:      inset 0 1px 2px rgba(31, 42, 51, 0.06);

  /* ---- Motion ---- */
  --ease-out:          cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:       cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:     120ms;
  --duration-base:     200ms;
  --duration-slow:     320ms;
}

/* ============================================================
   Reset + base
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}

img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }

/* ---- Utilities ---- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); }
.icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon svg { width: 1em; height: 1em; stroke-width: 1.5; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--vital-blue);
  margin-bottom: var(--space-3);
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 40px);
  margin-bottom: var(--space-4);
  color: var(--ink);
  letter-spacing: var(--tracking-tight);
}
.section-title .accent { color: var(--vital-blue); }
.section-sub {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  color: var(--ink-2);
  max-width: 700px;
  margin-bottom: var(--space-12);
  line-height: var(--lh-relaxed);
}

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}