/* ============================================================
   MAC — Design tokens
   Registro: industrial / técnico B2B. Base negro + rojo.
   Todo lo estético se controla desde acá. Cambiar un token
   acá se propaga a todo el sitio.
   ============================================================ */

:root {
  /* ---- Color: primitivas ---- */
  --black:        #0e0f11;
  --ink:          #17191d;   /* texto principal */
  --graphite:     #3a3e45;
  --slate:        #6b7178;   /* texto secundario */
  --mist:         #9aa0a7;
  --line:         #e3e5e9;   /* bordes */
  --surface:      #f4f5f7;   /* fondos de sección alternos */
  --white:        #ffffff;

  --red:          #d51f26;   /* rojo marca (acento) */
  --red-dark:     #a8171d;   /* hover / pressed */
  --red-tint:     #fdecec;   /* fondo suave para chips/badges */

  /* ---- Color: semántico ---- */
  --bg:           var(--white);
  --bg-alt:       var(--surface);
  --bg-invert:    var(--black);
  --text:         var(--ink);
  --text-muted:   var(--slate);
  --text-invert:  var(--white);
  --accent:       var(--red);
  --accent-hover: var(--red-dark);
  --border:       var(--line);

  /* ---- Tipografía ---- */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* escala tipográfica (desktop) */
  --fs-xs:   0.78rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.375rem;
  --fs-3xl:  3.25rem;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-body:  1.6;

  --tracking-wide: 0.08em;   /* para eyebrows / labels en mayúscula */

  /* ---- Espaciado (base 4) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* ---- Layout ---- */
  --container: 1200px;
  --gutter: 1.25rem;

  /* ---- Radios (chicos = industrial) ---- */
  --radius-sm: 3px;
  --radius:    5px;
  --radius-lg: 8px;

  /* ---- Sombras (sutiles) ---- */
  --shadow-sm: 0 1px 2px rgba(14, 15, 17, 0.06);
  --shadow:    0 4px 16px rgba(14, 15, 17, 0.08);
  --shadow-lg: 0 12px 32px rgba(14, 15, 17, 0.12);

  /* ---- Otros ---- */
  --header-h: 108px;         /* topbar + navbar */
  --transition: 160ms ease;
}