/* ==========================================================================
   Design tokens — Precision Audio & Video
   --------------------------------------------------------------------------
   Reposicionamiento "luxury" (2026-08-18). El sistema anterior ("Command
   Center": Montserrat 900, rojo dominante, pills, cards 14px) leía como
   retail de electrónica. El brief del cliente pide lo contrario: integrador
   de domótica de alta gama, al lado de estudios de arquitectura y custom
   builders. La tecnología desaparece en la arquitectura.

   Los tres cambios que hacen todo el trabajo:
   1. PESO: el display pasa de 900 a 200/300. Montserrat en light y grande
      lee editorial/arquitectónico; en black lee big-box retail.
   2. AIRE: el ritmo de sección casi se duplica y las cajas de texto se
      limitan a ~62ch. El vacío es el lujo.
   3. ROJO: deja de ser superficie y pasa a ser marca puntual. El CTA
      principal ahora es tinta (charcoal); el rojo queda para un solo
      acento de máxima intención por página.

   Los NOMBRES de token no cambian — style.css y las 29 páginas dependen de
   ellos. Sólo cambian los valores, más tokens nuevos al final.
   ========================================================================== */
:root {
  /* ---- color -------------------------------------------------------- */
  --color-background: #FFFFFF;
  /* Antes #EAE9E7 (gris cálido medio). Subido a un off-white de papel:
     separa bandas sin ensuciar el blanco ni competir con la fotografía. */
  --color-surface: #F0EEEA;
  --color-text: #1A1818;
  /* Sigue aliasado a --color-text a propósito: en fondos claros el gris
     secundario se lee lavado. Se sobreescribe a rgba() clara en las
     secciones oscuras (ver .bg-surface-dark / .bg-ink en style.css). */
  --color-muted: var(--color-text);
  /* Gris real, sólo para metadata que SÍ puede pasar desapercibida
     (captions, contadores, timestamps). Nunca para una frase que el
     visitante necesita leer. */
  --color-meta: #7A7572;
  /* Hairline más suave: a este nivel de aire, #E5E5E5 se veía como caja. */
  --color-border: #E3E0DC;
  --color-hairline: rgba(26,24,24,0.12);

  /* Rojo de marca. Mismo hex del brandbook — cambia el presupuesto de uso,
     no el color. Ver "The One Accent Rule" en DESIGN.md. */
  --color-primary: #E42528;
  --color-primary-foreground: #FFFFFF;
  --color-accent: #E42528;
  /* Rojo oscurecido SOLO para texto chico. El #E42528 del brandbook da 3.97:1
     sobre --color-surface, por debajo del minimo AA de 4.5:1; este da 5.10:1.
     Se usa en .link-rule y cualquier texto rojo, nunca en superficies. */
  --color-primary-text: #C41E21;

  /* Tinta: el nuevo CTA primario y el fondo de las bandas oscuras. */
  --color-ink: #1A1818;
  --color-ink-soft: #2A2726;
  --color-surface-dark: #1A1818;

  /* ---- type — Montserrat only, per brand kit ------------------------ */
  --font-display: "Montserrat", sans-serif;
  --font-body: "Montserrat", sans-serif;

  /* El display escala con el viewport: en desktop ancho llega a 5rem, que
     es donde el peso 200 realmente se luce. El letter-spacing NO puede ir
     en el shorthand `font:` — se aplica aparte en style.css. */
  --text-display: 200 clamp(2.75rem, 5.5vw, 5rem)/1.06 var(--font-display);
  --text-h1:      200 clamp(2.25rem, 4.2vw, 3.5rem)/1.1 var(--font-display);
  --text-h2:      300 clamp(1.75rem, 2.8vw, 2.5rem)/1.16 var(--font-display);
  --text-h3:      500 1.25rem/1.4 var(--font-display);
  --text-body:    400 1.0625rem/1.75 var(--font-body);
  --text-lede:    300 clamp(1.125rem, 1.5vw, 1.3125rem)/1.6 var(--font-body);
  --text-small:   400 0.875rem/1.6 var(--font-body);
  /* El cuerpo del rotulo sale a un token propio para poder subirlo en
     telefonos sin tocar cada regla: 11px en mayusculas y con 0.22em de
     interletrado se lee bien en escritorio, pero en un telefono queda al
     limite. La media query del final lo lleva a 12px por debajo de 640px. */
  --text-label-size: 0.6875rem;
  --text-label:   500 var(--text-label-size)/1 var(--font-body);

  /* Tracking. El display va negativo (grande + light necesita cerrar),
     los labels van muy abiertos (es lo que da el aire de marca premium). */
  --tracking-display: -0.025em;
  --tracking-h2: -0.015em;
  --tracking-label: 0.22em;

  /* ---- spacing ------------------------------------------------------ */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;

  /* ---- radius ------------------------------------------------------- */
  /* Casi a cero. La esquina blanda era lo más "consumer" del sistema
     anterior; la esquina viva es lo que comparten los sitios de
     arquitectura. --radius-full se conserva sólo para elementos
     genuinamente circulares (dots, badges redondos), ya no para botones. */
  --radius-sm: 0px; --radius-md: 2px; --radius-lg: 2px; --radius-full: 9999px;

  /* ---- elevation ---------------------------------------------------- */
  /* El lujo no usa sombra, usa hairline y espacio. Quedan mínimas para no
     romper componentes existentes que las referencian. */
  --shadow-sm: none;
  --shadow-md: 0 18px 48px rgba(26,24,24,0.10);
  --shadow-lg: 0 32px 80px rgba(26,24,24,0.16);

  /* ---- motion ------------------------------------------------------- */
  /* Más lento y más suave que antes: el movimiento apurado lee barato. */
  --motion-duration: 520ms;
  --motion-easing: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- layout ------------------------------------------------------- */
  --content-max-width: 1240px;
  --content-max-width-wide: 1560px;
  /* Medida de lectura. Ningún párrafo debería pasar de acá. */
  --measure: 62ch;
  --measure-narrow: 46ch;
  /* Ritmo de sección: era 96px fijo. Ahora respira y escala. */
/* El ritmo se baja de 9.5rem a 7rem. Cada seccion aporta su padding arriba y
     abajo, asi que en cada borde el aire se duplica: con 9.5rem daban 304px
     entre el final de un bloque y el titulo del siguiente —el 42% de una
     pantalla de 720px sin nada. Con 7rem quedan ~214px, que sigue siendo
     generoso para el tono del sitio pero deja de leerse como vacio. */
  --section-rhythm: clamp(3.5rem, 7vw, 7rem);
  --section-rhythm-tight: clamp(2.5rem, 4.5vw, 4rem);
}