/* ════════════════════════════════════════════════════════════════════════════
   VECTOR · Tema "Magnitud × Dirección", paleta default
   Petróleo (brand primary) + Ámbar (acento) + Neutros azul-gris
   ════════════════════════════════════════════════════════════════════════════
   Fuente: material/design/portal_v2/tokens.css (secciones 1-2 + sección 12)
   Versión: 2026-05-23 · B0 redesign
   ════════════════════════════════════════════════════════════════════════════ */

:root[data-theme="magnitud_direccion"],
:root {  /* fallback si data-theme no está seteado aún */

  /* ─────────────────────────────────────────────────────────────────────────
     1. PRIMITIVOS
     ───────────────────────────────────────────────────────────────────────── */

  /* Petróleo */
  --vxp-teal-50:  #EAF2F4;
  --vxp-teal-100: #CCDDE2;
  --vxp-teal-200: #9CBFC9;
  --vxp-teal-300: #6BA1AF;
  --vxp-teal-400: #3D8595;
  --vxp-teal-500: #1B6577;
  --vxp-teal-600: #0E3F4D;
  --vxp-teal-700: #0A2F3A;
  --vxp-teal-800: #061F26;
  --vxp-teal-900: #031216;

  /* Ámbar */
  --vxp-amber-50:  #FAEFD9;
  --vxp-amber-100: #F5DBA8;
  --vxp-amber-200: #EFC579;
  --vxp-amber-300: #E6AC49;
  --vxp-amber-400: #D5901E;
  --vxp-amber-500: #C77700;
  --vxp-amber-600: #A66200;
  --vxp-amber-700: #834D00;
  --vxp-amber-800: #5F3800;
  --vxp-amber-900: #3B2300;

  /* Neutrales (sesgo azul-petróleo) */
  --vxp-neutral-0:   #FFFFFF;
  --vxp-neutral-50:  #F6F7F9;
  --vxp-neutral-100: #EBEDF1;
  --vxp-neutral-200: #DDE1E7;
  --vxp-neutral-300: #C5CCD5;
  --vxp-neutral-400: #A4ADB9;
  --vxp-neutral-500: #8A99AA;
  --vxp-neutral-600: #637588;
  --vxp-neutral-700: #4A5A6E;
  --vxp-neutral-800: #3A4A5A;
  --vxp-neutral-900: #0F1E2D;

  /* Estados semánticos */
  --vxp-success-50:  #E6F3EE;
  --vxp-success-100: #BFE0CF;
  --vxp-success-500: #0F7B5C;
  --vxp-success-700: #0A5A43;
  --vxp-success-900: #053524;

  --vxp-warning-50:  #FAEED9;
  --vxp-warning-100: #F2D7A0;
  --vxp-warning-500: #A05A00;
  --vxp-warning-700: #784200;
  --vxp-warning-900: #432500;

  --vxp-danger-50:   #F7E1E8;
  --vxp-danger-100:  #E9B5C4;
  --vxp-danger-500:  #A1294A;
  --vxp-danger-700:  #7A1E37;
  --vxp-danger-900:  #441120;

  --vxp-info-50:     #E2EEF7;
  --vxp-info-100:    #B5D2EA;
  --vxp-info-500:    #1A6FB0;
  --vxp-info-700:    #135383;
  --vxp-info-900:    #0A2F4A;

  /* ─────────────────────────────────────────────────────────────────────────
     2. SEMÁNTICOS
     ───────────────────────────────────────────────────────────────────────── */

  /* Brand */
  --vx-brand-primary:        var(--vxp-teal-600);
  --vx-brand-primary-hover:  var(--vxp-teal-500);
  --vx-brand-primary-active: var(--vxp-teal-700);
  --vx-brand-primary-soft:   var(--vxp-teal-50);
  --vx-brand-primary-on:     var(--vxp-neutral-0);

  --vx-brand-accent:         var(--vxp-amber-500);
  --vx-brand-accent-hover:   var(--vxp-amber-600);
  --vx-brand-accent-soft:    var(--vxp-amber-50);
  --vx-brand-accent-on:      var(--vxp-neutral-0);

  --vx-brand-gradient: linear-gradient(135deg, var(--vxp-teal-600) 0%, var(--vxp-teal-500) 100%);

  /* Surfaces */
  --vx-surface-page:        var(--vxp-neutral-50);
  --vx-surface-1:           var(--vxp-neutral-0);
  --vx-surface-2:           var(--vxp-neutral-100);
  --vx-surface-3:           var(--vxp-neutral-200);
  --vx-surface-inverted:    var(--vxp-neutral-900);
  --vx-surface-inverted-on: var(--vxp-neutral-0);

  /* Borders */
  --vx-border-soft:    rgba(15, 30, 45, .08);
  --vx-border-default: rgba(15, 30, 45, .14);
  --vx-border-strong:  rgba(15, 30, 45, .22);
  --vx-border-focus:   var(--vxp-teal-500);

  /* Text */
  --vx-text-strong:   var(--vxp-neutral-900);
  --vx-text-default:  var(--vxp-neutral-800);
  --vx-text-muted:    var(--vxp-neutral-600);
  --vx-text-subtle:   var(--vxp-neutral-500);
  --vx-text-inverted: var(--vxp-neutral-0);
  --vx-text-link:     var(--vxp-teal-500);
  --vx-text-link-hover: var(--vxp-teal-600);

  /* Estados UI */
  --vx-status-success:        var(--vxp-success-500);
  --vx-status-success-soft:   var(--vxp-success-50);
  --vx-status-success-strong: var(--vxp-success-700);

  --vx-status-warning:        var(--vxp-warning-500);
  --vx-status-warning-soft:   var(--vxp-warning-50);
  --vx-status-warning-strong: var(--vxp-warning-700);

  --vx-status-danger:         var(--vxp-danger-500);
  --vx-status-danger-soft:    var(--vxp-danger-50);
  --vx-status-danger-strong:  var(--vxp-danger-700);

  --vx-status-info:           var(--vxp-info-500);
  --vx-status-info-soft:      var(--vxp-info-50);
  --vx-status-info-strong:    var(--vxp-info-700);

  /* ─────────────────────────────────────────────────────────────────────────
     COMPATIBILIDAD LEGACY, alias para que js/*.js siga funcionando sin tocar
     Eliminar al cierre del big-bang cuando cada módulo migre a vx-* directo.
     ───────────────────────────────────────────────────────────────────────── */

  --mag:  var(--vx-brand-primary);      /* era #D42070 → petróleo */
  --ora:  var(--vx-brand-accent);       /* era #F05A1A → ámbar */
  --grad: var(--vx-brand-gradient);

  --bg:   var(--vx-surface-page);
  --sur:  var(--vx-surface-1);
  --sur2: var(--vx-surface-2);
  --hov:  var(--vx-surface-3);

  --bdr:  var(--vx-border-soft);
  --bdr2: var(--vx-border-default);
  --bdr3: var(--vx-border-strong);

  --tx:   var(--vx-text-strong);
  --tx1:  var(--vx-text-default);
  --tx2:  var(--vx-text-muted);
  --tx3:  var(--vx-text-subtle);

  --r:    var(--vx-radius-lg);
  --rsm:  var(--vx-radius-md);
  --pill: var(--vx-radius-pill);

  --sh-sm: var(--vx-shadow-1);
  --sh-md: var(--vx-shadow-3);
  --sh-lg: var(--vx-shadow-4);

  --ease: var(--vx-ease-inout);

  --nav-w:           var(--vx-nav-w);
  --nav-w-collapsed: var(--vx-nav-w-collapsed);
  --bar-h:           var(--vx-topbar-h);

  /* Semánticos de estado legacy, ok/wn/er/in actualizados a paleta v2 */
  --ok:    var(--vx-status-success);
  --ok-bg: var(--vx-status-success-soft);
  --wn:    var(--vx-status-warning);
  --wn-bg: var(--vx-status-warning-soft);
  --er:    var(--vx-status-danger);
  --er-bg: var(--vx-status-danger-soft);
  --in:    var(--vx-status-info);
  --in-bg: var(--vx-status-info-soft);
  --ac:    var(--vx-brand-primary);
  --ac-bg: var(--vx-brand-primary-soft);
}