/**
 * Tokens de diseño.
 *
 * Todo valor que se repita —color, familia tipográfica, medida de ritmo—
 * se define aquí una vez. styles.css solo consume estas variables, nunca
 * escribe un color a mano.
 *
 * Si alguna vez hay que cambiar el naranja de la marca, se cambia en una línea.
 */

:root {
  /* ── Color ──────────────────────────────────────────────────────
     La paleta sale de las fotos del cliente: remolque negro, troca
     blanca, cielo azul de Texas. El naranja de seguridad es el
     complemento de ese azul, y ningún competidor de DFW lo usa. */
  --ink: #0A0B0D;          /* negro del remolque — fondo principal */
  --steel: #15171B;        /* superficie elevada sobre el fondo */
  --steel-2: #1E2228;      /* superficie elevada, estado hover */
  --line: #2C3138;         /* bordes y divisores en oscuro */

  --paper: #E9EBEE;        /* gris claro frío para las bandas claras */
  --paper-2: #FFFFFF;
  --line-light: #D2D6DB;   /* bordes y divisores en claro */

  --orange: #FF6A13;       /* acento de marca */
  --orange-hover: #FF8438;
  --orange-deep: #D94900;  /* el mismo acento, legible sobre fondo claro */

  --signal: #35E07F;       /* solo para el punto de "estamos disponibles" */
  --whatsapp: #25D366;
  --whatsapp-ink: #06301A;

  --muted: #878E97;        /* texto secundario sobre oscuro */
  --muted-dark: #5B626B;   /* texto secundario sobre claro */
  --body-dim: #B9BFC7;     /* párrafos sobre oscuro */
  --list-dim: #C3C9D0;

  /* ── Tipografía ─────────────────────────────────────────────────
     Display condensada de corte técnico, cuerpo neutro muy legible,
     y una monoespaciada para lo que se lee como instrumento: el reloj,
     las etiquetas de especificación, los números de paso. */
  --display: "Saira Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* ── Ritmo ──────────────────────────────────────────────────────
     Dos medidas gobiernan todo el espaciado de la página. */
  --pad: clamp(1.25rem, 5vw, 5rem);    /* margen lateral */
  --band: clamp(4.5rem, 9vw, 8rem);    /* aire vertical entre secciones */

  --max-w: 1500px;
  --radius: 2px;                        /* casi recto, como el equipo pesado */
}