/* ============================================================================
   tokens.css — Sistema de Diseño TWEAKEO · FUENTE ÚNICA DE VERDAD
   Azul corporativo + Montserrat + slate · Moderno funcional
   ----------------------------------------------------------------------------
   CANÓNICO. No crear versiones paralelas. Cambios → CHANGELOG abajo + semver.
   Siguiente editor: lee GOBERNANZA_DISENO.md antes de tocar este fichero.

   Arquitectura:
     Capa 1 · PRIMITIVOS — valores raw (paleta, escala, espaciado)
     Capa 2 · SEMÁNTICOS — función → primitivo, claro/oscuro
     Los COMPONENTES consumen SOLO tokens semánticos (--color-*, --space-*, etc.)
     Los primitivos (--c-*) son la despensa: nunca se usan directo en componentes.

   Temas:
     Claro = :root (por defecto)
     Oscuro = [data-theme="dark"] o @media (prefers-color-scheme: dark)
     Si hay data-theme explícito, gana sobre prefers-color-scheme.

   Contraste: WCAG AA verificado en todas las combinaciones superficie/texto.

   CHANGELOG:
     v0.3.0 (2026-07-15) — --c-amber-400, tokens --color-chart-* (ok/warn/down/idle/
                            node-bg/text-active/hub-accent) para migrar hardcodes JS
                            del dashboard. CSS hardcodes #020617/#ffffff → on-accent-solid.
     v0.2.0 (2026-07-15) — --color-accent-text, --color-notice/notice-bg/notice-text,
                            --c-gold-500/dim, --color-on-accent-solid,
                            semánticos estado oscuro (emerald/rose/alpha overlays).
                            Archivados tokens-azul-v01, tokens-v01, tokens-preview-azul,
                            tokens-rojo-legacy, tokens-v2-azul-prod, tokens-v2.1-azul
                            a dominios/branding/archive/.
     v0.1.0 (2026-07-10) — Primer sistema azul: primitivos + semánticos claro/oscuro.
                            Migración desde rojo neo-brutalismo.
   ========================================================================== */

/* ============================================================================
   CAPA 1 · PRIMITIVOS — Valores raw independientes del tema
   ========================================================================== */
