/* ==========================================================================
   AV PLUS Barber — tokens de diseño
   Fuente de verdad: Figma «AV PLUS Barber — Wireframes (ES)», colecciones
   «AV PLUS · Color» y «AV PLUS · Medidas» + estilos de texto.
   Si cambia un color de marca (p. ej. el Pantone real del envase), se cambia
   AQUÍ y en la variable de Figma — en ningún otro sitio.
   ========================================================================== */

:root {
  /* Base */
  --carbon: #0E0E10;        /* fondo global */
  --grafito: #17181C;       /* superficies: tarjetas, tiles, pie */
  --grafito-alto: #1F2126;  /* hover de superficie, campos de formulario */
  --borde: #2C2F36;         /* bordes de 1 px */

  /* Texto */
  --blanco: #FFFFFF;
  --plata: #B7BCC6;         /* cuerpo */
  --plata-baja: #7A808B;    /* metadatos, leyendas */

  /* Marca — regla fija: ROJO = acción de compra · AZUL = información y zona profesional */
  --rojo: #E2231A;
  --rojo-hover: #C31C14;
  --azul: #29A8E0;
  --azul-hover: #1B8CC0;

  /* Sistema */
  --exito: #2FAE6A;
  --alerta: #E8A33D;

  /* Tipografía */
  --f-display: "Bodoni Moda", "Didot", Georgia, serif;          /* títulos, nombres de producto */
  --f-ui: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; /* interfaz, precios, cuerpo */
  --f-caps: "Barlow Condensed", "Arial Narrow", sans-serif;     /* sobretítulos y badges en caja alta */

  /* Escala de texto (desktop) */
  --t-display-xxl: 64px;
  --t-display-xl: 44px;
  --t-display-l: 34px;
  --t-display-m: 24px;
  --t-display-s: 18px;
  --t-body-l: 17px;
  --t-body: 15px;
  --t-small: 13px;
  --t-label: 14px;
  --t-button: 14px;
  --t-precio: 40px;
  --t-precio-s: 18px;
  --t-caps: 14px;
  --t-caps-s: 12px;

  /* Espaciado */
  --e-xs: 8px;
  --e-s: 16px;
  --e-m: 24px;
  --e-l: 40px;
  --e-xl: 64px;
  --e-xxl: 96px;
  --e-xxxl: 128px;

  /* Rejilla */
  --contenedor: 1200px;
  --margen: 120px;
  --gutter: 24px;

  /* Controles */
  --control: 48px;
  --control-s: 40px;
  --radio: 2px;
  --radio-pill: 999px;

  --transicion: 200ms ease-out;
}

/* Móvil (≤ 899 px): la tipografía display baja un escalón, igual que en Figma («Móvil/…») */
@media (max-width: 899px) {
  :root {
    --t-display-xl: 32px;
    --t-display-l: 26px;
    --t-display-m: 20px;
    --t-display-s: 16px;
    --t-precio: 32px;
    --margen: 20px;
    --gutter: 12px;
  }
}