/* bfp2026 · tokens del sistema de diseño Best for Pets (oct-2026)
   Fuente: Best for Pets - mockups.zip → _ds/tokens. Solo variables y @font-face:
   no aplica estilos, así que es seguro cargarlo en todas las páginas. */
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;
  src:url("../fonts/figtree-latin-var.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;
  src:url("../fonts/figtree-latinext-var.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* --- colors --- */
:root{
  /* ---- Base palette: Best for Pets orange ---- */
  --orange-50:#fff3ec;--orange-100:#ffe1d1;--orange-200:#ffc0a3;--orange-300:#ff9a6d;
  --orange-400:#ff7736;--orange-500:#fd5505;--orange-600:#e64a00;--orange-700:#c23f00;--orange-800:#8f2e00;
  /* ---- Base palette: navy ink ---- */
  --navy-50:#f2f4f7;--navy-100:#dfe4ea;--navy-200:#b9c2ce;--navy-300:#8b97a8;
  --navy-400:#556377;--navy-500:#2c3a4d;--navy-600:#1f2c3d;--navy-700:#16202e;--navy-800:#0f1a2a;--navy-900:#09121e;
  /* ---- Base palette: cream / paper neutrals ---- */
  --cream-50:#fffefc;--cream-100:#faf9f6;--cream-200:#f5f2ec;--cream-300:#eae5db;--cream-400:#ddd6c8;
  --kraft-300:#e3d3bb;--kraft-500:#c9a882;--kraft-700:#8f7350;
  /* ---- Brand line accents ---- */
  --teal-100:#dbeceb;--teal-300:#7cb5b0;--teal-500:#207f78;--teal-600:#1a6963;--teal-700:#14524e;
  --blue-100:#dce8f7;--blue-300:#6fa3dc;--blue-500:#1260b4;--blue-600:#0e4f96;--blue-700:#0a3b71;
  /* ---- Semantic status ---- */
  --green-100:#dff2e8;--green-500:#1e8a5f;--green-700:#155f42;
  --amber-100:#fdf1d6;--amber-500:#e0a21a;--amber-700:#9a6c00;
  --red-100:#fce4e2;--red-500:#d0342c;--red-700:#96201a;

  /* ---- Semantic aliases: surfaces ---- */
  --surface-page:var(--cream-100);
  --surface-card:#ffffff;
  --surface-raised:var(--cream-50);
  --surface-sunken:var(--cream-200);
  --surface-inverse:var(--navy-800);
  --surface-brand:var(--orange-600);
  --surface-brand-soft:var(--orange-50);
  --surface-muted:var(--navy-50);

  /* ---- Semantic aliases: text ---- */
  --text-strong:var(--navy-800);
  --text-body:var(--navy-700);
  --text-muted:var(--navy-400);
  --text-subtle:#687487;
  --text-brand:var(--orange-700);
  --text-on-brand:#ffffff;
  --text-on-inverse:var(--cream-100);
  --text-inverse-muted:var(--navy-200);
  --text-link:var(--orange-700);
  --text-link-hover:var(--orange-800);

  /* ---- Semantic aliases: borders ---- */
  --border-subtle:var(--cream-300);
  --border-default:var(--navy-100);
  --border-strong:var(--navy-200);
  --border-brand:var(--orange-500);
  --border-inverse:rgba(255,255,255,.16);
  --focus-ring:0 0 0 3px rgba(253,85,5,.32);

  /* ---- Semantic aliases: interactive ---- */
  /* v2 del mockup (revisión 03-nov): botones en orange-600 (#E64A00), no en el 500 base */
  --action-primary:var(--orange-600);
  --action-primary-hover:var(--orange-700);
  --action-primary-active:var(--orange-800);
  --action-secondary:var(--navy-800);
  --action-secondary-hover:var(--navy-700);
  --action-ghost-hover:var(--cream-200);
  --action-disabled-bg:var(--cream-300);
  --action-disabled-text:var(--navy-300);

  /* ---- Semantic aliases: status ---- */
  --status-success:var(--green-500);--status-success-soft:var(--green-100);
  --status-warning:var(--amber-500);--status-warning-soft:var(--amber-100);
  --status-danger:var(--red-500);--status-danger-soft:var(--red-100);
  --status-info:var(--blue-500);--status-info-soft:var(--blue-100);
}
/* --- typography --- */
:root{
  --font-core:"Figtree","Helvetica Neue",Arial,sans-serif;
  --font-display:var(--font-core);
  --font-body:var(--font-core);

  --weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-black:800;

  /* type scale (px, 1.25 ratio at the top, tightened at body sizes) */
  --size-display-1:64px;--size-display-2:52px;--size-h1:40px;--size-h2:32px;--size-h3:24px;
  --size-h4:20px;--size-body-lg:18px;--size-body:16px;--size-body-sm:14px;--size-caption:13px;--size-micro:11px;

  --leading-tight:1.06;--leading-snug:1.18;--leading-normal:1.45;--leading-relaxed:1.6;
  --tracking-display:-0.02em;--tracking-heading:-0.01em;--tracking-body:0;--tracking-label:0.08em;

  /* composed roles */
  --text-display-1:var(--weight-black) var(--size-display-1)/var(--leading-tight) var(--font-display);
  --text-display-2:var(--weight-black) var(--size-display-2)/var(--leading-tight) var(--font-display);
  --text-h1:var(--weight-bold) var(--size-h1)/var(--leading-snug) var(--font-display);
  --text-h2:var(--weight-bold) var(--size-h2)/var(--leading-snug) var(--font-display);
  --text-h3:var(--weight-bold) var(--size-h3)/var(--leading-snug) var(--font-display);
  --text-h4:var(--weight-semibold) var(--size-h4)/var(--leading-snug) var(--font-display);
  --text-lead:var(--weight-regular) var(--size-body-lg)/var(--leading-relaxed) var(--font-body);
  --text-base:var(--weight-regular) var(--size-body)/var(--leading-normal) var(--font-body);
  --text-small:var(--weight-regular) var(--size-body-sm)/var(--leading-normal) var(--font-body);
  --text-label:var(--weight-bold) var(--size-micro)/1.2 var(--font-body);
}
/* --- spacing --- */
:root{
  --space-0:0;--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;--space-16:64px;--space-20:80px;--space-24:96px;
  /* layout */
  --container-max:1200px;
  --container-pad:32px;
  --container-pad-sm:20px;
  --section-gap:80px;
  --grid-gutter:24px;
  --control-height-sm:36px;--control-height:44px;--control-height-lg:52px;
  --tap-min:44px;
}
/* --- radius --- */
:root{
  --radius-xs:4px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--radius-2xl:28px;--radius-pill:999px;
  --radius-control:var(--radius-md);
  --radius-card:var(--radius-lg);
  --radius-panel:var(--radius-xl);
  --radius-image:var(--radius-lg);
}
/* --- elevation --- */
:root{
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(15,26,42,.06);
  --shadow-sm:0 2px 6px rgba(15,26,42,.07);
  --shadow-md:0 6px 18px rgba(15,26,42,.09);
  --shadow-lg:0 16px 40px rgba(15,26,42,.12);
  --shadow-brand:0 8px 20px rgba(253,85,5,.24);
  --shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.6);
  --blur-panel:saturate(140%) blur(14px); 
  --scrim-photo:linear-gradient(180deg,rgba(9,18,30,0) 35%,rgba(9,18,30,.72) 100%); 
  --scrim-photo-left:linear-gradient(90deg,rgba(9,18,30,.7) 0%,rgba(9,18,30,0) 60%); 
}
/* --- motion --- */
:root{
  --duration-fast:120ms; 
  --duration-base:180ms; 
  --duration-slow:280ms; 
  --duration-page:420ms; 
  --ease-standard:cubic-bezier(.2,.6,.2,1); 
  --ease-out:cubic-bezier(0,0,.2,1); 
  --ease-in-out:cubic-bezier(.4,0,.2,1); 
  --transition-control:background-color var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard),transform var(--duration-fast) var(--ease-standard); 
  --press-scale:.98; 
  --hover-lift:translateY(-2px); 
}