/* ════════════════════════════════════════════════════════════════════════════
   VECTOR · Tokens Base, estructura, tipografía, espaciado, radios, sombras,
   z-index, breakpoints, transiciones, layout, iconografía.
   SIN tokens cromáticos, los colores viven en css/themes/*.css
   ════════════════════════════════════════════════════════════════════════════
   Fuente: material/design/portal_v2/tokens.css (secciones 3-11)
   Versión: 2026-05-23 · B0 redesign
   ════════════════════════════════════════════════════════════════════════════ */

:root {

  /* ─────────────────────────────────────────────────────────────────────────
     3. TIPOGRAFÍA
     ───────────────────────────────────────────────────────────────────────── */

  --vx-font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --vx-font-mono:    'JetBrains Mono', 'Fira Code', Menlo, Consolas, 'Courier New', monospace;
  --vx-font-display: var(--vx-font-sans);

  /* Escala size / line-height */
  --vx-fs-display-lg: 2.625rem;  --vx-lh-display-lg: 3rem;
  --vx-fs-display-md: 2rem;      --vx-lh-display-md: 2.5rem;
  --vx-fs-title-xl:   1.5rem;    --vx-lh-title-xl:   2rem;
  --vx-fs-title-lg:   1.25rem;   --vx-lh-title-lg:   1.75rem;
  --vx-fs-title-md:   1rem;      --vx-lh-title-md:   1.5rem;
  --vx-fs-title-sm:   0.875rem;  --vx-lh-title-sm:   1.25rem;
  --vx-fs-body-lg:    1rem;      --vx-lh-body-lg:    1.5rem;
  --vx-fs-body:       0.875rem;  --vx-lh-body:       1.25rem;
  --vx-fs-body-sm:    0.8125rem; --vx-lh-body-sm:    1.25rem;
  --vx-fs-label:      0.75rem;   --vx-lh-label:      1rem;
  --vx-fs-caption:    0.6875rem; --vx-lh-caption:    1rem;
  --vx-fs-mono:       0.8125rem; --vx-lh-mono:       1.25rem;

  /* Pesos */
  --vx-fw-regular:  400;
  --vx-fw-medium:   500;
  --vx-fw-semibold: 600;
  --vx-fw-bold:     700;

  /* Letter-spacing */
  --vx-ls-tight:  -0.01em;
  --vx-ls-normal:  0;
  --vx-ls-wide:    0.02em;
  --vx-ls-wider:   0.04em;

  /* ─────────────────────────────────────────────────────────────────────────
     4. ESPACIADO, escala base 4px
     ───────────────────────────────────────────────────────────────────────── */

  --vx-space-0:  0;
  --vx-space-1:  0.25rem;
  --vx-space-2:  0.5rem;
  --vx-space-3:  0.75rem;
  --vx-space-4:  1rem;
  --vx-space-5:  1.25rem;
  --vx-space-6:  1.5rem;
  --vx-space-7:  1.75rem;
  --vx-space-8:  2rem;
  --vx-space-10: 2.5rem;
  --vx-space-12: 3rem;
  --vx-space-16: 4rem;

  /* ─────────────────────────────────────────────────────────────────────────
     5. RADIOS
     ───────────────────────────────────────────────────────────────────────── */

  --vx-radius-xs:   2px;
  --vx-radius-sm:   4px;
  --vx-radius-md:   6px;
  --vx-radius-lg:   10px;
  --vx-radius-xl:   14px;
  --vx-radius-2xl:  20px;
  --vx-radius-pill: 999px;

  /* ─────────────────────────────────────────────────────────────────────────
     6. SOMBRAS (elevation 0-5), tonalidad azul-petróleo
     ───────────────────────────────────────────────────────────────────────── */

  --vx-shadow-0: none;
  --vx-shadow-1: 0 1px 2px rgba(15, 30, 45, .06), 0 1px 1px rgba(15, 30, 45, .04);
  --vx-shadow-2: 0 2px 4px rgba(15, 30, 45, .08), 0 1px 2px rgba(15, 30, 45, .05);
  --vx-shadow-3: 0 4px 12px rgba(15, 30, 45, .10), 0 2px 4px rgba(15, 30, 45, .06);
  --vx-shadow-4: 0 8px 24px rgba(15, 30, 45, .12), 0 4px 8px rgba(15, 30, 45, .06);
  --vx-shadow-5: 0 16px 40px rgba(15, 30, 45, .16), 0 8px 16px rgba(15, 30, 45, .08);
  --vx-focus-ring: 0 0 0 3px rgba(27, 101, 119, .35);

  /* ─────────────────────────────────────────────────────────────────────────
     7. Z-INDEX LAYERS
     ───────────────────────────────────────────────────────────────────────── */

  --vx-z-base:     0;
  --vx-z-elevated: 10;
  --vx-z-sticky:   100;
  --vx-z-overlay:  900;
  --vx-z-modal:    1000;
  --vx-z-popover:  1100;
  --vx-z-toast:    1200;
  --vx-z-cmdk:     1300;
  --vx-z-max:      9999;

  /* ─────────────────────────────────────────────────────────────────────────
     8. BREAKPOINTS (referencia, leíbles por JS vía getComputedStyle)
     ───────────────────────────────────────────────────────────────────────── */

  --vx-bp-xs:  360px;
  --vx-bp-sm:  480px;
  --vx-bp-md:  768px;
  --vx-bp-lg:  1024px;
  --vx-bp-xl:  1280px;
  --vx-bp-2xl: 1536px;

  /* ─────────────────────────────────────────────────────────────────────────
     9. TRANSITIONS / EASINGS
     ───────────────────────────────────────────────────────────────────────── */

  --vx-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --vx-ease-in:     cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --vx-ease-inout:  cubic-bezier(0.4, 0, 0.2, 1);
  --vx-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --vx-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  --vx-dur-fast:    120ms;
  --vx-dur-default: 180ms;
  --vx-dur-slow:    280ms;
  --vx-dur-modal:   220ms;

  --vx-transition-default: all var(--vx-dur-default) var(--vx-ease-out);
  --vx-transition-fast:    all var(--vx-dur-fast)    var(--vx-ease-out);

  /* ─────────────────────────────────────────────────────────────────────────
     10. LAYOUT
     ───────────────────────────────────────────────────────────────────────── */

  --vx-topbar-h:              56px;
  --vx-nav-w:                 240px;
  --vx-nav-w-collapsed:       60px;
  --vx-bottomnav-h:           56px;
  --vx-container-max:         1280px;
  --vx-content-gutter:        var(--vx-space-6);
  --vx-content-gutter-mobile: var(--vx-space-4);
  --vx-tap-min:               44px;

  /* ─────────────────────────────────────────────────────────────────────────
     11. ICONOGRAFÍA
     ───────────────────────────────────────────────────────────────────────── */

  --vx-icon-stroke:   1.5;
  --vx-icon-size-xs:  14px;
  --vx-icon-size-sm:  16px;
  --vx-icon-size-md:  18px;
  --vx-icon-size-lg:  22px;
  --vx-icon-size-xl:  28px;
}