/* ──────────────────────────────────────────────────────────────
   RosieVaccine — DESIGN TOKENS + SHARED MARKETING COMPONENTS
   Source of truth: the Claude Design project's design system
   (_ds/rosievaccine-design-system tokens, 2026-08-14) reconciled
   against 05-marketing/brand-identity/README.md.
   New (redesigned) marketing pages link THIS after tailwind.css:
     <link rel="stylesheet" href="/assets/tailwind.css" />
     <link rel="stylesheet" href="/assets/fonts.css" />
     <link rel="stylesheet" href="/assets/ds-tokens.css" />
   Legacy pages do not link it; shipping this file changes nothing
   until a page opts in.
   ────────────────────────────────────────────────────────────── */
:root {
  /* ── Brand teal ramp ── */
  --teal-900: #134e4a; --teal-800: #115e59; --teal-700: #0f766e;
  --teal-600: #0d9488; --teal-500: #14b8a6; --teal-400: #5eead4;
  --teal-300: #99f6e4; --teal-200: #ccfbf1; --teal-100: #d1fae5;
  --teal-50:  #f0fdfa;

  /* ── Warm / amber ramp — the "open / human review" channel ── */
  --amber-700: #92400e; --amber-600: #b45309; --amber-500: #d97706;
  --amber-400: #f59e0b; --amber-300: #f6c25a; --amber-200: #f9d9a3;
  --amber-100: #fcecd6; --cream: #fdf5ea;

  /* ── Sky (gradient mesh only) ── */
  --sky-300: #7dd3fc; --sky-200: #bae6fd; --sky-100: #e0f2fe;

  /* ── Ink + slate ── */
  --ink: #0f2027;
  --slate-700: #334155; --slate-600: #475569; --slate-500: #64748b;
  --slate-400: #94a3b8; --slate-300: #cbd5e1; --slate-200: #e2e8f0;
  --slate-100: #f1f5f9; --slate-50: #f8fafc; --white: #ffffff;

  /* ── Semantic status ── */
  --rose-600: #e11d48; --rose-100: #ffe4e6; --green-100: #bbf7d0;

  /* ── Semantic aliases ── */
  --color-primary: var(--teal-600);
  --color-primary-hover: var(--teal-700);
  --color-accent: var(--amber-500);
  --text-strong: var(--ink);
  --text-body: var(--slate-600);
  --text-muted: var(--slate-400);
  --text-on-teal: var(--white);
  --text-link: var(--teal-600);
  --surface-page: var(--white);
  --surface-app: var(--slate-50);
  --surface-card: var(--white);
  --surface-mist: var(--teal-50);
  --surface-warm: var(--cream);
  --gradient-hero: linear-gradient(135deg, #ecfdf5 0%, #e0f2fe 40%, #f0fdf4 70%, #ffffff 100%);
  --border-hairline: var(--slate-200);
  --border-card-neutral: var(--slate-200);
  --border-card-warm: var(--teal-100);
  --border-card: var(--border-card-neutral);
  --border-strong: var(--slate-300);

  /* ── State channels: locked (science decided) vs open (human) ── */
  --locked-fg: var(--teal-700); --locked-bg: var(--teal-200); --locked-border: var(--teal-300);
  --open-fg: var(--amber-700);  --open-bg: var(--cream);      --open-border: var(--amber-200);
  --status-success-fg: var(--teal-700); --status-success-bg: var(--teal-200);
  --status-warn-fg: var(--amber-700);   --status-warn-bg: var(--amber-100);
  --status-error-fg: var(--rose-600);   --status-error-bg: var(--rose-100);

  /* ── Type ── */
  --font-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --text-xs: 0.72rem; --text-sm: 0.85rem; --text-base: 1rem;
  --text-lg: 1.15rem; --text-xl: 1.35rem; --text-2xl: 1.7rem;
  --text-3xl: 2.2rem; --text-4xl: 3rem; --text-5xl: 4.5rem;
  --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.55; --leading-relaxed: 1.7;
  --tracking-display: -0.03em; --tracking-tight: -0.02em;
  --tracking-wide: 0.06em; --tracking-eyebrow: 0.18em;

  /* ── Radii ── */
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px;
  --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 24px; --radius-pill: 9999px;

  /* ── Shadows — diffuse, teal-tinted ── */
  --shadow-xs: 0 1px 2px rgba(15, 32, 39, 0.04);
  --shadow-sm: 0 2px 16px rgba(13, 148, 136, 0.05);
  --shadow-card: 0 2px 20px rgba(13, 148, 136, 0.07);
  --shadow-md: 0 8px 32px rgba(13, 148, 136, 0.13);
  --shadow-lg: 0 12px 40px rgba(13, 148, 136, 0.14);
  --shadow-xl: 0 18px 40px rgba(13, 148, 136, 0.08);
  --shadow-cta: 0 4px 20px rgba(13, 148, 136, 0.25);
  --shadow-cta-hover: 0 8px 28px rgba(13, 148, 136, 0.35);
  --ring-focus: 0 0 0 3px rgba(13, 148, 136, 0.12);

  /* ── Motion ── */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.15s; --duration-base: 0.2s; --duration-slow: 0.7s;
}

/* ── Base element defaults (pages that link this file opt in) ── */
body.rv-ds {
  margin: 0;
  font: 400 var(--text-base)/var(--leading-normal) var(--font-sans);
  color: var(--text-strong);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.rv-ds h1, .rv-ds h2, .rv-ds h3, .rv-ds h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--text-strong);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.rv-ds p { margin: 0; text-wrap: pretty; }
.rv-ds a:not([class*="rv-btn"]) { color: var(--text-link); } .rv-ds a { text-decoration: none; }
/* Emphasis in headings: italic teal — the brand signature */
.rv-ds h1 em, .rv-ds h2 em, .rv-ds h3 em { font-style: italic; color: var(--color-primary); }
.rv-ds ::selection { background: var(--teal-200); color: var(--teal-800); }

/* ── Buttons — one primary CTA color, site-wide ── */
.rv-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border-radius: var(--radius-pill); border: none; cursor: pointer;
  font: 600 15px var(--font-sans); text-decoration: none;
  padding: 12px 24px;
  transition: background var(--duration-base), transform var(--duration-fast), box-shadow var(--duration-base);
}
.rv-btn-primary, a.rv-btn-primary { background: var(--teal-600); color: #fff; box-shadow: var(--shadow-cta); }
.rv-btn-primary:hover { background: var(--teal-700); transform: translateY(-2px); box-shadow: var(--shadow-cta-hover); }
.rv-btn-primary:active { transform: translateY(0); }
.rv-btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(13,148,136,0.25), var(--shadow-cta); }
.rv-btn-primary:disabled { background: var(--slate-200); color: var(--slate-400); box-shadow: none; transform: none; cursor: not-allowed; }
.rv-btn-secondary, a.rv-btn-secondary { background: #fff; color: var(--teal-700); border: 1.5px solid var(--teal-300); }
.rv-btn-secondary:hover { border-color: var(--teal-600); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.rv-btn-ghost, a.rv-btn-ghost { background: transparent; color: var(--teal-700); padding: 12px 8px; }
.rv-btn-ghost:hover { color: var(--teal-600); }
.rv-btn-lg { padding: 14px 28px; font-size: 16px; }
.rv-btn-sm { padding: 8px 16px; font-size: 13.5px; }

/* ── Eyebrow ── */
.rv-eyebrow {
  font: 600 var(--text-xs) var(--font-sans);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--teal-600);
}

/* ── The single status line (once near hero CTA, once in footer) ── */
.rv-status-line {
  font: 400 13px/1.5 var(--font-sans);
  color: var(--slate-500);
  border-top: 1px solid rgba(15, 32, 39, 0.08);
  padding-top: 12px;
  max-width: 480px;
}

/* ── Cards ── */
.rv-card {
  background: var(--surface-card);
  border: 1px solid var(--border-card-warm);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}
.rv-card-locked { border-left: 4px solid var(--teal-600); }
.rv-card-open { border-left: 4px dashed var(--amber-400); }

/* ── Pills & badges ── */
.rv-pill {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--radius-pill); padding: 4px 12px;
  font: 500 12px var(--font-sans);
}
.rv-pill-success { background: var(--status-success-bg); color: var(--status-success-fg); }
.rv-pill-locked  { background: var(--teal-200); color: var(--teal-700); }
.rv-pill-warn    { background: var(--status-warn-bg); color: var(--status-warn-fg); }
.rv-pill-error   { background: var(--status-error-bg); color: var(--status-error-fg); }
.rv-badge {
  display: inline-flex; align-items: center;
  border-radius: var(--radius-xs); padding: 2px 8px;
  font: 500 11px var(--font-sans);
  background: var(--teal-200); color: var(--teal-800);
}
.rv-badge-neutral { background: var(--slate-100); color: var(--slate-600); }
.rv-badge-mono { font-family: var(--font-mono); letter-spacing: 0.03em; }

