/* Tokens de marca — Nude So Rude — Dirección "Rude Grid".
   Grotesca única (Archivo), rojo intenso, negro, mucho espacio vacío, retícula. */
:root {
  /* Color — primitivo */
  --red: #E60000;        /* rojo de marca, intenso, para rellenos e impacto */
  --red-bright: #FF3B3B; /* rojo legible como texto pequeño sobre negro (AA) */
  --black: #000000;
  --white: #FFFFFF;
  --grey-400: #9A9A9A;   /* texto atenuado sobre negro (AA) */
  --grey-900: #0C0C0C;   /* superficie casi negra */

  /* Color — semántico */
  --color-bg: var(--black);
  --color-surface: var(--grey-900);
  --color-primary: var(--red);
  --color-primary-contrast: var(--white);
  --color-accent: var(--red-bright);
  --color-text: var(--white);
  --color-text-muted: var(--grey-400);

  /* Tipografía — una sola grotesca, mucho peso en display */
  --font-display: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'Archivo', system-ui, -apple-system, sans-serif;

  /* Espaciado — generoso, para el vacío */
  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 6rem;
  --space-2xl: 10rem;

  /* Layout / retícula */
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --container-max: 1480px;
  --col-gap: clamp(1rem, 2vw, 1.5rem);

  /* Forma — radio suave (justo, no agresivo) */
  --radius: 0px;          /* imágenes: filo editorial */
  --radius-btn: 6px;      /* mismo radio para todos los botones */
  --radius-block: 14px;   /* esquinas del bloque negro del hero */
  --transition: 400ms cubic-bezier(.16, 1, .3, 1);

  /* Borde rojo del marco del hero */
  --hero-frame: clamp(10px, 2.2vw, 22px);
}