/* Tokens de BugZoneGames — ver 03_Diseno/direccion-visual.md */
@font-face {
  font-family: 'Big Shoulders';
  src: url('../fonts/big-shoulders.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson';
  src: url('../fonts/atkinson-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson';
  src: url('../fonts/atkinson-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Color por rol — tomados del logo (fondo #1E2126, verde #8BE84E, gris "GAMES") */
  --color-fondo: #1E2126;          /* carbón del logo: el logo se funde con la página */
  --color-superficie: #272B31;     /* secciones alternas, ficha */
  --color-superficie-2: #30353D;   /* portadas grafito, selector */
  --color-profundo: #17191D;       /* pie */
  --color-texto: #EEF0F2;          /* 14,1:1 sobre fondo */
  --color-texto-suave: #A3A6AD;    /* gris del logo, 6,6:1 */
  --color-marca: #8BE84E;          /* verde bug, 10,6:1 sobre fondo */
  --color-sobre-marca: #1E2126;    /* texto sobre verde o ámbar */
  --color-pedido: #8BE84E;         /* botón WhatsApp = acción principal */
  --color-pedido-hover: #A8F27B;
  --color-preventa: #FFC93C;       /* ámbar, solo "Preventa" y datos pendientes */
  --color-borde: #6B7079;          /* controles, 3,2:1 */
  --color-divisor: #3A3F47;        /* líneas decorativas */
  --color-foco: #8BE84E;
  --color-velo: rgb(10 11 13 / 0.78);

  /* Tipografía */
  --fuente-titulos: 'Big Shoulders', 'Arial Narrow', sans-serif;
  --fuente-texto: 'Atkinson', system-ui, sans-serif;
  --texto-base: 1.0625rem;
  --escala: 1.333;
  --t-sm: 0.875rem;
  --t-md: var(--texto-base);
  --t-lg: calc(var(--t-md) * var(--escala));
  --t-xl: calc(var(--t-lg) * var(--escala));
  --t-2xl: clamp(2rem, 3vw + 1rem, 3.2rem);
  --t-3xl: clamp(3.4rem, 8vw + 1rem, 5.5rem);
  --interlineado: 1.6;
  --interlineado-titulos: 0.95;
  --medida: 65ch;

  /* Espaciado */
  --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem;
  --e-6: 1.5rem;  --e-8: 2rem;   --e-12: 3rem;   --e-16: 4rem; --e-24: 6rem;

  /* Forma: radios por jerarquía */
  --radio-control: 6px;     /* botones, opciones */
  --radio-portada: 4px;     /* portadas de juego */
  --radio-panel: 14px;      /* ficha */
  --ancho-max: 76rem;
  --margen-lateral: clamp(1rem, 4vw, 2.5rem);
  --duracion: 220ms;
}