:root {
  /* ── Paleta Azul Corporativa (50→950) ───────────────────────────────── */
  --c-blue-50:  #EFF6FF;
  --c-blue-100: #DBEAFE;
  --c-blue-200: #BFDBFE;
  --c-blue-300: #93C5FD;
  --c-blue-400: #60A5FA;
  --c-blue-500: #3B82F6;  /* MARCA — botones, enlaces, acentos (solo large/bold en texto) */
  --c-blue-600: #2563EB;  /* hover de acento, texto de enlace en claro (4.94 AA) */
  --c-blue-700: #1D4ED8;  /* texto acento en claro (6.41 AA) · relleno botón primario */
  --c-blue-800: #1E40AF;  /* hover/active profundo */
  --c-blue-900: #1E3A8A;  /* fondos azules oscuros */
  --c-blue-950: #172554;  /* casi-negro azulado */

  /* ── Neutros Slate (grises fríos) ───────────────────────────────────── */
  --c-slate-50:  #F8FAFC;  /* fondo página claro, superficie elevada */
  --c-slate-100: #F1F5F9;  /* fondo alternativo, bg sutil */
  --c-slate-200: #E2E8F0;  /* fondo hundido, bg seleccionado */
  --c-slate-300: #CBD5E1;  /* borde sutil, decorativo (no texto: 2.45 sobre 50) */
  --c-slate-400: #94A3B8;  /* texto disabled/decorativo claro (2.45 sobre 50), texto subtle oscuro (7.87 AA) */
  --c-slate-500: #64748B;  /* borde visible claro (4.55 sobre 50) · borde oscuro (4.24 sobre 950) */
  --c-slate-550: #526077;  /* texto muted claro (5.81 sobre 100 AA) — corregido para pasar AA en todas las sup. */
  --c-slate-600: #475569;  /* texto secundario claro */
  --c-slate-700: #334155;  /* texto cuerpo claro (9.90 AA) */
  --c-slate-800: #1E293B;  /* headings claro */
  --c-slate-900: #0F172A;  /* tinta principal claro (17.06 AAA) */
  --c-slate-925: #111827;  /* superficie oscura base — card en dark */
  --c-slate-950: #020617;  /* fondo página oscuro */

  /* ── Semánticos de estado ───────────────────────────────────────────── */
  --c-green-600: #059669;
  --c-green-700: #047857;  /* texto success claro (5.24 AA) */
  --c-green-400: #34D399;  /* texto success oscuro */
  --c-green-wash: #D1FAE5; /* bg success claro */

  --c-amber-600: #D97706;
  --c-amber-700: #B45309;  /* texto warning claro (4.80 AA) */
  --c-amber-300: #FCD34D;  /* texto warning oscuro */
  --c-amber-wash: #FEF3C7; /* bg warning claro */

  --c-red-500: #EF4444;
  --c-red-600: #DC2626;    /* texto danger claro (4.62 AA) */
  --c-red-700: #B91C1C;    /* texto danger claro alternativo (6.18 AA) */
  --c-red-400: #F87171;    /* texto danger oscuro */
  --c-red-wash: #FEE2E2;   /* bg danger claro */

  /* ── Emerald (success · verde esmeralda per BRAND.md) ───────────────── */
  --c-emerald-500: #10B981; /* success text/dot en oscuro */
  --c-emerald-dim: rgba(16, 185, 129, 0.15); /* success bg oscuro */

  /* ── Rose (danger · "rosa/rojo apagado" per BRAND.md) ───────────────── */
  --c-rose-500: #F43F5E;   /* danger relleno/dot */
  --c-rose-400: #FB7185;   /* danger texto oscuro: 5.77 s/dim · 6.63 s/card ✅ AA */
  --c-rose-dim:  rgba(244, 63, 94, 0.15);    /* danger bg oscuro */

  /* ── Amber saturado (warning visible en oscuro) ─────────────────────── */
  --c-amber-500: #F59E0B;  /* warning texto en oscuro */
  --c-amber-dim:  rgba(245, 158, 11, 0.15);  /* warning bg oscuro */

  /* ── Gold (notice · acceso restringido, dorado) ─────────────────────── */
  --c-gold-500:  #D9A800;                    /* dorado puro — fondo badge en claro (8.12 AAA s/slate-900) */
  --c-gold-dim:  rgba(217, 168, 0, 0.15);   /* overlay dorado — bg badge en oscuro */
  --c-amber-400: #F59E0B;                    /* amber — estado aviso en charts */

  /* ── Alpha overlays (accent/info dim en oscuro) ──────────────────────── */
  --c-blue-dim:  rgba(59, 130, 246, 0.15);   /* info/accent bg oscuro */

  /* ── Tipografía: familias ────────────────────────────────────────────── */
  --font-body:    "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", "Fira Code", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ── Tipografía: escala (base 16px) ──────────────────────────────────── */
  --text-2xs:   0.6875rem; /* 11px — mínimo absoluto (solo mono/MAYÚS/tracking) */
  --text-xs:    0.75rem;   /* 12px — labels, badges, metadata */
  --text-sm:    0.875rem;  /* 14px — UI densa, secondary text */
  --text-base:  1rem;      /* 16px — CUERPO por defecto */
  --text-md:    1.125rem;  /* 18px — lead, intro */
  --text-lg:    1.25rem;   /* 20px — h4, destacados */
  --text-xl:    1.5rem;    /* 24px — h3 */
  --text-2xl:   1.875rem;  /* 30px — h2 */
  --text-3xl:   2.25rem;   /* 36px — h1 */
  --text-4xl:   3rem;      /* 48px — display */
  --text-display: clamp(2.5rem, 6vw, 4.5rem); /* 40→72px — hero fluido */

  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tighter: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-mono:    0.15em;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold: 800;

  /* ── Espaciado: escala 4px ───────────────────────────────────────────── */
  --space-0:  0;
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px — PADDING BASE de componentes */
  --space-5:  1.5rem;   /* 24px */
  --space-6:  2rem;     /* 32px */
  --space-7:  3rem;     /* 48px */
  --space-8:  4rem;     /* 64px */
  --space-9:  6rem;     /* 96px */
  --space-10: 8rem;     /* 128px */

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --container-max:   72rem;   /* 1152px */
  --container-prose: 42rem;   /* ~672px / ~70ch */
  --gutter:    var(--space-4);   /* 16px móvil */
  --gutter-lg: var(--space-6);   /* 32px desktop */

  /* ── Radios ──────────────────────────────────────────────────────────── */
  --radius-0:    0;
  --radius-sm:   0.25rem;  /* 4px — inputs, cards sutiles */
  --radius-md:   0.5rem;   /* 8px — cards, modales, paneles */
  --radius-lg:   0.75rem;  /* 12px — containers grandes */
  --radius-xl:   1rem;     /* 16px — modales grandes */
  --radius-pill: 999px;    /* toggles, chips, badges redondos */
  --radius-full: 50%;      /* avatares, indicadores */

  /* ── Sombras (modernas, no neo-brutalistas) ──────────────────────────── */
  --shadow-0: none;
  --shadow-1: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-2: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-3: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-4: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-5: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* ── Movimiento ──────────────────────────────────────────────────────── */
  --dur-instant: 80ms;
  --dur-fast:    150ms;
  --dur:         250ms;
  --dur-slow:    400ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index ─────────────────────────────────────────────────────────── */
  --z-base:     0;
  --z-dropdown: 1000;
  --z-sticky:   1100;
  --z-overlay:  1300;
  --z-modal:    1400;
  --z-toast:    1600;
}

