:root {

  --honda-red: #cc0000;
  --honda-red-oscuro: #a30000;

  --tinta-900: #0e1116;
  --tinta-800: #1a1f26;
  --tinta-700: #2a2f37;
  --tinta-500: #4a525c;
  --tinta-400: #6b7480;
  --tinta-300: #9aa1ab;
  --tinta-200: #c8ccd2;
  --tinta-100: #e6e8eb;
  --papel: #f2f4f6;
  --papel-2: #fafbfc;
  --blanco: #ffffff;

  --azul-marino: #1a2744;
  --azul-profundo: #0f1a2e;
  --verde-salmon: #145a32;
  --ambar: #f5a623;
  --verde-estado: #21d07a;

  --fuente-titulos: 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --fuente-texto: 'Inter', 'Helvetica Neue', system-ui, sans-serif;

  --acento: var(--honda-red);
  --acento-oscuro: var(--honda-red-oscuro);

  --acento-sobre-oscuro: #ff4d3d;

  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 64px;
  --e-9: 96px;
  --e-10: 128px;

  --seccion-y: 96px;
  --margen-lateral: 64px;
  --ancho-maximo: 1600px;

  --superficie: var(--blanco);
  --superficie-2: var(--papel-2);
  --superficie-3: var(--papel);
  --texto: var(--tinta-900);
  --texto-suave: var(--tinta-500);
  --texto-tenue: var(--tinta-400);
  --borde: var(--tinta-100);
  --borde-fuerte: var(--tinta-200);

  --borde-hover: var(--tinta-300);

  --alto-header: 72px;
  --transicion: .15s ease;
}

.hm-oscuro {
  --superficie: transparent;
  --superficie-2: rgba(255, 255, 255, .04);
  --superficie-3: rgba(255, 255, 255, .04);
  --texto: #ffffff;
  --texto-suave: rgba(255, 255, 255, .70);
  --texto-tenue: rgba(255, 255, 255, .45);
  --borde: rgba(255, 255, 255, .15);
  --borde-fuerte: rgba(255, 255, 255, .28);
  --borde-hover: rgba(255, 255, 255, .40);
  color: var(--texto);
}