/* Mercadito · design tokens v1
   Naming: --{category}-{role}-{scale}. Primitive tokens first, semantic aliases after.
   Contrast (WCAG 2.x) noted where a pairing is intended for text. */

@font-face{font-family:"Bricolage Grotesque";src:url("assets/fonts/BricolageGrotesque-Variable.ttf") format("truetype");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Figtree";src:url("assets/fonts/Figtree-Variable.ttf") format("truetype");font-weight:300 900;font-display:swap}

:root{
  /* ---- color · primitives ---- */
  --color-brand-50:#FFF1EC;
  --color-brand-100:#FFDDD1;
  --color-brand-200:#FFC2AE;
  --color-brand-300:#FF9F85;
  --color-brand-500:#EE5A3C;   /* logo, illustration · NOT for text (3.41:1 on white) */
  --color-brand-600:#C53A22;   /* the single action color · white text 5.25:1 AA */
  --color-brand-700:#A8301A;   /* action hover / pressed · links 6.43:1 on sand-50 */
  --color-brand-900:#5E1A0E;

  --color-accent-200:#FFE9B8;
  --color-accent-300:#FFD98A;  /* promo surfaces · ink text 12.05:1 */
  --color-accent-400:#F6B83C;

  --color-success-50:#E6F4EA;
  --color-success-600:#2A7046; /* «Abierto ahora», «En adopción» · 5.99:1 on white, 5.28:1 on success-50 */
  --color-danger-600:#B42318;
  --color-warning-50:#FFF3D6;
  --color-warning-700:#8A5300;

  --color-sand-0:#FFFFFF;
  --color-sand-50:#FFF8F1;     /* page background */
  --color-sand-100:#FBEFE4;    /* skeleton, image placeholder */
  --color-sand-200:#F0E2D6;    /* borders */
  --color-sand-300:#E3D0BF;    /* strong borders, slider track */
  --color-ink-600:#6B5A50;     /* secondary text · 6.23:1 on sand-50, 6.56:1 on white */
  --color-ink-900:#2B1D16;     /* primary text · 15.46:1 on sand-50 */

  /* category tints (icon on tint ≥ 4.5:1) */
  --color-cat-vehicles-bg:#FFE3DA;   --color-cat-vehicles-fg:#B8341D;
  --color-cat-properties-bg:#DFF0E4; --color-cat-properties-fg:#2A7046;
  --color-cat-products-bg:#FFEFC7;   --color-cat-products-fg:#8A5F00;
  --color-cat-services-bg:#E3ECFA;   --color-cat-services-fg:#2F5DA8;
  --color-cat-food-bg:#FFE5CC;       --color-cat-food-fg:#A64D0B;
  --color-cat-farm-bg:#ECF1D2;       --color-cat-farm-fg:#56690F;
  --color-cat-shops-bg:#F6E1EE;      --color-cat-shops-fg:#913571;
  --color-cat-jobs-bg:#DDEFF1;       --color-cat-jobs-fg:#1F6770;
  --color-cat-pets-bg:#FCE4E6;       --color-cat-pets-fg:#A8323F;

  /* ---- color · semantic ---- */
  --color-bg:var(--color-sand-50);
  --color-surface:var(--color-sand-0);
  --color-surface-muted:var(--color-sand-100);
  --color-text:var(--color-ink-900);
  --color-text-muted:var(--color-ink-600);
  --color-text-inverse:#FFFFFF;
  --color-border:var(--color-sand-200);
  --color-border-strong:var(--color-sand-300);
  --color-action:var(--color-brand-600);
  --color-action-hover:var(--color-brand-700);
  --color-on-action:#FFFFFF;
  --color-action-soft:var(--color-brand-50);
  --color-link:var(--color-brand-700);
  --color-focus:var(--color-brand-600);
  --color-brand:var(--color-brand-500);
  --color-promo:var(--color-accent-300);
  --color-positive:var(--color-success-600);
  --color-positive-soft:var(--color-success-50);
  --color-warning:var(--color-warning-700);
  --color-warning-soft:var(--color-warning-50);
  --color-danger:var(--color-danger-600);
  --color-danger-soft:#FDE7E4;   /* danger text on it: 5.55:1 */
  --color-danger-hover:#8F1F14;
  --color-highlight:#FFE2A8;     /* keyword match <mark>; ink on it 13.8:1 */
  --color-overlay:rgba(43,29,22,.45);
  --color-marketing-red:var(--color-brand-600);  /* marketing backgrounds (red posts) · = action color · white 5.25:1 */

  /* ---- typography ---- */
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-sans:"Figtree",system-ui,sans-serif;
  --font-weight-regular:450;
  --font-weight-medium:500;
  --font-weight-semibold:600;
  --font-weight-bold:700;
  --font-weight-heavy:800;
  /* size / line-height pairs */
  --text-2xs:11px;  --leading-2xs:14px;
  --text-xs:12.5px; --leading-xs:16px;
  --text-sm:14px;   --leading-sm:19px;
  --text-md:16px;   --leading-md:24px;
  --text-lg:18px;   --leading-lg:24px;
  --text-xl:22px;   --leading-xl:26px;
  --text-2xl:28px;  --leading-2xl:32px;
  --text-3xl:36px;  --leading-3xl:40px;
  --text-4xl:56px;  --leading-4xl:58px;
  --tracking-display:-0.04em;
  --tracking-heading:-0.025em;
  --tracking-normal:0;
  --tracking-caps:0.06em;

  /* ---- space (4px base) ---- */
  --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;

  /* ---- radius ---- */
  --radius-xs:6px; --radius-sm:10px; --radius-md:14px; --radius-lg:20px; --radius-xl:28px; --radius-pill:999px;

  /* ---- shadow ---- */
  --shadow-xs:0 1px 2px rgba(43,29,22,.06);
  --shadow-sm:0 1px 2px rgba(43,29,22,.06),0 2px 8px rgba(43,29,22,.06);
  --shadow-md:0 8px 24px -8px rgba(43,29,22,.18);
  --shadow-lg:0 24px 48px -16px rgba(43,29,22,.28);
  --shadow-focus:0 0 0 3px #fff,0 0 0 5px var(--color-focus);

  /* ---- z-index ---- */
  --z-base:0; --z-raised:1; --z-sticky:10; --z-header:20; --z-nav:30; --z-overlay:40; --z-sheet:50; --z-toast:60;

  /* ---- motion ---- */
  --duration-instant:80ms; --duration-fast:140ms; --duration-base:220ms; --duration-slow:360ms;
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-emphasized:cubic-bezier(.3,0,0,1.2);
  --ease-exit:cubic-bezier(.4,0,1,1);

  /* ---- layout (breakpoints are documented: 600 / 900 / 1200; CSS vars can't drive media queries) ---- */
  --container-max:1280px;
  --gutter-mobile:16px; --gutter-tablet:24px; --gutter-desktop:40px;
  --header-height-mobile:64px; --header-height-desktop:76px;
  --tap-target-min:44px;
  --icon-stroke:2;
}

@media (prefers-reduced-motion: reduce){
  :root{--duration-instant:0ms;--duration-fast:0ms;--duration-base:0ms;--duration-slow:0ms}
}