/**
 * DrewSoft MX — tokens de diseño
 * Paleta sobria: grafito / azul noche + acento metálico (familia AI-MX).
 * Prefijo dsmx- para convivir con Squarespace u otros CMS.
 */

:root,
.dsmx-site {
  --dsmx-night: #0c1219;
  --dsmx-graphite: #141b24;
  --dsmx-slate: #1c2530;
  --dsmx-line: rgba(196, 163, 90, 0.28);
  --dsmx-line-soft: rgba(232, 236, 242, 0.1);

  --dsmx-paper: #f4f1ea;
  --dsmx-paper-deep: #ebe6db;
  --dsmx-ink: #161c24;
  --dsmx-ink-soft: #3d4654;

  --dsmx-gold: #c4a35a;
  --dsmx-gold-bright: #d4af37;
  --dsmx-gold-deep: #8f7433;
  --dsmx-champagne: #e6d5a8;

  --dsmx-mist: #c3cad4;
  --dsmx-muted: #8b94a1;
  --dsmx-white: #fbfaf7;

  --dsmx-font-display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --dsmx-font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  --dsmx-text-xs: 0.8125rem;
  --dsmx-text-sm: 0.9375rem;
  --dsmx-text-md: 1.0625rem;
  --dsmx-text-lg: clamp(1.125rem, 1rem + 0.55vw, 1.25rem);
  --dsmx-text-xl: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  --dsmx-text-2xl: clamp(1.75rem, 1.2rem + 2vw, 2.35rem);
  --dsmx-text-3xl: clamp(2.1rem, 1.35rem + 3vw, 3.15rem);

  --dsmx-leading-tight: 1.18;
  --dsmx-leading-snug: 1.35;
  --dsmx-leading-body: 1.65;

  --dsmx-space-1: 0.25rem;
  --dsmx-space-2: 0.5rem;
  --dsmx-space-3: 0.75rem;
  --dsmx-space-4: 1rem;
  --dsmx-space-5: 1.5rem;
  --dsmx-space-6: 2rem;
  --dsmx-space-7: 3rem;
  --dsmx-space-8: 4.5rem;
  --dsmx-space-9: 6.5rem;

  --dsmx-wrap: 70rem;
  --dsmx-narrow: 42rem;
  --dsmx-radius: 0.75rem;
  --dsmx-radius-sm: 0.45rem;
  --dsmx-header-h: 4.25rem;
  --dsmx-shadow: 0 18px 40px rgba(8, 12, 18, 0.28);
  --dsmx-ease: 180ms ease;
}

.dsmx-site {
  color: var(--dsmx-mist);
  background: var(--dsmx-night);
  font-family: var(--dsmx-font-body);
  font-size: var(--dsmx-text-md);
  line-height: var(--dsmx-leading-body);
  font-weight: 400;
}