/* tokens.css — Sistema de diseño de Ruta Salud
   Disciplina tipo Vercel (Geist, escala de espaciado base 4px, neutros precisos,
   restricción cromática) aplicada a la identidad de Ruta Salud (teal + ámbar de aguja). */
:root{
  /* Neutros (escala precisa) */
  --bg:#FFFFFF;
  --bg-subtle:#FAFAFA;
  --bg-hover:#F4F4F5;
  --fg:#0A0A0A;
  --fg-secondary:#3F3F46;
  --fg-muted:#6B6B72;
  --fg-faint:#8F8F96;
  --border:#EAEAEA;
  --border-strong:#D9D9DD;

  /* Marca (con restricción) */
  --teal:#15756A;
  --teal-strong:#0F5D54;
  --teal-deep:#0C3A35;       /* sección oscura / botón primario */
  --teal-subtle:#EDF5F3;
  --signal:#DE8C28;          /* ámbar de aguja / siguiente paso */
  --signal-subtle:#FBF0DC;
  --signal-fg:#7A4E12;
  --danger:#C0362C;

  /* Sobre fondo oscuro */
  --on-dark:#EDEDED;
  --on-dark-muted:#9BA8A4;
  --on-dark-border:rgba(255,255,255,.12);

  /* Tipografía */
  --font-sans:"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Espaciado (base 4px) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;

  /* Radios */
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:24px; --r-full:999px;

  /* Sombras (sutiles; el peso visual lo llevan los bordes) */
  --shadow-sm:0 1px 2px rgba(10,10,10,.04);
  --shadow-md:0 1px 2px rgba(10,10,10,.04), 0 8px 24px rgba(10,10,10,.06);
  --shadow-lg:0 2px 4px rgba(10,10,10,.04), 0 18px 48px rgba(10,10,10,.10);

  /* Medidas */
  --maxw:1100px;
  --pad:clamp(20px, 5vw, 40px);

  /* Motion */
  --ease:cubic-bezier(.2,.6,.2,1);
  --dur:.16s;
}