/* Ofertazos Design Tokens */
:root {
  color-scheme: light;

  /* ── Orange ── */
  --orange-50: #fff7ed;
  --orange-100: #ffedd5;
  --orange-200: #fed7aa;
  --orange-300: #fdba74;
  --orange-400: #fb923c;
  --orange-500: #f97316;
  --orange-600: #ea580c;
  --orange-700: #c2410c;
  --orange-800: #9a3412;
  --orange-900: #7c2d12;

  /* ── Stone / Neutral ── */
  --gray-0: #ffffff;
  --gray-50: #fafaf9;
  --gray-100: #f5f5f4;
  --gray-200: #e7e5e4;
  --gray-300: #d6d3d1;
  --gray-400: #a8a29e;
  --gray-500: #78716c;
  --gray-600: #57534e;
  --gray-700: #44403c;
  --gray-800: #292524;
  --gray-900: #1c1917;

  /* ── Status: Green ── */
  --green-50: #f0fdf4;
  --green-100: #dcfce7;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;

  /* ── Status: Red ── */
  --red-100: #fee2e2;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;

  /* ── Status: Yellow ── */
  --yellow-300: #fde047;
  --yellow-400: #facc15;
  --yellow-500: #eab308;
  --yellow-600: #ca8a04;

  /* ── Blue (for Tecnología category) ── */
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;

  /* ── Semantic ── */
  --color-brand: var(--orange-500);
  --color-brand-hover: var(--orange-600);
  --color-accent: var(--yellow-400);
  --color-sale: var(--red-600);
  --bg-base: var(--gray-50);
  --bg-dark: var(--gray-900);
  --text-primary: var(--gray-900);
  --text-muted: var(--gray-500);
  --text-inverse: var(--gray-0);
  --border-default: var(--gray-200);
  --border-focus: var(--orange-500);

  /* ── Spacing (8px base; --space-6+ fluid 375→1440px) ── */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: clamp(32px, calc(26.37px + 1.503vw), 48px);
  --space-7: clamp(40px, calc(34.37px + 1.503vw), 56px);
  --space-8: clamp(48px, calc(42.37px + 1.503vw), 64px);
  --space-9: clamp(56px, calc(50.37px + 1.503vw), 72px);
  --space-10: clamp(64px, calc(58.37px + 1.503vw), 80px);
  --space-11: clamp(72px, calc(66.37px + 1.503vw), 88px);
  --space-12: clamp(80px, calc(74.37px + 1.503vw), 96px);

  /* ── Type Scale ── */
  --text-xs: 0.6875rem;   /* 11px */
  --text-sm: 0.8125rem;   /* 13px */
  --text-base: 0.9375rem; /* 15px */
  --text-md: 1.0625rem;   /* 17px */
  --text-lg: 1.25rem;     /* 20px */
  --text-xl: 1.5rem;      /* 24px */
  --text-2xl: 1.875rem;   /* 30px */
  --text-3xl: 2.375rem;   /* 38px */
  --text-4xl: 3.125rem;   /* 50px */

  /* ── Radii ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-pill: 9999px;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.03);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.06);
  --shadow-focus: 0 0 0 3px rgb(249 115 22 / 0.2);
  --shadow-price: 0 4px 12px rgb(28 25 23 / 0.18);

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-page: 300ms;

  /* ── Typography ── */
  --font-display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'DM Sans', 'Helvetica Neue', Helvetica, sans-serif;
  --font-body-mercado: 'Barlow', Arial, sans-serif;
  --font-mono: 'DM Mono', 'SFMono-Regular', Consolas, monospace;

  /* ── Mercado direction ──
     Antes: oklch(45% …) renderizaba #952d00 (marrón oscuro) → acentos apagados,
     look genérico. Ahora la MISMA señal naranja del hero en todo el sitio:
     --fire      = fondo/relleno naranja (SIEMPRE con texto oscuro --gray-900 encima; 6.2:1)
     --fire-deep = naranja para TEXTO sobre fondo claro (precios, links; 5.2:1 AA ✓)
     --fire-light= acento naranja claro para iconos sobre fondo oscuro (7.9:1) */
  --fire: var(--orange-500);       /* #f97316 */
  --fire-deep: var(--orange-700);  /* #c2410c */
  --fire-light: var(--orange-400); /* #fb923c */
  --bg-dark-warm: oklch(14% 0.015 40);
  --bg-dark-warm-card: oklch(20% 0.015 40); /* card/item elevado sobre --bg-dark-warm */
  --bg-dark-warm-elevated: oklch(28% 0.03 40); /* icono/chip elevado sobre --bg-dark-warm-card */
  --text-muted-on-dark: oklch(74% 0.01 40);
  --text-bright-on-dark: oklch(90% 0.04 35); /* link/texto casi blanco sobre fondo oscuro, ~12:1 */
  --bg-warm-alt: oklch(93% 0.01 50);

  /* ── Layout ── */
  --container-max: 1200px;
  --container-padding: var(--space-2);
  --header-height: 72px;
}

@media (min-width: 768px) {
  :root {
    --container-padding: var(--space-4);
  }
}