/* Petchera — design tokens v0.1 (1034.1). Fuentes: Bricolage Grotesque (variable, wdth) y Atkinson Hyperlegible 400/700 — cargar con next/font o @fontsource. */

:root{
  /* Paleta base */
  --pt-selva:#0E5E4F;        /* verde selva: marca, acción primaria */
  --pt-selva-700:#0A473C;
  --pt-selva-100:#DCEDE8;
  --pt-hebilla:#FFB81C;      /* amarillo hebilla: acento, hecho/logro */
  --pt-hebilla-100:#FFF1CC;
  --pt-nylon:#18203A;        /* azul tinta: texto, superficies oscuras */
  --pt-nylon-600:#4A5270;    /* texto secundario (AA sobre hueso) */
  --pt-hueso:#F7F8F5;        /* fondo frío, no crema */
  --pt-blanco:#FFFFFF;
  --pt-reflectivo:#C9D3D0;   /* bordes, separadores */
  --pt-alerta:#D93A34;       /* modo perdido / error */
  --pt-alerta-100:#FCE3E1;

  /* Identidad aprobada 26/10/2026: azul/amarillo y p merle sin contorno. */
  --pt-tinta:#1B2C6B;
  --pt-tinta-700:#132153;

  /* Roles */
  --color-bg:var(--pt-hueso);
  --color-surface:var(--pt-blanco);
  --color-text:var(--pt-nylon);
  --color-text-muted:var(--pt-nylon-600);
  --color-primary:var(--pt-tinta);
  --color-primary-hover:var(--pt-tinta-700);
  --color-on-primary:var(--pt-blanco);
  --color-accent:var(--pt-hebilla);
  --color-done:var(--pt-hebilla);
  --color-border:var(--pt-reflectivo);
  --color-danger:var(--pt-alerta);
  --color-focus:#2F6BFF;

  /* Tipografía */
  --font-display:"Bricolage",system-ui,sans-serif;
  --font-body:"Atkinson",system-ui,sans-serif;
  --text-xs:12px;   --lh-xs:16px;
  --text-sm:14px;   --lh-sm:20px;
  --text-md:16px;   --lh-md:24px;   /* body mínimo */
  --text-lg:20px;   --lh-lg:28px;
  --text-xl:26px;   --lh-xl:30px;
  --text-2xl:34px;  --lh-2xl:38px;
  --text-3xl:48px;  --lh-3xl:50px;

  /* Espaciado (base 4) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;

  /* Radios: jerarquía, no un único valor */
  --radius-strap:6px;     /* cintas y chips: rectas como nylon */
  --radius-card:18px;     /* tarjetas */
  --radius-tag:22px;      /* el tag físico / avatar de perro */
  --radius-buckle:999px;  /* botones = hebilla */

  /* Elevación */
  --shadow-1:0 1px 0 rgba(24,32,58,.08),0 2px 6px rgba(24,32,58,.06);
  --shadow-2:0 8px 24px rgba(24,32,58,.14);

  /* Cinta (motivo de marca) */
  --strap-height:14px;
  --stitch:repeating-linear-gradient(90deg,rgba(255,255,255,.75) 0 7px,transparent 7px 12px);

  /* Movimiento */
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-snap:cubic-bezier(.3,1.4,.5,1); /* "clic" de hebilla al marcar */

  /* Toque */
  --tap-min:44px; --tap-primary:56px;
}