/* DATAXIA SOLUTIONS — tokens de marca.
   Fuente: proyecto "DATAXIA SOLUTIONS" de Claude Design (8939c58b-88d5-41ae-8891-ce5a295e0b81),
   "Logo Dataxia.html" (brand system v3.0) + "Servicios DATAXIA.html". Sincronizado 19/10/2026.
   No renombrar variables: los componentes de web/template dependen de estos nombres. */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&family=DM+Sans:wght@400;700&display=swap");

:root {
  /* Paleta de marca (5 swatches del brand system) */
  --dx-navy: #142849;        /* Navy · primary */
  --dx-navy-2: #1B335C;      /* Navy 2 */
  --dx-navy-deep: #0E1D38;   /* fondo de secciones oscuras / tinta */
  --dx-teal: #1FB5A1;        /* Teal · accent (sobre claro) */
  --dx-teal-2: #2DD4BF;      /* Teal 2 (sobre oscuro) */
  --dx-paper: #F5F5F2;       /* Paper */
  --dx-paper-2: #ECECE6;
  --dx-white: #FFFFFF;

  /* Derivados de uso */
  --dx-teal-ink: #0B7A6C;    /* teal para TEXTO pequeño sobre claro (AA); #1FB5A1 no llega a 4.5:1 */
  --dx-ink: #0E1D38;
  --dx-ink-dim: #5A6B86;
  --dx-ink-faint: #A9B2C2;
  --dx-on-dark: #FFFFFF;
  --dx-on-dark-dim: #A9B2C2;
  --dx-on-dark-body: #D4DCE8;
  --dx-line: rgba(14, 29, 56, .10);
  --dx-line-strong: rgba(14, 29, 56, .20);
  --dx-line-dark: rgba(255, 255, 255, .10);
  --dx-danger: #D64545;
  --dx-danger-on-dark: #FF8A8A;

  /* Tipografía: Nunito (titulares y wordmark), Inter (texto), JetBrains Mono (rótulos/eyebrows) */
  --dx-font-display: "Nunito", system-ui, sans-serif;
  --dx-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dx-font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --dx-fs-hero: clamp(2.8rem, 8vw, 6.5rem);
  --dx-fs-h2: clamp(2rem, 4.2vw, 3.4rem);
  --dx-fs-h3: 1.45rem;
  --dx-fs-body: 1.05rem;
  --dx-fs-small: .875rem;
  --dx-fs-eyebrow: .8rem;

  /* Forma y espacio */
  --dx-radius: 10px;
  --dx-radius-sm: 8px;
  --dx-radius-mark: 22%;     /* caja del símbolo */
  --dx-shadow: 0 18px 40px rgba(14, 29, 56, .18);
  --dx-max-width: 1200px;
  --dx-gutter: clamp(16px, 4vw, 40px);
  --dx-section-y: clamp(72px, 10vw, 128px);
}