/* ============================================================
   HUERTA CHINÉN · DESIGN SYSTEM v1.0.0
   Huarique criollo nikkei · Mercado N°2 de Surquillo · desde 1984
   Generado por Nozoe Studio · 2026-06-13
   Prefijo de variables: --hch-
   ============================================================ */

/* ───────── LAYER 1 · PRIMITIVES (valores crudos) ───────── */
:root {
  /* Color · Rojo de marca (acento sagrado) */
  --hch-rojo-50: #FFEBEB;
  --hch-rojo-100: #FFD1D1;
  --hch-rojo-200: #FFA3A3;
  --hch-rojo-300: #FF6666;
  --hch-rojo-400: #FF3333;
  --hch-rojo-500: #FF0000;
  --hch-rojo-600: #D60000;
  --hch-rojo-700: #A80000;
  --hch-rojo-800: #800000;
  --hch-rojo-900: #500202;

  /* Color · Naranja / ámbar de marca (cálido secundario) */
  --hch-naranja-50: #FEF4EC;
  --hch-naranja-100: #FCE2CF;
  --hch-naranja-200: #FAC69E;
  --hch-naranja-300: #F5A466;
  --hch-naranja-400: #F4982A;
  --hch-naranja-500: #ED6E20;
  --hch-naranja-600: #D8650E;
  --hch-naranja-700: #AE5109;
  --hch-naranja-800: #883F07;
  --hch-naranja-900: #562906;

  /* Color · Carbón cálido (anchor / texto) */
  --hch-carbon-50: #F6F5F4;
  --hch-carbon-100: #E8E5E3;
  --hch-carbon-200: #D0CCC8;
  --hch-carbon-300: #AAA39D;
  --hch-carbon-400: #837A72;
  --hch-carbon-500: #696059;
  --hch-carbon-600: #534C46;
  --hch-carbon-700: #3E3832;
  --hch-carbon-800: #2B2622;
  --hch-carbon-900: #1A1714;

  /* Color · Papel de mercado (superficies cálidas) */
  --hch-papel-50: #FAF8F4;
  --hch-papel-100: #F5F1EB;
  --hch-papel-200: #E8E2D8;
  --hch-papel-300: #D7CEC1;
  --hch-papel-400: #C0B5A5;
  --hch-papel-500: #A49784;
  --hch-papel-600: #857866;
  --hch-papel-700: #61594C;
  --hch-papel-800: #3F3931;
  --hch-papel-900: #25221D;

  /* Colores fijos de marca */
  --hch-black: #000000;
  --hch-white: #FFFFFF;

  /* Canal · WhatsApp (verde de pedido directo) */
  --hch-whatsapp: #128C7E;
  --hch-whatsapp-hover: #0E6B60;

  /* Estados (no son colores de marca) */
  --hch-success: #2E7D5B;
  --hch-warning: #C68B17;
  --hch-danger: #C0392B;
  --hch-info: #3A6FB8;

  /* Espaciado · base 4 */
  --hch-size-0: 0;
  --hch-size-1: 4px;
  --hch-size-2: 8px;
  --hch-size-3: 12px;
  --hch-size-4: 16px;
  --hch-size-5: 20px;
  --hch-size-6: 24px;
  --hch-size-7: 28px;
  --hch-size-8: 32px;
  --hch-size-10: 40px;
  --hch-size-12: 48px;
  --hch-size-16: 64px;
  --hch-size-20: 80px;
  --hch-size-24: 96px;
  --hch-size-32: 128px;
  --hch-size-40: 160px;
  --hch-size-48: 192px;

  /* Radios */
  --hch-radius-sm: 4px;
  --hch-radius-md: 8px;
  --hch-radius-lg: 12px;
  --hch-radius-xl: 16px;
  --hch-radius-pill: 999px;

  /* Familias tipográficas */
  --hch-font-display: "Bebas Neue", Oswald, "Arial Narrow", system-ui, sans-serif;
  --hch-font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hch-font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Pesos */
  --hch-fw-regular: 400;
  --hch-fw-medium: 500;
  --hch-fw-semibold: 600;
  --hch-fw-bold: 700;

  /* Tamaños de fuente */
  --hch-fs-xs: 12px;
  --hch-fs-sm: 14px;
  --hch-fs-md: 16px;
  --hch-fs-lg: 18px;
  --hch-fs-xl: 22px;
  --hch-fs-2xl: 28px;
  --hch-fs-3xl: 32px;
  --hch-fs-4xl: 44px;
  --hch-fs-5xl: 56px;
  --hch-fs-6xl: 72px;
  --hch-fs-7xl: 96px;

  /* Interlineados */
  --hch-lh-tight: 1.0;
  --hch-lh-snug: 1.15;
  --hch-lh-cozy: 1.3;
  --hch-lh-normal: 1.5;
  --hch-lh-relaxed: 1.65;

  /* Tracking (letter-spacing) */
  --hch-ls-tighter: -0.01em;
  --hch-ls-tight: 0;
  --hch-ls-normal: 0;
  --hch-ls-caps: 0.02em;
  --hch-ls-wide: 0.06em;
  --hch-ls-widest: 0.16em;

  /* Duraciones */
  --hch-dur-fast: 150ms;
  --hch-dur-base: 250ms;
  --hch-dur-slow: 400ms;
  --hch-dur-slower: 600ms;

  /* Easings */
  --hch-ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --hch-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --hch-ease-inOut: cubic-bezier(0.4, 0, 0.6, 1);
  --hch-ease-snappy: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Sombras · tintadas con carbón cálido, no negro plano */
  --hch-shadow-sm: 0 1px 2px 0 rgba(26,23,20,0.05), 0 1px 1px 0 rgba(26,23,20,0.07);
  --hch-shadow-md: 0 4px 8px -2px rgba(26,23,20,0.08), 0 2px 4px -1px rgba(26,23,20,0.05);
  --hch-shadow-lg: 0 12px 24px -6px rgba(26,23,20,0.10), 0 4px 8px -2px rgba(26,23,20,0.06);
  --hch-shadow-xl: 0 24px 48px -12px rgba(26,23,20,0.14), 0 12px 24px -6px rgba(26,23,20,0.10);
  --hch-shadow-focus: 0 0 0 3px rgba(255,0,0,0.30);

  /* Z-index */
  --hch-z-behind: -1;
  --hch-z-base: 0;
  --hch-z-raised: 10;
  --hch-z-dropdown: 100;
  --hch-z-sticky: 200;
  --hch-z-overlay: 300;
  --hch-z-modal: 400;
  --hch-z-popover: 500;
  --hch-z-toast: 600;
  --hch-z-tooltip: 700;

  /* Contenedores y grilla */
  --hch-container-default: 1200px;
  --hch-container-wide: 1440px;
  --hch-grid-margin: 20px;
  --hch-grid-gutter: 16px;
}

