/* ╔═══════════════════════════════════════════════════════╗
   ║  base.css — Doctor Ride design tokens                 ║
   ╚═══════════════════════════════════════════════════════╝

   Color philosophy — matched to Doctor Ride logo:
   • Logo colors: Navy #202f64 · Red #c02033 · White
   • Primary:  Navy (#1e3a7a) — authority, trust, US medical
   • Accent:   Red (#c02033)  — matches logo, urgency, care
   • Support:  Light blue-gray backgrounds — calm, readable
   • Dark:     Deep navy (#0d1b3e) — footer, dark sections
   • NEVER: Teal/green — clashes with navy/red logo identity
*/

/* ── Design Tokens ─────────────────────────────────────── */
:root {
  /* Brand — Navy & Red (Doctor Ride logo colors) */
  --navy-950:  #060e26;
  --navy-900:  #0d1b3e;
  --navy-800:  #162456;
  --navy-700:  #1e3a7a;   /* primary navy — matches logo */
  --navy-500:  #2e55b8;
  --navy-100:  #dce6f7;
  --navy-50:   #eef3fc;

  --red-700:   #c02033;   /* logo red — use for accents/CTAs */
  --red-500:   #e03347;
  --red-100:   #fde8ea;
  --red-50:    #fef4f5;

  /* Neutrals */
  --white:     #ffffff;
  --warm-50:   #f8fafd;
  --warm-100:  #eef2f8;
  --warm-200:  #dce4f0;
  --gray-400:  #8fa0b8;
  --gray-600:  #4a5f7a;
  --gray-800:  #1e2d45;
  --gray-900:  #0f1a2e;

  /* Status chips */
  --green-100: #dcfce7;
  --green-700: #15803d;
  --sky-100:   #dbeafe;
  --sky-700:   #1d4ed8;

  /* Gradients */
  --grad-navy: linear-gradient(135deg, var(--navy-800), var(--navy-500));
  --grad-red:  linear-gradient(135deg, var(--red-700), var(--red-500));
  --grad-hero: linear-gradient(160deg, #eef3fc 0%, #f8faff 50%, #f0f4fd 100%);

  /* Typography */
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  /* Shadows — navy-tinted */
  --shadow-sm: 0 1px 3px rgba(30,58,122,.08);
  --shadow-md: 0 4px 16px rgba(30,58,122,.12);
  --shadow-lg: 0 8px 32px rgba(30,58,122,.14);
  --shadow-xl: 0 16px 48px rgba(30,58,122,.18);

  /* Spacing */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem;
  --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem;

  /* Radii */
  --r-sm: 6px; --r-md: 12px; --r-lg: 18px;
  --r-xl: 24px; --r-2xl: 32px; --r-full: 9999px;

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(0,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast: 150ms;
  --dur-base: 280ms;
  --dur-slow: 500ms;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 16px; }
body {
  font-family: var(--font-body);
  font-size: 1rem; line-height: 1.75;
  color: var(--gray-800); background: var(--white);
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }

/* ── Typography ────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.25; letter-spacing: -.01em; color: var(--gray-900);
}
h1 { font-size: clamp(2rem, 4.5vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
h3 { font-size: 1.2rem; font-family: var(--font-body); font-weight: 600; }
p  { font-size: 1rem; color: var(--gray-600); }
em { font-style: italic; }

/* ── Layout ────────────────────────────────────────────── */
.container { max-width: 1180px; margin-inline: auto; padding-inline: var(--sp-8); }
.container-narrow { max-width: 720px; }
.section       { padding-block: var(--sp-24); background: var(--white); }
.section-alt   { padding-block: var(--sp-24); background: var(--warm-50); }
.section-navy  { padding-block: var(--sp-24); background: var(--grad-navy); color: var(--white); }
/* Keep section-teal as alias for navy so existing HTML class works */
.section-teal  { padding-block: var(--sp-24); background: var(--grad-navy); color: var(--white); }

.section-head { text-align: center; margin-bottom: var(--sp-16); }
.section-head h2 { margin-bottom: var(--sp-4); }
.section-head p  { max-width: 580px; margin-inline: auto; font-size: 1.1rem; }
.light-head h2, .light-head p { color: var(--white); }
.light-head p  { opacity: .9; }

/* ── Buttons ───────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--grad-navy);
  color: var(--white);
  font-weight: 600; font-size: 1rem;
  padding: var(--sp-4) var(--sp-8);
  border-radius: var(--r-full);
  box-shadow: 0 4px 20px rgba(30,58,122,.35);
  transition: transform var(--dur-base) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(30,58,122,.45); }

.btn-ghost {
  display: inline-flex; align-items: center;
  color: var(--navy-700);
  font-weight: 600; font-size: 1rem;
  padding: var(--sp-4) var(--sp-6);
  border: 2px solid var(--navy-700);
  border-radius: var(--r-full);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn-ghost:hover { background: var(--navy-700); color: var(--white); }

/* ── Accessibility ─────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--navy-500); outline-offset: 3px; border-radius: var(--r-sm); }
a.skip-link {
  position: absolute; top: -40px; left: var(--sp-4);
  background: var(--navy-700); color: var(--white);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm);
  font-weight: 600; z-index: 9999;
  transition: top var(--dur-fast) var(--ease);
}
a.skip-link:focus { top: var(--sp-4); }