/* ── Evidence card anatomy (species badge · design+n · finding ·
      does-not-support · source + review date) ── */
.rv-evidence-meta { font: 500 11px var(--font-mono); color: var(--slate-500); }
.rv-evidence-limit { font: 400 12px/1.5 var(--font-sans); color: var(--amber-700); }
.rv-evidence-src { font: 400 10.5px var(--font-mono); color: var(--slate-400); }

/* ── Three-step workflow circles: white = lab hands · teal = Rosie
      automated · cream/amber = human review · dashed teal rail ── */
.rv-step-circle {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font: 500 12px var(--font-mono);
}
.rv-step-lab { background: #fff; color: var(--teal-700); border: 2px solid var(--teal-300); }
.rv-step-auto { background: var(--teal-600); color: #fff; border: 2px solid var(--teal-300); }
.rv-step-human { background: var(--cream); color: var(--amber-700); border: 2px solid var(--amber-300); }

/* ── Progress strip (apply flow): done ✓ teal fill · active teal
      ring · upcoming slate ── */
.rv-prog-dot {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font: 500 11px var(--font-mono);
}
.rv-prog-done { background: var(--teal-600); color: #fff; }
.rv-prog-active { background: #fff; color: var(--teal-700); border: 1.5px solid var(--teal-600); }
.rv-prog-next { background: #fff; color: var(--slate-400); border: 1.5px solid var(--slate-300); }
.rv-prog-rail { width: 22px; border-top: 1.5px dashed var(--slate-300); }

/* ── Forms ── */
.rv-label { display: block; font: 600 13px var(--font-sans); color: var(--ink); margin-bottom: 6px; }
.rv-input {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--slate-300); border-radius: var(--radius-md);
  font: 400 14px var(--font-sans); color: var(--ink); background: #fff;
  transition: border-color var(--duration-base), box-shadow var(--duration-base);
}
.rv-input:focus { outline: none; border-color: var(--teal-600); box-shadow: var(--ring-focus); }
.rv-input[aria-invalid="true"] { border-color: var(--rose-600); }
.rv-input:disabled { border-color: var(--slate-200); color: var(--slate-400); background: var(--slate-50); cursor: not-allowed; }
.rv-hint { font: 400 12px var(--font-sans); color: var(--slate-500); margin-top: 4px; }
.rv-error-text { font: 400 12px var(--font-sans); color: var(--rose-600); margin-top: 4px; }

/* ── Hero mesh + drifting blobs (homepage hero only) ── */
.rv-hero-mesh { background: var(--gradient-hero); position: relative; }
.rv-blob { position: absolute; border-radius: 50%; filter: blur(72px); opacity: 0.32; pointer-events: none; }
@keyframes rv-drift { from { transform: translate(0, 0); } to { transform: translate(24px, -18px); } }
.rv-blob { animation: rv-drift 12s ease-in-out infinite alternate; }

/* ── Scroll entrance: fade-up 28px / 0.7s.
      Hidden ONLY under html.rv-js (set by the page script) so content
      can never be lost to a broken or absent script. ── */
.rv-js .rv-reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--duration-slow) ease, transform var(--duration-slow) ease; }
.rv-js .rv-reveal.visible { opacity: 1; transform: translateY(0); }

/* ── Responsibility rows: only RosieVaccine's row gets the mist ── */
.rv-resp-row { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 11px 18px; border-bottom: 1px solid var(--slate-100); }
.rv-resp-row-rosie { background: var(--teal-50); }

/* ── Reduced motion: all off ── */
@media (prefers-reduced-motion: reduce) {
  .rv-blob { animation: none; }
  .rv-js .rv-reveal { opacity: 1; transform: none; transition: none; }
  .rv-btn, .rv-btn-primary:hover, .rv-btn-secondary:hover { transition: none; transform: none; }
}