/* Valores del lenguaje visual de DMG Works (#597). Fuente única: lo que diga el
   DESIGN.md se escribe aquí, y las webs y la publicidad los leen de aquí.
   Las tipografías se sirven desde casa: ninguna petición a un tercero. */

@font-face {
  font-family: "Saira";
  src: url("fuentes/saira-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 50% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Saira";
  src: url("fuentes/saira-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 50% 125%;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fuentes/jetbrains-mono-normal.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  /* Color. Contrastes medidos (WCAG) en el DESIGN.md. */
  --dmg-negro: #0b0b0a;
  --dmg-carbon-1: #141413;
  --dmg-carbon-2: #1c1c1a;
  --dmg-carbon-3: #262624;
  --dmg-linea: #2e2e2b;
  --dmg-linea-fuerte: #6a6a63;
  --dmg-blanco: #f2f2ee;
  --dmg-gris-1: #c9c9c2;
  --dmg-gris-2: #a3a39c;
  --dmg-gris-3: #8a8a83;
  --dmg-lima: #dffb07;
  --dmg-lima-encendido: #ecff4d;
  --dmg-lima-pulsado: #c8e106;
  --dmg-verde-tinta: #4d5700;
  --dmg-error: #ff5a5f;
  --dmg-aviso: #ffb020;

  /* Papeles de color: lo que se usa en las piezas. */
  --fondo: var(--dmg-negro);
  --superficie: var(--dmg-carbon-1);
  --superficie-2: var(--dmg-carbon-2);
  --superficie-3: var(--dmg-carbon-3);
  --linea: var(--dmg-linea);
  --linea-fuerte: var(--dmg-linea-fuerte);
  --texto: var(--dmg-blanco);
  --texto-2: var(--dmg-gris-2);
  --texto-3: var(--dmg-gris-3);
  --accion: var(--dmg-lima);
  --accion-encendida: var(--dmg-lima-encendido);
  --accion-pulsada: var(--dmg-lima-pulsado);
  --sobre-accion: var(--dmg-negro);

  /* El glifo de WhatsApp, con los colores de su paquete de marca (Meta): no son de DMG. */
  --whatsapp-negro: #111b21;
  --whatsapp-blanco: #ffffff;

  /* Tipografía. */
  --letra: "Saira", "Arial Narrow", system-ui, sans-serif;
  --letra-dato: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --ancho-titular: 75%;
  --peso-titular: 900;
  --peso-texto: 500;
  --peso-dato: 600;
  --ancho-dato: 90%;
  --peso-etiqueta: 600;
  --t-etiqueta: 0.8125rem;

  /* Escala de tamaños (rem, base 16 px). */
  --t-xs: 0.75rem;
  --t-s: 0.875rem;
  --t-m: 1rem;
  --t-l: 1.125rem;
  --t-xl: 1.375rem;
  --t-2xl: 1.75rem;
  --t-3xl: 2.25rem;
  --t-4xl: 3rem;
  --t-5xl: 4rem;
  --t-6xl: 5.5rem;
  --t-7xl: 7.5rem;

  /* Espaciado: base de 4 px. */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 6rem;
  --e-10: 8rem;

  /* Maquetación: 4 columnas en el móvil, 12 desde 1024 px. */
  --ancho-maximo: 90rem;
  --ancho-contenido: 80rem;
  --ancho-lectura: 42rem;
  --margen-pagina: clamp(1rem, 4vw, 4rem);
  --hueco-rejilla: clamp(1rem, 2vw, 1.5rem);
  --ritmo-seccion: clamp(4rem, 8vw, 7.5rem);

  /* Forma: todo recto. La inclinación de la marca sale de las barras del logotipo. */
  --radio: 0;
  --inclinacion: 13deg;
  --tan-inclinacion: 0.2309;
  --borde: 1px;
  --borde-fuerte: 2px;

  /* Alturas de lo que se pulsa: 44 px de mínimo. */
  --alto-control: 3rem;
  --alto-control-s: 2.75rem;

  /* Movimiento: corto y seco, sin rebote. */
  --duracion-1: 120ms;
  --duracion-2: 200ms;
  --duracion-3: 320ms;
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);
}