@media (min-width: 768px)  { :root { --hch-grid-margin: 32px; --hch-grid-gutter: 16px; } }
@media (min-width: 1024px) { :root { --hch-grid-margin: 48px; --hch-grid-gutter: 24px; } }
@media (min-width: 1280px) { :root { --hch-grid-margin: 80px; } }

/* ───────── LAYER 2 · SEMANTIC (LIGHT) ───────── */
/* Los componentes SOLO hablan con esta capa, nunca con primitivas. */
:root,
[data-theme="light"] {
  --hch-text-primary: var(--hch-carbon-800);
  --hch-text-secondary: var(--hch-carbon-600);
  --hch-text-tertiary: var(--hch-carbon-500);
  --hch-text-on-accent: var(--hch-black);
  --hch-text-on-dark: var(--hch-papel-50);
  --hch-text-link: var(--hch-rojo-600);
  --hch-surface-base: var(--hch-papel-50);
  --hch-surface-raised: var(--hch-white);
  --hch-surface-sunken: var(--hch-papel-100);
  --hch-surface-warm: var(--hch-naranja-50);
  --hch-surface-accent: var(--hch-rojo-500);
  --hch-surface-cta: var(--hch-rojo-500);
  --hch-surface-cta-hover: var(--hch-rojo-600);
  --hch-surface-dark: var(--hch-carbon-900);
  --hch-border-subtle: var(--hch-papel-300);
  --hch-border-strong: var(--hch-carbon-700);
  --hch-border-focus: var(--hch-rojo-500);
  --hch-border-divider: var(--hch-papel-200);
  --hch-accent: var(--hch-rojo-500);
  --hch-accent-hover: var(--hch-rojo-600);
  --hch-accent-active: var(--hch-rojo-700);
  --hch-accent-warm: var(--hch-naranja-500);
  --hch-accent-warm-hover: var(--hch-naranja-600);
  --hch-eyebrow: var(--hch-naranja-700);
  --hch-state-success: var(--hch-success);
  --hch-state-warning: var(--hch-warning);
  --hch-state-danger: var(--hch-danger);
  --hch-state-info: var(--hch-info);
}

