/* ============================================================
   Nexvelia · Design tokens
   Single source of truth for colors, type, spacing, radius.
   ============================================================ */

:root {
  /* Color · Tinta (estructura) */
  --c-tinta-900: #0F1E3D;
  --c-tinta-700: #1E3A5F;
  --c-tinta-500: #3B5A87;
  --c-tinta-300: #93A5C0;
  --c-tinta-100: #DDE3EE;

  /* Color · Azul (nodo / acento) */
  --c-azul-600: #1D4ED8;
  --c-azul-500: #2563EB;
  --c-azul-400: #3B82F6;
  --c-azul-300: #60A5FA;
  --c-azul-200: #93C5FD;

  /* Color · Arena (fondos) */
  --c-arena-100: #FAF7F0;
  --c-arena-200: #F5F1E8;
  --c-arena-300: #E8E1D0;

  /* Color · UI funcional */
  --c-gris: #6B7280;
  --c-gris-soft: #9CA3AF;
  --c-success: #047857;
  --c-error: #B91C1C;

  /* Color · Tokens semánticos */
  --bg: var(--c-arena-100);
  --bg-card: var(--c-arena-200);
  --bg-dark: var(--c-tinta-900);
  --ink: var(--c-tinta-900);
  --ink-muted: var(--c-gris);
  --line: var(--c-arena-300);
  --accent: var(--c-azul-500);
  --accent-hover: var(--c-azul-600);

  /* Tipografía */
  --font-display: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* Tamaños tipográficos (escala modular 1.25) */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-56: 3.5rem;
  --fs-64: 4rem;
  --fs-72: 4.5rem;

  /* Espaciado (escala 4px) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;
  --s-32: 8rem;

  /* Border radius */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 24px;

  /* Sombras */
  --shadow-sm: 0 2px 8px rgba(15,30,61,0.05);
  --shadow-md: 0 8px 24px rgba(15,30,61,0.08);
  --shadow-lg: 0 24px 60px rgba(15,30,61,0.12);

  /* Anchura de contenido */
  --w-container: 1180px;
  --w-narrow: 760px;
  --w-prose: 680px;

  /* Transiciones */
  --t-fast: 150ms ease;
  --t-base: 220ms ease;
  --t-slow: 400ms ease;

  /* Focus visible */
  --focus-ring: 0 0 0 3px var(--c-azul-300);
}