/* ============================================================================
   CAPA 2 · SEMÁNTICOS — TEMA CLARO (por defecto)
   ========================================================================== */
:root {
  /* ── Superficies ─────────────────────────────────────────────────────── */
  --color-bg:              var(--c-slate-50);
  --color-surface:         var(--c-slate-50);   /* coincide con bg en claro (flat) */
  --color-surface-raised:  #FFFFFF;             /* tarjeta elevada: blanco puro */
  --color-surface-overlay: #FFFFFF;
  --color-surface-subtle:  var(--c-slate-100);  /* fondo hundido/sección */

  /* ── Texto ───────────────────────────────────────────────────────────── */
  --color-text:            var(--c-slate-900);  /* 17.06 AAA */
  --color-heading:         var(--c-slate-900);
  --color-text-muted:      var(--c-slate-550);  /* 5.81 AA corregido (pasa sobre 50 y 100) */
  --color-text-subtle:     var(--c-slate-500);  /* 4.55 AA (solo sobre slate-50; cuidado con slate-100) */
  --color-text-on-brand:   #FFFFFF;             /* blanco sobre azul (6.70 AA con blue-700) */
  --color-link:            var(--c-blue-600);   /* 4.94 AA */
  --color-link-hover:      var(--c-blue-700);

  /* ── Bordes ──────────────────────────────────────────────────────────── */
  --color-border:          var(--c-slate-300);  /* sutil (2.45: no pasa 1.4.11 — es intencional, borde decorativo) */
  --color-border-visible:  var(--c-slate-500);  /* 4.55 ≥3:1 — borde funcional que SÍ se ve */
  --color-border-strong:   var(--c-slate-700);  /* borde marcado */
  --color-focus-ring:      var(--c-blue-500);   /* 3.52 ≥3:1 — visible, distintivo */

  /* ── Marca / Acento ──────────────────────────────────────────────────── */
  --color-brand:           var(--c-blue-500);
  --color-brand-strong:    var(--c-blue-700);
  --color-brand-subtle:    var(--c-blue-50);

  /* Botón/accent primario: blue-700 + blanco = 6.70 AA ✓ */
  --color-accent:          var(--c-blue-600);    /* texto acento */
  --color-accent-hover:    var(--c-blue-700);
  --color-accent-active:   var(--c-blue-800);
  --color-accent-solid:    var(--c-blue-600);    /* relleno botón primario */
  --color-accent-solid-hover: var(--c-blue-700);
  --color-accent-subtle:   var(--c-blue-50);

  /* ── Estados ─────────────────────────────────────────────────────────── */
  --color-success:       var(--c-green-700);
  --color-success-bg:    var(--c-green-wash);
  --color-success-text:  var(--c-green-700);

  --color-warning:       var(--c-amber-700);
  --color-warning-bg:    var(--c-amber-wash);
  --color-warning-text:  var(--c-amber-700);

  --color-danger:        var(--c-red-600);
  --color-danger-bg:     var(--c-red-wash);
  --color-danger-text:   var(--c-red-600);

  --color-info:          var(--c-blue-600);
  --color-info-bg:       var(--c-blue-50);
  --color-info-text:     var(--c-blue-600);

  /* notice: badges de acceso restringido — dorado puro de fondo */
  --color-notice:      var(--c-gold-500);   /* fondo badge notice en claro */
  --color-notice-bg:   var(--c-gold-500);
  --color-notice-text: var(--c-slate-900);  /* 8.12 AAA sobre gold-500 */

  /* ── Bordes extra ───────────────────────────────────────────────────── */
  --color-border-subtle:   var(--c-slate-200);   /* borde más tenue que border */

  /* ── Acento: aliases adicionales ────────────────────────────────────── */
  --color-accent-text:     var(--c-blue-600);    /* alias texto-acento en claro */
  --color-on-accent-solid: #FFFFFF;              /* texto sobre relleno sólido de marca */

  /* ── Interacción ─────────────────────────────────────────────────────── */
  --color-hover-overlay:  rgb(0 0 0 / 0.05);
  --color-selected-bg:    var(--c-blue-50);
  --color-disabled-bg:    var(--c-slate-100);
  --color-disabled-text:  var(--c-slate-400);    /* no pasa AA — es intencional en disabled */

  /* ── Chart / Visualización ───────────────────────────────────────────── */
  /* Consumidos por JS via getComputedStyle al renderizar SVG/charts.       */
  /* El mapa SVG renderiza siempre sobre fondo oscuro; sin override dark.   */
  --color-chart-ok:          var(--c-emerald-500); /* #10B981 — activo/ok */
  --color-chart-warn:        var(--c-amber-400);   /* #F59E0B — aviso/pendiente */
  --color-chart-down:        var(--c-rose-500);    /* #F43F5E — caído */
  --color-chart-idle:        var(--c-slate-400);   /* #94A3B8 — reposo */
  --color-chart-node-bg:     var(--c-slate-800);   /* #1E293B — fondo nodo SVG */
  --color-chart-text-active: var(--c-slate-100);   /* #F1F5F9 — etiqueta nodo activo */
  --color-chart-hub-accent:  var(--c-blue-500);    /* #3B82F6 — anillo/texto hub */
}