/* ───────── LAYER 2 · SEMANTIC (DARK) — noche de mercado ───────── */
[data-theme="dark"] {
  --hch-text-primary: var(--hch-papel-100);
  --hch-text-secondary: var(--hch-papel-300);
  --hch-text-tertiary: var(--hch-papel-400);
  --hch-text-on-accent: var(--hch-black);
  --hch-text-on-dark: var(--hch-papel-100);
  --hch-text-link: var(--hch-rojo-400);
  --hch-surface-base: var(--hch-carbon-900);
  --hch-surface-raised: var(--hch-carbon-800);
  --hch-surface-sunken: var(--hch-black);
  --hch-surface-warm: var(--hch-carbon-700);
  --hch-surface-accent: var(--hch-rojo-500);
  --hch-surface-cta: var(--hch-rojo-500);
  --hch-surface-cta-hover: var(--hch-rojo-400);
  --hch-surface-dark: var(--hch-carbon-900);
  --hch-border-subtle: var(--hch-carbon-700);
  --hch-border-strong: var(--hch-papel-300);
  --hch-border-focus: var(--hch-rojo-500);
  --hch-border-divider: var(--hch-carbon-700);
  --hch-accent: var(--hch-rojo-500);
  --hch-accent-hover: var(--hch-rojo-400);
  --hch-accent-active: var(--hch-rojo-300);
  --hch-accent-warm: var(--hch-naranja-500);
  --hch-accent-warm-hover: var(--hch-naranja-400);
  --hch-eyebrow: var(--hch-naranja-400);
  --hch-state-success: var(--hch-success);
  --hch-state-warning: var(--hch-warning);
  --hch-state-danger: var(--hch-danger);
  --hch-state-info: var(--hch-info);
}

/* Dark automático cuando no hay data-theme explícito */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --hch-text-primary: var(--hch-papel-100);
    --hch-text-secondary: var(--hch-papel-300);
    --hch-text-tertiary: var(--hch-papel-400);
    --hch-text-on-accent: var(--hch-black);
    --hch-text-on-dark: var(--hch-papel-100);
    --hch-text-link: var(--hch-rojo-400);
    --hch-surface-base: var(--hch-carbon-900);
    --hch-surface-raised: var(--hch-carbon-800);
    --hch-surface-sunken: var(--hch-black);
    --hch-surface-warm: var(--hch-carbon-700);
    --hch-surface-accent: var(--hch-rojo-500);
    --hch-surface-cta: var(--hch-rojo-500);
    --hch-surface-cta-hover: var(--hch-rojo-400);
    --hch-surface-dark: var(--hch-carbon-900);
    --hch-border-subtle: var(--hch-carbon-700);
    --hch-border-strong: var(--hch-papel-300);
    --hch-border-focus: var(--hch-rojo-500);
    --hch-border-divider: var(--hch-carbon-700);
    --hch-accent: var(--hch-rojo-500);
    --hch-accent-hover: var(--hch-rojo-400);
    --hch-accent-active: var(--hch-rojo-300);
    --hch-accent-warm: var(--hch-naranja-500);
    --hch-accent-warm-hover: var(--hch-naranja-400);
    --hch-eyebrow: var(--hch-naranja-400);
    --hch-state-success: var(--hch-success);
    --hch-state-warning: var(--hch-warning);
    --hch-state-danger: var(--hch-danger);
    --hch-state-info: var(--hch-info);
  }
}

/* ───────── LAYER 3 · COMPONENT TOKENS ───────── */
:root {
  --hch-btn-h-sm: 36px;
  --hch-btn-h-md: 44px;
  --hch-btn-h-lg: 52px;
  --hch-btn-px-sm: var(--hch-size-3);
  --hch-btn-px-md: var(--hch-size-5);
  --hch-btn-px-lg: var(--hch-size-7);
  --hch-btn-radius: var(--hch-radius-md);
  --hch-input-h-sm: 36px;
  --hch-input-h-md: 44px;
  --hch-input-h-lg: 52px;
  --hch-input-radius: var(--hch-radius-md);
  --hch-card-padding: var(--hch-size-6);
  --hch-card-radius: var(--hch-radius-xl);
  --hch-alert-padding: var(--hch-size-4);
  --hch-alert-radius: var(--hch-radius-md);
  --hch-section-py: var(--hch-size-24);
  --hch-menu-py: var(--hch-size-3);
}

/* ───────── RESPONSIVE · display sizes se achican en móvil ───────── */
@media (max-width: 768px) {
  :root {
    --hch-fs-7xl: 64px;
    --hch-fs-6xl: 52px;
    --hch-fs-5xl: 42px;
    --hch-fs-4xl: 34px;
    --hch-fs-3xl: 28px;
  }
}

