/* ==========================================================================
   PROGRESSIVE CARE — DESIGN TOKENS
   Brand colors extracted from official logo (orange #ec6708 / blue #00489a).
   Signature device: vertical accent bar beside imagery (recurring motif
   in the brand's own marketing material), alternating orange/blue by section.
   ========================================================================== */

:root {
  /* ---- Brand anchors (from logo) ---- */
  --orange:        #ec6708;
  --orange-deep:   #c2530a;
  --orange-pale:   #fdf0e3;
  --blue:          #00489a;
  --blue-deep:     #00387a;
  --blue-pale:     #e7eef8;
  --blue-accent:   #3a4c7c; /* secondary blue from logo figures */

  /* ---- Neutrals ---- */
  --ink:           #0f1b2d;   /* primary text — navy-black, not flat #000 */
  --ink-soft:      #4a5566;   /* secondary text */
  --paper:         #fbf9f6;   /* warm off-white background */
  --paper-raised:  #ffffff;   /* card surfaces */
  --mist:          #eef1f5;   /* alternating section background */
  --line:          #dde3ea;   /* hairline borders */
  --line-strong:   #c3ccd6;

  /* ---- Semantic ---- */
  --success:       #1e7d4f;
  --focus-ring:    #1f7fd6;

  /* ---- Typography ---- */
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.625rem;
  --fs-2xl:  2.25rem;
  --fs-3xl:  3rem;
  --fs-4xl:  3.75rem;

  /* ---- Spacing scale ---- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4.5rem;
  --sp-9:  6rem;

  /* ---- Layout ---- */
  --container-max: 1180px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --nav-h: 76px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 480ms;

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 2px rgba(15, 27, 45, 0.06), 0 1px 1px rgba(15, 27, 45, 0.04);
  --shadow-md: 0 8px 24px rgba(15, 27, 45, 0.08);
  --shadow-lg: 0 20px 48px rgba(15, 27, 45, 0.12);
}

/* ==========================================================================
   RESET
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul, ol { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.15;
  font-weight: 600;
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

@media (max-width: 640px) {
  .container { padding: 0 var(--sp-4); }
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--blue-deep);
  color: #fff;
  padding: var(--sp-3) var(--sp-4);
  z-index: 9999;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }