/* ==========================================================================
   NO ZOMBIE — Design Tokens
   Filosofía: "Cartel de concierto punk" = Brutalist/Raw (bloques duros, cero
   radios, sombras de offset duro, base 4px) + Editorial (escala tipográfica
   dramática, retícula, ritmo vertical).
   Fuente de marca: Brief V2 + Brandlines. Ver .design/no-zombie-landing/.

   DESVIACIÓN DE "LIGHT / DARK MODE":
   La marca exige fondo negro dominante en todos los canales, así que el sitio
   NO cambia con la preferencia del sistema (no hay toggle claro/oscuro).
   En su lugar hay tres "mundos" (temas por sección) con paletas completas:
     - coal (default, oscuro)   → :root / [data-world="coal"]
     - bone (claro)             → [data-world="bone"]
     - red  (DeathsPresso/CTA)  → [data-world="red"]
   Cada sección declara su mundo con data-world="…" y todos los tokens
   semánticos se resuelven solos.

   REGLA DE CONTRASTE: el rojo #A81E2E sobre carbón da 2.2:1 → nunca como
   color de texto sobre negro. Solo como relleno con texto hueso encima.
   ========================================================================== */

/* ---------- Fuentes ---------- */
/* Inter se carga desde Google Fonts en el <head> (400, 600, 800). */
@font-face {
  font-family: "Metal Heaven";
  src: url("../fonts/MetalHeaven-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raven Hell";
  src: url("../fonts/RavenHell-BoldGothic.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raven Hell";
  src: url("../fonts/RavenHell-RegularGothic.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raven Hell";
  src: url("../fonts/RavenHell-BlackGothic.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Paleta cruda (no usar directo en componentes) ---------- */
  --raw-coal: #222323;        /* Negro profundo — base */
  --raw-coal-deep: #171819;   /* Fondo de producto / pozos */
  --raw-coal-lift: #2C2D2E;   /* Superficie elevada sobre carbón */
  --raw-bone: #F2EDE4;        /* Hueso oficial — nunca #FFF */
  --raw-bone-deep: #E9E3D6;   /* Superficie sobre hueso */
  --raw-red: #A81E2E;         /* Rojo Pantone 187 C — acento dominante */
  --raw-red-dark: #861825;    /* Hover */
  --raw-red-darker: #68131D;  /* Active */
  --raw-yellow: #ECC026;      /* Amarillo bilis — uso mínimo */
  --raw-ash: #B8B3A8;         /* Texto secundario sobre carbón (7.5:1) */
  --raw-ash-dim: #938F86;     /* Texto terciario sobre carbón (4.9:1) */
  --raw-soot: #5A5853;        /* Texto secundario sobre hueso (6.3:1) */
  --raw-blush: #EBDCDF;       /* Texto secundario sobre rojo (6.7:1) */

  /* Colores exactos del diseño de Illustrator (Web No Zombie MX.ai) */
  --nz-red: #A81E2E;          /* Pantone 187 C */
  --nz-bone: #F2EDE4;
  --nz-coal: #222323;
  --nz-yellow: #ECC026;
  --nz-ink: #0B0E12;          /* sombra de titulares */

  /* ---------- Mundo COAL (default) ---------- */
  --color-bg-primary: var(--raw-coal);
  --color-bg-secondary: var(--raw-coal-deep);
  --color-bg-tertiary: var(--raw-coal-lift);
  --color-bg-inverse: var(--raw-bone);

  --color-text-primary: var(--raw-bone);          /* 14:1 */
  --color-text-secondary: var(--raw-ash);         /* 7.5:1 */
  --color-text-tertiary: var(--raw-ash-dim);      /* 4.9:1 */
  --color-text-inverse: var(--raw-coal);
  --color-text-link: var(--raw-bone);             /* subrayado, nunca rojo */
  --color-text-highlight: var(--raw-yellow);      /* énfasis puntual, 9:1 */

  --color-border-primary: rgb(242 237 228 / 0.85);
  --color-border-secondary: rgb(242 237 228 / 0.2);
  --color-border-focus: var(--raw-yellow);

  --color-accent-primary: var(--raw-red);         /* relleno de CTA */
  --color-accent-primary-hover: var(--raw-red-dark);
  --color-accent-primary-active: var(--raw-red-darker);
  --color-on-accent-primary: var(--raw-bone);     /* 6.2:1 */
  --color-accent-secondary: var(--raw-bone);      /* botón borde/inverso */
  --color-on-accent-secondary: var(--raw-coal);

  --color-status-success: var(--raw-bone);
  --color-status-warning: var(--raw-yellow);
  --color-status-error: #FF5A6E;                  /* funcional, 5.2:1 sobre carbón */
  --color-status-info: var(--raw-ash);

  --color-surface-overlay: rgb(23 24 25 / 0.82);
  --color-grain-opacity: 0.09;

  /* ---------- Tipografía ---------- */
  --font-family-display: "Metal Heaven", "Raven Hell", Impact, "Arial Black", sans-serif; /* SOLO sin acentos */
  --font-family-heading: "Raven Hell", Impact, "Arial Black", sans-serif;
  --font-family-body: "Inter", Arial, Helvetica, sans-serif;
  --font-family-mono: "Courier Prime", Courier, "Courier New", monospace; /* frases tipo máquina de escribir */

  /* Escala fluida (móvil 375px → escritorio 1440px) */
  --font-size-xs: 0.75rem;                                   /* 12 — legales mínimos */
  --font-size-sm: 0.875rem;                                  /* 14 — etiquetas, eyebrow */
  --font-size-base: 1rem;                                    /* 16 — cuerpo */
  --font-size-md: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);   /* 17→20 — lead */
  --font-size-lg: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem); /* 22→30 — subtítulos */
  --font-size-xl: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);  /* 30→44 — h3 / nombre café */
  --font-size-2xl: clamp(2.5rem, 1.9rem + 2.8vw, 4.25rem);   /* 40→68 — h2 de sección */
  --font-size-3xl: clamp(3.25rem, 2.2rem + 5vw, 6.5rem);     /* 52→104 — display secundario */
  --font-size-4xl: clamp(4rem, 2.4rem + 8vw, 10rem);         /* 64→160 — NO ZOMBIE hero */

  --font-weight-normal: 400;
  --font-weight-medium: 600;
  --font-weight-semibold: 700;
  --font-weight-bold: 800;
  --font-weight-heading: 700;   /* Raven Hell Bold Gothic */
  --font-weight-heavy: 900;     /* Raven Hell Black Gothic */

  --line-height-display: 0.92;  /* Metal Heaven apretado, tipo cartel */
  --line-height-tight: 1.1;     /* Raven Hell */
  --line-height-normal: 1.55;   /* cuerpo (manual: mínimo 120%) */
  --line-height-relaxed: 1.7;   /* manifiesto */

  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.14em;   /* eyebrows, etiquetas en mayúsculas */
  --letter-spacing-display: 0.02em; /* manual: tracking amplio en display */

  /* ---------- Espaciado (base 4px — brutalista) ---------- */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */
  --space-11: 12rem;   /* 192 */
  --space-12: 16rem;   /* 256 */

  --gutter: clamp(1rem, 0.5rem + 3vw, 5.5rem);            /* lateral: 16 → 88 */
  --section-padding-y: clamp(4rem, 2.5rem + 6vw, 9rem);  /* 64 → 144 */

  /* ---------- Layout ---------- */
  --max-width-content: 68ch;
  --max-width-wide: 75rem;   /* 1200 */
  --max-width-page: 90rem;   /* 1440 */
  --header-height: 4.5rem;

  /* Cero redondeos: "rectángulos y bloques, sin formas orgánicas ni redondeadas" */
  --border-radius-sm: 0;
  --border-radius-md: 0;
  --border-radius-lg: 0;
  --border-radius-full: 9999px; /* solo para indicadores circulares (sellos) */

  --border-width-hairline: 1px;
  --border-width-thick: 2px;
  --border-width-heavy: 4px;

  /* Sombras de offset duro (sticker / serigrafía), sin desenfoque */
  --shadow-sm: 3px 3px 0 0 var(--raw-coal-deep);
  --shadow-md: 6px 6px 0 0 var(--raw-coal-deep);
  --shadow-lg: 10px 10px 0 0 var(--raw-coal-deep);
  --shadow-focus: 0 0 0 3px var(--color-border-focus);

  /* Rotaciones "pegado a mano" para stickers y sellos */
  --tilt-sm: -2deg;
  --tilt-md: -4deg;
  --tilt-lg: 6deg;

  /* ---------- Movimiento (lento, crudo, sin rebote) ---------- */
  --duration-instant: 50ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;
  --duration-world: 450ms;     /* cambio de mundo en el selector */
  --duration-ticker: 40s;      /* una vuelta completa del ticker */

  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-in: cubic-bezier(0.4, 0, 1, 1);
  --easing-out: cubic-bezier(0, 0, 0.2, 1);
  --easing-bounce: var(--easing-out); /* rebote deshabilitado por marca */
  --easing-cut: steps(1, end);        /* corte seco tipo cartel */

  --reveal-distance: 14px;
  /* Identidad de motion "Golpe de cartel" (2026-10-23): enérgico pero crudo, sin rebote.
     Curva propia para casi todo, tres duraciones y --amp = intensidad (fuerte). */
  --golpe: cubic-bezier(0.16, 1, 0.3, 1);  /* arranca rápido, frena en seco */
  --t-rapida: 120ms;
  --t-normal: 220ms;
  --t-lenta: 380ms;
  --amp: 1.6;

  /* ---------- Breakpoints (referencia; usar en @media con px) ---------- */
  --breakpoint-sm: 375px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* ---------- Tokens de componente ---------- */
  --button-height: 3.25rem;              /* 52px, táctil > 44 */
  --button-padding-x: var(--space-6);
  --button-font: var(--font-weight-bold) var(--font-size-sm) / 1 var(--font-family-body);
  --button-letter-spacing: var(--letter-spacing-wide);
  --button-border: var(--border-width-thick) solid currentColor;

  --ticker-height: 3.5rem;
  --ticker-font-size: var(--font-size-lg);

  --tab-size: 3.25rem;
  --selector-bag-max: min(78vw, 30rem);

  --badge-padding: var(--space-2) var(--space-4);
  --badge-font: var(--font-weight-bold) var(--font-size-xs) / 1 var(--font-family-body);

  color-scheme: dark;
}

/* ---------- Mundo BONE (claro): MaragoGore, preparación, reseñas ---------- */
[data-world="bone"] {
  --color-bg-primary: var(--raw-bone);
  --color-bg-secondary: var(--raw-bone-deep);
  --color-bg-tertiary: #DDD6C6;
  --color-bg-inverse: var(--raw-coal);

  --color-text-primary: var(--raw-coal);          /* 14:1 */
  --color-text-secondary: var(--raw-soot);        /* 6.3:1 */
  --color-text-tertiary: #6E6B65;                 /* 4.7:1 */
  --color-text-inverse: var(--raw-bone);
  --color-text-link: var(--raw-red);              /* 6.2:1 sobre hueso ✓ */
  --color-text-highlight: var(--raw-red);

  --color-border-primary: rgb(34 35 35 / 0.9);
  --color-border-secondary: rgb(34 35 35 / 0.18);
  --color-border-focus: var(--raw-red);

  --color-accent-primary: var(--raw-red);
  --color-accent-primary-hover: var(--raw-red-dark);
  --color-accent-primary-active: var(--raw-red-darker);
  --color-on-accent-primary: var(--raw-bone);
  --color-accent-secondary: var(--raw-coal);
  --color-on-accent-secondary: var(--raw-bone);

  --color-status-error: var(--raw-red);
  --color-status-info: var(--raw-soot);

  --color-surface-overlay: rgb(34 35 35 / 0.6);
  --color-grain-opacity: 0.12;

  --shadow-sm: 3px 3px 0 0 var(--raw-coal);
  --shadow-md: 6px 6px 0 0 var(--raw-coal);
  --shadow-lg: 10px 10px 0 0 var(--raw-coal);

  color-scheme: light;
}

/* ---------- Mundo RED: DeathsPresso, ticker, bandas de impacto ---------- */
[data-world="red"] {
  --color-bg-primary: var(--raw-red);
  --color-bg-secondary: var(--raw-red-dark);
  --color-bg-tertiary: var(--raw-red-darker);
  --color-bg-inverse: var(--raw-bone);

  --color-text-primary: var(--raw-bone);          /* 6.2:1 */
  --color-text-secondary: var(--raw-blush);       /* 5.5:1 */
  --color-text-tertiary: var(--raw-blush);
  --color-text-inverse: var(--raw-red);
  --color-text-link: var(--raw-bone);
  --color-text-highlight: var(--raw-bone);

  --color-border-primary: rgb(242 237 228 / 0.9);
  --color-border-secondary: rgb(242 237 228 / 0.3);
  --color-border-focus: var(--raw-bone);

  /* En mundo rojo el CTA se invierte: hueso con texto carbón */
  --color-accent-primary: var(--raw-bone);
  --color-accent-primary-hover: var(--raw-bone-deep);
  --color-accent-primary-active: #DDD6C6;
  --color-on-accent-primary: var(--raw-coal);
  --color-accent-secondary: var(--raw-coal);
  --color-on-accent-secondary: var(--raw-bone);

  --color-status-error: var(--raw-bone);

  --color-surface-overlay: rgb(104 19 29 / 0.8);
  --color-grain-opacity: 0.14;

  --shadow-sm: 3px 3px 0 0 var(--raw-coal);
  --shadow-md: 6px 6px 0 0 var(--raw-coal);
  --shadow-lg: 10px 10px 0 0 var(--raw-coal);

  color-scheme: dark;
}

/* Explícito para secciones que vuelven a carbón dentro de otro mundo */
[data-world="coal"] {
  --color-bg-primary: var(--raw-coal);
  --color-bg-secondary: var(--raw-coal-deep);
  --color-bg-tertiary: var(--raw-coal-lift);
  --color-bg-inverse: var(--raw-bone);
  --color-text-primary: var(--raw-bone);
  --color-text-secondary: var(--raw-ash);
  --color-text-tertiary: var(--raw-ash-dim);
  --color-text-inverse: var(--raw-coal);
  --color-text-link: var(--raw-bone);
  --color-text-highlight: var(--raw-yellow);
  --color-border-primary: rgb(242 237 228 / 0.85);
  --color-border-secondary: rgb(242 237 228 / 0.2);
  --color-border-focus: var(--raw-yellow);
  --color-accent-primary: var(--raw-red);
  --color-accent-primary-hover: var(--raw-red-dark);
  --color-accent-primary-active: var(--raw-red-darker);
  --color-on-accent-primary: var(--raw-bone);
  --color-accent-secondary: var(--raw-bone);
  --color-on-accent-secondary: var(--raw-coal);
  --color-status-error: #FF5A6E;
  --color-surface-overlay: rgb(23 24 25 / 0.82);
  --color-grain-opacity: 0.09;
  --shadow-sm: 3px 3px 0 0 var(--raw-coal-deep);
  --shadow-md: 6px 6px 0 0 var(--raw-coal-deep);
  --shadow-lg: 10px 10px 0 0 var(--raw-coal-deep);
  color-scheme: dark;
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
    --duration-world: 0ms;
    --reveal-distance: 0px;
    --t-rapida: 0ms;
    --t-normal: 0ms;
    --t-lenta: 0ms;
  }
}