/* ==========================================================================
   Costa Sistemas — Design tokens (v2, 2026-10-07)
   Dirección: web de seguridad comercial tipo Verisure/Yale — fotográfica,
   cálida y redondeada. Rojo de marca #990000 para CTA y acentos puntuales.
   ========================================================================== */

:root {
  /* — Marca — */
  --brand:        #990000;
  --brand-strong: #7a0000;
  --brand-soft:   #f8ecec;
  --on-brand:     #ffffff;

  /* — Neutros cálidos — */
  --ink:      #1d1d1f;
  --ink-soft: #55565a;
  --ink-mute: #6b6c70;
  --canvas:   #ffffff;
  --paper:    #ffffff;
  --surface:  #f5f3f0;   /* paneles y tarjetas suaves */
  --surface-2:#ebe8e3;
  --mist:     #ebe8e3;
  --hairline: #e3e0db;
  --ok:       #2e7d4f;   /* checks de confianza */

  /* — Tipografía — */
  --font-display: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    var(--font-body); /* sin etiquetas monoespaciadas en esta dirección */

  --fs-mega:    clamp(2.3rem, 1.4rem + 3.6vw, 4.4rem);
  --fs-display: clamp(2rem, 1.3rem + 2.8vw, 3.6rem);
  --fs-h2:      clamp(1.7rem, 1.2rem + 1.7vw, 2.6rem);
  --fs-h3:      clamp(1.15rem, 1rem + .5vw, 1.4rem);
  --fs-lead:    clamp(1.08rem, 1rem + .4vw, 1.3rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.94rem;
  --fs-label:   0.86rem;
  --track-label:0;

  /* — Espaciado — */
  --space-4:4px; --space-8:8px; --space-12:12px; --space-16:16px; --space-20:20px;
  --space-24:24px; --space-32:32px; --space-40:40px; --space-56:56px; --space-72:72px;
  --space-96:96px; --space-128:128px;

  /* — Radios — */
  --radius-button: 999px;
  --radius-card:   20px;
  --radius-panel:  32px;
  --radius-media:  24px;
  --radius-pill:   999px;

  /* — Sombras suaves — */
  --shadow-sm: 0 1px 2px rgba(29,29,31,.05), 0 4px 14px rgba(29,29,31,.05);
  --shadow-md: 0 2px 6px rgba(29,29,31,.05), 0 14px 36px rgba(29,29,31,.08);

  /* — Layout — */
  --content: 1240px;
  --gutter:  clamp(16px, 4vw, 40px);
  --section: clamp(56px, 7vw, 104px);

  --border: 1px solid var(--hairline);
  --ease: cubic-bezier(.2,.7,.2,1);
}