@import './reset.css';
@import './components/header.css';
@import './components/buttons.css';
@import './components/hero.css';
@import './components/sections.css';
@import './components/features-grid.css';
@import './components/how-it-works.css';
@import './components/catalog-grid.css';
@import './components/offers.css';
@import './components/services-grid.css';
@import './components/faq.css';
@import './components/cta.css';
@import './components/footer.css';

:root {
  /* Primary green — matches Tailwind primary palette in patient portal */
  --color-primary-50: #f0fdf4;
  --color-primary-100: #dcfce7;
  --color-primary-200: #bbf7d0;
  --color-primary-300: #86efac;
  --color-primary-400: #4ade80;
  --color-primary-500: #22c55e;
  --color-primary-600: #16a34a;
  --color-primary-700: #15803d;
  --color-primary-800: #166534;
  --color-primary-900: #14532d;

  /* Service-card accent colors (mirror patient dashboard serviceCards.ts) */
  --color-indigo-50: #eef2ff;
  --color-indigo-600: #4f46e5;
  --color-blue-50: #eff6ff;
  --color-blue-600: #2563eb;
  --color-amber-50: #fffbeb;
  --color-amber-600: #d97706;
  --color-rose-50: #fff1f2;
  --color-rose-600: #e11d48;
  --color-cyan-50: #ecfeff;
  --color-cyan-600: #00a3a3;
  --color-yellow-500: #ffff00;

  /* Neutrals */
  --color-bg: #ffffff;
  --color-bg-alt: #f8fcec;
  --color-text: #0e1a14;
  --color-text-soft: #3b4a42;
  --color-muted: #647069;
  --color-border: #cdd4cf;
  --color-footer-bg: #0e1a14;
  --color-footer-text: #c8d3cd;
  --color-footer-muted: #7e8b85;

  --container-max: 1180px;
  --container-narrow: 760px;
  --container-pad: 1.25rem;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --shadow-card: 0 1px 2px rgba(14, 26, 20, 0.07), 0 4px 14px rgba(14, 26, 20, 0.07);
  --shadow-card-hover: 0 2px 4px rgba(14, 26, 20, 0.1), 0 12px 28px rgba(14, 26, 20, 0.14);

  --font-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  font-size: 16px;
  line-height: 1.55;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-700);
  margin-bottom: 0.75rem;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 600;
  color: var(--color-primary-700);
  margin-top: 0.5rem;
}

.link-arrow:hover {
  color: var(--color-primary-800);
}