/* ============================================================
   EL ZAPATÓN — Design tokens
   Única fuente de verdad para color, tipografía, espaciado,
   radios, sombras y motion. Ningún valor de estos debe
   hardcodearse fuera de este archivo.
   ============================================================ */

:root {
  /* ---- Paleta de marca ---- */
  --naranja: #E8541B;          /* ancla de marca, CTAs, precio final */
  --naranja-quemado: #B23A0E;  /* hover / profundidad */
  --naranja-tenue: #FBEADF;    /* fondos suaves con tinte de marca */
  --tinta: #1A1614;            /* texto principal, casi negro cálido */
  --tinta-60: #5C534E;         /* texto secundario */
  --tinta-40: #8C837D;         /* texto terciario / deshabilitado */
  --hueso: #FAF6F0;            /* fondo base cálido */
  --arena: #EFE6DA;            /* superficies / cards secundarias */
  --arena-borde: #E2D6C6;      /* bordes sutiles */
  --blanco: #FFFFFF;
  --verde-ok: #2F7D4F;         /* señal de disponibilidad (nunca números) */
  --gris-agotado: #B8B2AC;     /* filtro escala de grises */

  /* ---- Roles semánticos ---- */
  --bg: var(--hueso);
  --surface: var(--blanco);
  --surface-alt: var(--arena);
  --text: var(--tinta);
  --text-muted: var(--tinta-60);
  --text-subtle: var(--tinta-40);
  --border: var(--arena-borde);
  --accent: var(--naranja);
  --accent-strong: var(--naranja-quemado);
  --focus-ring: var(--naranja-quemado);

  /* ---- Tipografía ---- */
  --font-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-util: "Inter", system-ui, sans-serif;

  --fw-body: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-display: 800;   /* Archivo a peso máximo hace de "Archivo Black" */

  /* Escala de tipo (mobile-first, en rem) */
  --fs-2xs: 0.6875rem;  /* 11px eyebrows/badges */
  --fs-xs: 0.75rem;     /* 12px */
  --fs-sm: 0.875rem;    /* 14px */
  --fs-base: 1rem;      /* 16px cuerpo */
  --fs-md: 1.125rem;    /* 18px */
  --fs-lg: 1.375rem;    /* 22px */
  --fs-xl: 1.75rem;     /* 28px */
  --fs-2xl: 2.25rem;    /* 36px */
  --fs-3xl: 3rem;       /* 48px títulos display */

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --tracking-util: 0.08em;   /* eyebrows en mayúsculas */
  --tracking-tight: -0.02em; /* display grande */

  /* ---- Espaciado (escala 4pt) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* ---- Radios ---- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---- Sombras ---- */
  --sh-sm: 0 1px 2px rgba(26, 22, 20, 0.06);
  --sh-md: 0 4px 14px rgba(26, 22, 20, 0.10);
  --sh-lg: 0 12px 32px rgba(26, 22, 20, 0.16);
  --sh-tag: 2px 3px 0 rgba(26, 22, 20, 0.18); /* etiqueta colgante signature */

  /* ---- Layout ---- */
  --maxw: 1280px;
  --gutter: var(--sp-4);
  --header-h: 60px;
  --card-aspect: 4 / 5;       /* imagen de producto, fijo, cero layout shift */

  /* ---- Signature: etiqueta de zapatería ---- */
  --tag-bg: var(--naranja);
  --tag-text: var(--blanco);
  --tag-rotate: -6deg;
  --tag-hole: var(--hueso);

  /* ---- Motion ---- */
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 360ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---- Z-index ---- */
  --z-header: 100;
  --z-overlay: 200;
  --z-drawer: 300;
  --z-sheet: 350;
  --z-fab: 250;
  --z-modal: 400;

  /* Área táctil mínima */
  --touch: 44px;

  /* ---- Scrim / overlays (fondos de modales y sheets) ---- */
  --scrim: rgba(26, 22, 20, 0.5);
  --scrim-strong: rgba(26, 22, 20, 0.55);
  --footer-bottom-bg: rgba(0, 0, 0, 0.2);

  /* ---- Tintes sobre superficie oscura (footer, drawer) ---- */
  --on-dark-1: rgba(255, 255, 255, 0.04);
  --on-dark-2: rgba(255, 255, 255, 0.08);
  --on-dark-3: rgba(255, 255, 255, 0.12);
  --border-on-dark: rgba(239, 230, 218, 0.12);
  --border-on-dark-strong: rgba(239, 230, 218, 0.25);
  --border-on-dark-hover: rgba(239, 230, 218, 0.5);
  --hairline-on-dark: rgba(239, 230, 218, 0.1);
  --text-on-dark-60: rgba(239, 230, 218, 0.6);
  --text-on-dark-55: rgba(239, 230, 218, 0.55);
  --text-on-dark-45: rgba(239, 230, 218, 0.45);
  --text-on-dark-40: rgba(239, 230, 218, 0.4);

  /* ---- Marca externa WhatsApp (color de plataforma, centralizado) ---- */
  --wa: #25D366;
  --wa-hover: #1ebe59;
  --wa-soft: #7de8a8;          /* verde claro para texto sobre oscuro */
  --wa-soft-2: #b2f5ce;
  --wa-border: rgba(37, 211, 102, 0.4);
  --wa-border-hover: rgba(37, 211, 102, 0.7);
  --wa-bg-soft: rgba(37, 211, 102, 0.1);
  --wa-ring: rgba(37, 211, 102, 0.2);
}

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