/* ============================================================
   PetPulse · Design Tokens  (Manual de Marca v1.0)
   ============================================================ */
:root{
  /* ---- Marca ---- */
  --pp-turquoise:#16BDB8;        /* Primario */
  --pp-turquoise-deep:#0E8C89;   /* Texto / links */
  --pp-turquoise-700:#0B6E6B;
  --pp-peach:#FF9E7D;            /* Secundario */
  --pp-ink:#15303A;             /* Títulos */

  /* ---- Acentos & estados ---- */
  --pp-amber:#FFC24B;           /* Premium / Gold */
  --pp-green:#2FA46A;           /* Éxito */
  --pp-coral:#F76C5E;           /* Alerta */
  --pp-violet:#9B6BD8;          /* Adicional */

  /* ---- Superficies ---- */
  --pp-cream:#FFFFFF;           /* Fondo base */
  --pp-paper:#FFFFFF;
  --pp-backdrop:#F1F4F6;        /* Lienzo (detrás del device) */
  --pp-mint:#E6F7F5;            /* Tint menta */
  --pp-mint-2:#E9F6EF;
  --pp-peach-tint:#FFEEE6;      /* Tint durazno */
  --pp-amber-tint:#FFF6E0;
  --pp-violet-tint:#F4F1FA;

  /* ---- Texto ---- */
  --pp-slate:#56666E;           /* Cuerpo */
  --pp-muted:#8B98A0;           /* Apoyo */
  --pp-line:#E7EBEE;            /* Bordes suaves */
  --pp-line-cool:#DCE7E8;

  /* ---- Tipografía ---- */
  --pp-font:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --pp-mono:'Space Mono','SFMono-Regular',ui-monospace,Menlo,monospace;

  /* ---- Radios ---- */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px;

  /* ---- Sombras ---- */
  --sh-sm:0 1px 2px rgba(21,48,58,.06), 0 1px 3px rgba(21,48,58,.05);
  --sh-md:0 6px 18px rgba(21,48,58,.08), 0 2px 6px rgba(21,48,58,.05);
  --sh-lg:0 18px 48px rgba(21,48,58,.14), 0 6px 16px rgba(21,48,58,.07);
  --sh-teal:0 12px 28px rgba(22,189,184,.28);
  --sh-device:0 40px 90px rgba(21,48,58,.28), 0 12px 32px rgba(21,48,58,.18);

  /* ---- Espaciado base ---- */
  --gut:16px;
  --maxw:1180px;
}

/* Gradientes de marca reutilizables */
:root{
  --grad-teal:linear-gradient(135deg,#1ED0CB 0%,#0E8C89 100%);
  --grad-ink:linear-gradient(150deg,#1C3E49 0%,#15303A 60%,#102730 100%);
  --grad-peach:linear-gradient(135deg,#FFB79B 0%,#FF9E7D 100%);
  --grad-hero:radial-gradient(120% 120% at 80% 0%,#1C3E49 0%,#15303A 55%,#0F2630 100%);
}