/* ───────── ACCESSIBILITY · reduced motion ───────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ───────── UTILITIES · tipografía ───────── */
.hch-display-xl { font-family: var(--hch-font-display); font-size: var(--hch-fs-7xl); font-weight: var(--hch-fw-regular); line-height: var(--hch-lh-tight); letter-spacing: var(--hch-ls-caps); text-transform: uppercase; }
.hch-display-l { font-family: var(--hch-font-display); font-size: var(--hch-fs-6xl); font-weight: var(--hch-fw-regular); line-height: var(--hch-lh-tight); letter-spacing: var(--hch-ls-caps); text-transform: uppercase; }
.hch-display-m { font-family: var(--hch-font-display); font-size: var(--hch-fs-5xl); font-weight: var(--hch-fw-regular); line-height: var(--hch-lh-tight); letter-spacing: var(--hch-ls-caps); text-transform: uppercase; }
.hch-h1 { font-family: var(--hch-font-display); font-size: var(--hch-fs-4xl); font-weight: var(--hch-fw-regular); line-height: var(--hch-lh-tight); letter-spacing: var(--hch-ls-caps); text-transform: uppercase; }
.hch-h2 { font-family: var(--hch-font-display); font-size: var(--hch-fs-3xl); font-weight: var(--hch-fw-regular); line-height: var(--hch-lh-snug); letter-spacing: var(--hch-ls-caps); text-transform: uppercase; }
.hch-h3 { font-family: var(--hch-font-text); font-size: var(--hch-fs-xl); font-weight: var(--hch-fw-bold); line-height: var(--hch-lh-cozy); letter-spacing: var(--hch-ls-tighter); }
.hch-h4 { font-family: var(--hch-font-text); font-size: var(--hch-fs-lg); font-weight: var(--hch-fw-semibold); line-height: var(--hch-lh-cozy); letter-spacing: var(--hch-ls-normal); }
.hch-body-l { font-family: var(--hch-font-text); font-size: var(--hch-fs-lg); font-weight: var(--hch-fw-regular); line-height: var(--hch-lh-relaxed); letter-spacing: var(--hch-ls-normal); }
.hch-body { font-family: var(--hch-font-text); font-size: var(--hch-fs-md); font-weight: var(--hch-fw-regular); line-height: var(--hch-lh-relaxed); letter-spacing: var(--hch-ls-normal); }
.hch-body-s { font-family: var(--hch-font-text); font-size: var(--hch-fs-sm); font-weight: var(--hch-fw-regular); line-height: var(--hch-lh-normal); letter-spacing: var(--hch-ls-normal); }
.hch-caption { font-family: var(--hch-font-text); font-size: var(--hch-fs-xs); font-weight: var(--hch-fw-regular); line-height: var(--hch-lh-normal); letter-spacing: var(--hch-ls-normal); }
.hch-eyebrow { font-family: var(--hch-font-text); font-size: var(--hch-fs-xs); font-weight: var(--hch-fw-semibold); line-height: var(--hch-lh-tight); letter-spacing: var(--hch-ls-widest); text-transform: uppercase; }
.hch-label { font-family: var(--hch-font-text); font-size: var(--hch-fs-sm); font-weight: var(--hch-fw-semibold); line-height: var(--hch-lh-cozy); letter-spacing: var(--hch-ls-normal); }
.hch-price { font-family: var(--hch-font-display); font-size: var(--hch-fs-2xl); font-weight: var(--hch-fw-regular); line-height: var(--hch-lh-tight); letter-spacing: var(--hch-ls-caps); text-transform: uppercase; }
.hch-mono { font-family: var(--hch-font-mono); font-size: var(--hch-fs-sm); font-weight: var(--hch-fw-regular); line-height: var(--hch-lh-normal); letter-spacing: var(--hch-ls-normal); }

/* Eyebrow editorial · con chispa naranja (la del logo) */
.hch-eyebrow {
  display: inline-flex; align-items: center; gap: var(--hch-size-2);
  color: var(--hch-eyebrow);
}
.hch-eyebrow::before {
  content: ""; width: 18px; height: 2px; background: var(--hch-accent-warm);
}

/* Container */
.hch-container {
  width: 100%;
  max-width: var(--hch-container-default);
  margin-inline: auto;
  padding-inline: var(--hch-grid-margin);
}
.hch-container-wide { max-width: var(--hch-container-wide); }

/* Helpers de superficie */
.hch-surface { background: var(--hch-surface-base); color: var(--hch-text-primary); }
.hch-on-dark { background: var(--hch-surface-dark); color: var(--hch-text-on-dark); }