/* Bexlo design system: tokens.
   Cada cliente solo sobrescribe el bloque MARCA en su propio :root. */

@font-face {
  font-family: 'Manrope Variable';
  src: url('fonts/manrope.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Variable';
  src: url('fonts/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* MARCA (sobrescribir por cliente) */
  --brand: #e23232;          /* acentos grandes: titulares, líneas, iconos */
  --brand-strong: #c81e1e;   /* fondo de botones: blanco encima pasa AA (5,7:1) */
  --brand-bright: #ff4d4d;   /* texto rojo pequeño sobre fondo oscuro (6:1) */
  --brand-glow: rgba(226, 50, 50, 0.45);

  /* Superficies */
  --bg: #0b0b0c;
  --bg-2: #141416;
  --bg-3: #1c1c1f;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.22);

  /* Texto */
  --text: #f4f4f2;
  --text-2: #a3a3a8;         /* 7,8:1 sobre --bg */
  --metal: #8a8d93;

  /* Tipografía */
  --font-display: 'Manrope Variable', system-ui, sans-serif;
  --font-body: 'Inter Variable', system-ui, sans-serif;
  --fs-hero: clamp(3rem, 12vw, 8.25rem);
  --fs-h2: clamp(2.25rem, 5.5vw, 4.5rem);
  --fs-h3: clamp(1.5rem, 2.6vw, 2.5rem);
  --fs-lead: clamp(1.1875rem, 1.7vw, 1.5rem);
  --fs-body: clamp(1.125rem, 1.3vw, 1.25rem);
  --fs-small: 0.9375rem;
  --tracking-tight: -0.04em;

  /* Espacio y forma */
  --gutter: clamp(16px, 3.5vw, 56px);
  --section: clamp(80px, 12vw, 180px);
  --radius: 18px;
  --radius-pill: 999px;

  /* Movimiento */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.8s;
}