/* ============================================================================
   CAPA 2 · SEMÁNTICOS — TEMA OSCURO
   ========================================================================== */
:root[data-theme="dark"] {
  /* ── Superficies ─────────────────────────────────────────────────────── */
  --color-bg:              var(--c-slate-950);   /* #020617 — fondo pelado */
  --color-surface:         var(--c-slate-925);   /* #111827 — card sobre bg (dif. sutil, se distingue con borde) */
  --color-surface-raised:  var(--c-slate-800);   /* #1E293B — card elevada */
  --color-surface-overlay: var(--c-slate-800);
  --color-surface-subtle:  var(--c-slate-925);

  /* ── Texto ───────────────────────────────────────────────────────────── */
  --color-text:            var(--c-slate-100);   /* 18.41 AAA */
  --color-heading:         var(--c-slate-100);
  --color-text-muted:      var(--c-slate-400);   /* 7.87 AA */
  --color-text-subtle:     var(--c-slate-500);   /* 4.24 AA */
  --color-text-on-brand:   #FFFFFF;
  --color-link:            var(--c-blue-300);    /* 11.19 AAA */
  --color-link-hover:      var(--c-blue-200);

  /* ── Bordes ──────────────────────────────────────────────────────────── */
  --color-border:          var(--c-slate-500);   /* 4.24 ≥3:1 — borde visible en oscuro */
  --color-border-subtle:   var(--c-slate-800);   /* borde muy tenue, separador de componentes */
  --color-border-visible:  var(--c-slate-400);   /* 7.87 ≥3:1 — más visible */
  --color-border-strong:   var(--c-slate-300);
  --color-focus-ring:      var(--c-blue-400);    /* 7.93 ≥3:1 AAA mismo */

  /* ── Marca / Acento ──────────────────────────────────────────────────── */
  --color-brand:           var(--c-blue-500);
  --color-brand-strong:    var(--c-blue-400);
  --color-brand-subtle:    var(--c-blue-950);

  --color-accent:          var(--c-blue-400);    /* 7.93 AA — texto acento en oscuro */
  --color-accent-text:     var(--c-blue-400);    /* alias: texto acento */
  --color-accent-hover:    var(--c-blue-300);
  --color-accent-active:   var(--c-blue-200);
  --color-accent-solid:    var(--c-blue-600);    /* mismo botón que en claro */
  --color-accent-solid-hover: var(--c-blue-500);
  --color-accent-subtle:   var(--c-blue-dim);    /* rgba overlay — mejor que blue-950 sólido */
  --color-on-accent-solid: #FFFFFF;

  /* ── Estados — BRAND.md: esmeralda, ámbar, rosa/rojo apagado ─────────── */
  --color-success:       var(--c-emerald-500);   /* verde esmeralda (BRAND.md) */
  --color-success-bg:    var(--c-emerald-dim);   /* overlay rgba — no fondo gris plano */
  --color-success-text:  var(--c-emerald-500);

  --color-warning:       var(--c-amber-500);     /* ámbar saturado (visible en oscuro) */
  --color-warning-bg:    var(--c-amber-dim);
  --color-warning-text:  var(--c-amber-500);

  --color-danger:        var(--c-rose-400);      /* rosa/rojo apagado (BRAND.md) · 5.77 AA */
  --color-danger-bg:     var(--c-rose-dim);
  --color-danger-text:   var(--c-rose-400);

  --color-info:          var(--c-blue-400);
  --color-info-bg:       var(--c-blue-dim);      /* rgba overlay — coherente con resto */
  --color-info-text:     var(--c-blue-400);

  /* notice: badges de acceso restringido — overlay + texto dorado en oscuro */
  --color-notice:      var(--c-gold-dim);    /* fondo badge notice en oscuro */
  --color-notice-bg:   var(--c-gold-dim);
  --color-notice-text: var(--c-gold-500);   /* 9.39 AAA sobre slate-950 */

  /* ── Interacción ─────────────────────────────────────────────────────── */
  --color-hover-overlay:  rgb(255 255 255 / 0.06);
  --color-selected-bg:    var(--c-blue-950);
  --color-disabled-bg:    var(--c-slate-925);
  --color-disabled-text:  var(--c-slate-500);
}

