/* ============================================================
   NMS ENGINE — DESIGN TOKENS
   Fuente única de verdad para color, tipografía y espaciado.
   ============================================================ */

:root {
  /* Color — paleta técnica. --c-primary es el único punto de override
     para theming por sitio (ver inc/customizer.php: se inyecta inline
     por wp_head en cada instalación que use este tema). */
  --c-primary: #0041B5;        /* azul de marca — override-able por Customizer */
  --c-primary-hover: #0A52D6;
  --c-ink: #0B0E14;            /* negro suave, texto principal */
  --c-ink-soft: #4B5568;       /* texto secundario */
  --c-line: #E3E7EF;           /* bordes, divisores */
  --c-surface: #F6F8FC;        /* fondo secciones alternas, claro */
  --c-white: #FFFFFF;
  --c-success: #0F9D58;        /* usado solo en checks "free means free" */

  /* Graphite — superficie oscura para el hero (lenguaje "blueprint") */
  --c-graphite: #0A0D12;
  --c-graphite-line: rgba(255, 255, 255, 0.09);
  --c-graphite-text: rgba(255, 255, 255, 0.68);

  /* Blueprint accent — retícula + anotaciones técnicas (signature element) */
  --c-grid-line: rgba(0, 65, 181, 0.14);
  --c-grid-line-dark: rgba(90, 150, 255, 0.16);
  --c-blueprint-accent: #5AA5FF; /* líneas/anotaciones sobre fondo oscuro */

  /* Tipografía */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.75rem;
  --fs-4xl: 3.75rem;

  --lh-tight: 1.1;
  --lh-normal: 1.55;

  /* Espaciado — escala base 4px */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-8: 48px;
  --sp-10: 64px;
  --sp-12: 96px;
  --sp-16: 128px;

  /* Layout */
  --radius-sm: 6px;
  --radius-md: 10px;
  --container-max: 1200px;
  --header-h: 72px;

  /* Motion — sutil, respeta reduced-motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-base: 260ms;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--c-ink);
  background: var(--c-white);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-4);
  font-weight: 600;
  letter-spacing: -0.01em;
}
p { margin: 0 0 var(--sp-4); color: var(--c-ink-soft); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}
:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-primary);
}