/* ============================================================
   DATANOMADLAB — DESIGN TOKENS v1.0
   Fuente de verdad del sistema. Nunca usar valores hardcodeados
   en componentes: siempre referir a estas variables.
   ============================================================ */

:root {
  /* ---------- COLOR · Marca ---------- */
  --dnl-ink:        #0F1D1B;  /* texto principal, fondos oscuros */
  --dnl-deep:       #0C4A40;  /* primario: botones, enlaces, chevrons */
  --dnl-paper:      #FBFBF9;  /* fondo claro por defecto (nunca #FFF en secciones) */
  --dnl-mist:       #E9EFEC;  /* superficies secundarias, fondos de chips */
  --dnl-line:       #D5DED9;  /* bordes y separadores */
  --dnl-mint:       #1DB584;  /* acento vivo — SOLO sobre fondos oscuros */
  --dnl-mint-dark:  #0E7A58;  /* acento sobre fondo claro (contraste AA) */
  --dnl-amber:      #E8A33D;  /* EL HALLAZGO — reservado a valor encontrado */
  --dnl-amber-ink:  #8A5A10;  /* texto ámbar sobre claro (contraste AA) */
  --dnl-amber-soft: #F9EDD8;  /* fondo suave para destacar hallazgos */
  --dnl-muted:      #5C6E69;  /* texto secundario */
  --dnl-white:      #FFFFFF;  /* solo tarjetas sobre paper y texto sobre oscuro */

  /* ---------- COLOR · Semánticos ---------- */
  --dnl-success:      var(--dnl-mint-dark);
  --dnl-success-soft: #DDF2E9;
  --dnl-warning:      var(--dnl-amber-ink);
  --dnl-warning-soft: var(--dnl-amber-soft);
  --dnl-danger:       #B5452F;
  --dnl-danger-soft:  #F7E4DF;
  --dnl-info:         var(--dnl-deep);
  --dnl-info-soft:    var(--dnl-mist);

  /* ---------- COLOR · Modo panel oscuro (secciones ink) ---------- */
  --dnl-dark-bg:      var(--dnl-ink);
  --dnl-dark-surface: #16312C;
  --dnl-dark-line:    #24423C;
  --dnl-dark-text:    var(--dnl-paper);
  --dnl-dark-muted:   #8AA29B;

  /* ---------- TIPOGRAFÍA ---------- */
  --dnl-font-display: 'Archivo', system-ui, sans-serif;        /* 700–800 */
  --dnl-font-sans:    'IBM Plex Sans', system-ui, sans-serif;  /* 400–600 */
  --dnl-font-mono:    'IBM Plex Mono', ui-monospace, monospace;/* datos y evidencia */

  /* Escala tipográfica (mobile-first; los display escalan con clamp) */
  --dnl-text-display: clamp(2.5rem, 5vw + 1rem, 4rem);   /* héroes */
  --dnl-text-h1:      clamp(2rem, 3vw + 1rem, 2.75rem);
  --dnl-text-h2:      clamp(1.5rem, 2vw + .75rem, 2rem);
  --dnl-text-h3:      1.25rem;
  --dnl-text-lg:      1.125rem;
  --dnl-text-base:    1rem;
  --dnl-text-sm:      .875rem;
  --dnl-text-xs:      .75rem;
  --dnl-text-cifra:   clamp(2.25rem, 4vw + 1rem, 3.5rem); /* cifras de dinero */

  --dnl-leading-tight: 1.08;   /* display/h1 */
  --dnl-leading-snug:  1.25;   /* h2/h3 */
  --dnl-leading-body:  1.6;    /* párrafos */
  --dnl-tracking-display: -0.02em;
  --dnl-tracking-mono-label: 0.08em; /* etiquetas mono en MAYÚSCULAS */

  /* ---------- ESPACIADO (base 4px) ---------- */
  --dnl-space-1: 4px;   --dnl-space-2: 8px;   --dnl-space-3: 12px;
  --dnl-space-4: 16px;  --dnl-space-5: 20px;  --dnl-space-6: 24px;
  --dnl-space-8: 32px;  --dnl-space-10: 40px; --dnl-space-12: 48px;
  --dnl-space-16: 64px; --dnl-space-20: 80px; --dnl-space-24: 96px;
  --dnl-section-y: clamp(64px, 10vw, 112px);  /* padding vertical de secciones */
  --dnl-container: 1120px;                    /* ancho máximo de contenido */

  /* ---------- BORDES Y RADIOS ---------- */
  --dnl-radius-sm:   6px;    /* chips, badges */
  --dnl-radius-md:   10px;   /* botones, inputs */
  --dnl-radius-lg:   14px;   /* tarjetas */
  --dnl-radius-xl:   20px;   /* paneles, imágenes */
  --dnl-radius-pill: 999px;
  --dnl-border-w:    1px;
  --dnl-border-w-accent: 3px; /* borde izquierdo de hallazgos */

  /* ---------- ELEVACIÓN (plana y sutil — sin glassmorphism) ---------- */
  --dnl-shadow-sm: 0 1px 2px rgba(15, 29, 27, .06);
  --dnl-shadow-md: 0 2px 8px rgba(15, 29, 27, .08);
  --dnl-shadow-lg: 0 8px 24px rgba(15, 29, 27, .10);

  /* ---------- MOTION ---------- */
  --dnl-ease:        cubic-bezier(.2, .8, .2, 1);
  --dnl-duration-fast: 150ms;  /* hovers */
  --dnl-duration-base: 250ms;  /* transiciones de estado */
  --dnl-duration-slow: 400ms;  /* entradas de sección */

  /* ---------- FOCO (accesibilidad) ---------- */
  --dnl-focus-ring: 0 0 0 3px rgba(14, 122, 88, .35);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dnl-duration-fast: 0ms;
    --dnl-duration-base: 0ms;
    --dnl-duration-slow: 0ms;
  }
}