/* Preferencia del sistema — solo si NO hay data-theme explícito */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:              var(--c-slate-950);
    --color-surface:         var(--c-slate-925);
    --color-surface-raised:  var(--c-slate-800);
    --color-surface-overlay: var(--c-slate-800);
    --color-surface-subtle:  var(--c-slate-925);

    --color-text:            var(--c-slate-100);
    --color-heading:         var(--c-slate-100);
    --color-text-muted:      var(--c-slate-400);
    --color-text-subtle:     var(--c-slate-500);
    --color-text-on-brand:   #FFFFFF;
    --color-link:            var(--c-blue-300);
    --color-link-hover:      var(--c-blue-200);

    --color-border:          var(--c-slate-500);
    --color-border-subtle:   var(--c-slate-800);
    --color-border-visible:  var(--c-slate-400);
    --color-border-strong:   var(--c-slate-300);
    --color-focus-ring:      var(--c-blue-400);

    --color-brand:           var(--c-blue-500);
    --color-brand-strong:    var(--c-blue-400);
    --color-brand-subtle:    var(--c-blue-950);

    --color-accent:          var(--c-blue-400);
    --color-accent-text:     var(--c-blue-400);
    --color-accent-hover:    var(--c-blue-300);
    --color-accent-active:   var(--c-blue-200);
    --color-accent-solid:    var(--c-blue-600);
    --color-accent-solid-hover: var(--c-blue-500);
    --color-accent-subtle:   var(--c-blue-dim);
    --color-on-accent-solid: #FFFFFF;

    --color-success:       var(--c-emerald-500);
    --color-success-bg:    var(--c-emerald-dim);
    --color-success-text:  var(--c-emerald-500);

    --color-warning:       var(--c-amber-500);
    --color-warning-bg:    var(--c-amber-dim);
    --color-warning-text:  var(--c-amber-500);

    --color-danger:        var(--c-rose-400);
    --color-danger-bg:     var(--c-rose-dim);
    --color-danger-text:   var(--c-rose-400);

    --color-info:          var(--c-blue-400);
    --color-info-bg:       var(--c-blue-dim);
    --color-info-text:     var(--c-blue-400);

    --color-notice:      var(--c-gold-dim);
    --color-notice-bg:   var(--c-gold-dim);
    --color-notice-text: var(--c-gold-500);

    --color-hover-overlay:  rgb(255 255 255 / 0.06);
    --color-selected-bg:    var(--c-blue-950);
    --color-disabled-bg:    var(--c-slate-925);
    --color-disabled-text:  var(--c-slate-500);
  }
}

/* ============================================================================
   prefers-reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}