/* ==========================================================================
   Lightblue · Demo VWFS — tokens.css  ·  v1.1 · 21/10/2026
   DUEÑA: sesión "Design System". Los NOMBRES de las variables son contrato:
   se pueden afinar valores y sumar nuevas, nunca renombrar ni borrar.
   Base tomada del sitio actual (vwfs.com.ar): petróleo #004666, aqua #66E4EE,
   menta #05CE9F, gris texto #4C5356. "Lightblue" = la versión luminosa y comercial.

   Dos capas:
     1. Primitivos (rampas): --lb-petrol-*, --lb-sky-*, --lb-mint-*, --lb-n-*, funcionales.
     2. Roles (semánticos): --lb-primary, --lb-accent, --lb-ink, --lb-text, --lb-surface…
   Los componentes de base.css usan roles; las páginas, roles y, si hace falta, rampas.

   Tipografía (v1.1): Archivo (display, con eje de ancho: los titulares van
   levemente expandidos, lenguaje de ficha técnica automotriz) + Inter (texto,
   cifras tabulares para tasas y cuotas) + JetBrains Mono (ids, UTM, código).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

:root {
  /* ---------- Marca · petróleo (blue) ---------- */
  --lb-petrol-950: #001B28;
  --lb-petrol-900: #002A3D;
  --lb-petrol-800: #00374F;
  --lb-petrol-700: #004666;   /* azul VWFS (blue) */
  --lb-petrol-600: #0A5A7F;
  --lb-petrol-500: #1F7297;
  --lb-petrol-400: #4E93B2;
  --lb-petrol-300: #8DBACE;
  --lb-petrol-200: #C2DCE7;
  --lb-petrol-100: #E2EEF3;
  --lb-petrol-50:  #F1F7F9;

  /* ---------- Marca · cielo / aqua (lightblue) ---------- */
  --lb-sky-800: #0B5E73;      /* aqua oscurecido: texto sobre fondos aqua claros */
  --lb-sky-700: #0E7F96;
  --lb-sky-600: #1AA0C4;
  --lb-sky-500: #2FB8E6;
  --lb-sky-400: #66E4EE;      /* aqua VWFS */
  --lb-sky-300: #92EDF3;
  --lb-sky-200: #BDF3F7;
  --lb-sky-100: #E6FAFC;
  --lb-sky-50:  #F3FCFD;

  /* ---------- Marca · menta (lo que sale bien) ---------- */
  --lb-mint-800: #035C47;
  --lb-mint-700: #04785D;
  --lb-mint-600: #04A07E;
  --lb-mint-500: #05CE9F;     /* menta VWFS: éxito / "aprobado" */
  --lb-mint-300: #6BE6C5;
  --lb-mint-200: #A9F1DD;
  --lb-mint-100: #D9F8EF;
  --lb-mint-50:  #EEFCF8;

  /* ---------- Neutros (tintados hacia el petróleo) ---------- */
  --lb-n-950: #0A151B;
  --lb-n-900: #0E1B22;
  --lb-n-800: #1D2C34;
  --lb-n-700: #33434B;
  --lb-n-600: #4C5356;        /* gris texto VWFS */
  --lb-n-500: #5F6D74;
  --lb-n-400: #869399;        /* 3,1:1 sobre blanco: mínimo para bordes de inputs (AA-ui) */
  --lb-n-300: #B7C3C9;
  --lb-n-200: #DDE6EA;
  --lb-n-100: #EBF1F4;
  --lb-n-50:  #F4F8FA;

  --lb-ink: #0E1B22;          /* títulos y texto fuerte */
  --lb-text: #4C5356;         /* texto de lectura (7,8:1 sobre blanco) */
  --lb-muted: #5F6D74;        /* texto secundario (5,4:1 sobre blanco; antes #7A868C, no llegaba a AA) */
  --lb-line: #DDE6EA;
  --lb-line-strong: #869399;  /* bordes de inputs en reposo (3,1:1, AA-ui) */
  --lb-surface: #FFFFFF;
  --lb-surface-2: #F4F8FA;
  --lb-surface-3: #EBF1F4;    /* hundido: pistas de slider, celdas de cabecera */
  --lb-surface-inverse: #002A3D;
  --lb-bg: #FAFCFD;
  --lb-overlay: rgba(0, 27, 40, .55);   /* fondo detrás de modales y drawers */
  --lb-glass: rgba(255, 255, 255, .72); /* superficies de vidrio sobre fotos */
  --lb-glass-dark: rgba(0, 42, 61, .55);

  /* ---------- Estados ---------- */
  --lb-warn: #F2A93B;
  --lb-warn-100: #FDF0DB;
  --lb-warn-700: #8A5A0E;
  --lb-danger: #E2504C;
  --lb-danger-100: #FCE4E3;
  --lb-danger-700: #9C2B28;
  --lb-success: var(--lb-mint-500);
  --lb-success-100: var(--lb-mint-100);
  --lb-success-700: var(--lb-mint-700);
  --lb-info: var(--lb-sky-600);
  --lb-info-100: var(--lb-sky-100);
  --lb-info-700: var(--lb-sky-800);

  /* ---------- Roles ---------- */
  --lb-primary: var(--lb-petrol-700);
  --lb-primary-hover: var(--lb-petrol-600);
  --lb-on-primary: #FFFFFF;
  --lb-accent: var(--lb-sky-400);
  --lb-accent-hover: var(--lb-sky-300);
  --lb-on-accent: var(--lb-petrol-900);
  --lb-link: var(--lb-petrol-600);
  --lb-focus: 0 0 0 3px rgba(102, 228, 238, .55);
  --lb-focus-strong: 0 0 0 2px #FFFFFF, 0 0 0 5px var(--lb-sky-500); /* foco sobre fondos claros con bajo contraste */

  /* ---------- Datos (tablero): distinguibles con daltonismo ---------- */
  --lb-chart-1: #004666;      /* Salesforce / total */
  --lb-chart-2: #2FB8E6;      /* Google Ads */
  --lb-chart-3: #05CE9F;      /* liquidado / éxito */
  --lb-chart-4: #F2A93B;      /* Meta Ads */
  --lb-chart-5: #8C6FE0;
  --lb-chart-6: #E2504C;
  --lb-chart-grid: rgba(0, 42, 61, .08);

  /* ---------- Tipografía ---------- */
  --lb-font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lb-font-text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lb-font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --lb-stretch-display: 112%; /* ancho de los titulares (eje wdth de Archivo) */
  --lb-stretch-wide: 125%;    /* el máximo: cifras protagonistas, .lb-display */
  --lb-fs-mega: clamp(3.4rem, 1.6rem + 8vw, 8.5rem);   /* cifras gigantes: "0 %" */
  --lb-fs-hero: clamp(2.5rem, 1.4rem + 4.6vw, 5.4rem);
  --lb-fs-h1: clamp(2rem, 1.3rem + 2.6vw, 3.4rem);
  --lb-fs-h2: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  --lb-fs-h3: 1.25rem;
  --lb-fs-h4: 1.0625rem;
  --lb-fs-lead: clamp(1.0625rem, 1rem + .35vw, 1.3rem);
  --lb-fs-body: 1rem;
  --lb-fs-small: .875rem;
  --lb-fs-tiny: .75rem;
  --lb-lh-tight: 1.05;
  --lb-lh-snug: 1.25;
  --lb-lh-body: 1.55;
  --lb-ls-tight: -.025em;
  --lb-ls-wide: .14em;

  /* ---------- Espaciado (base 4) ---------- */
  --lb-s1: 4px; --lb-s2: 8px; --lb-s3: 12px; --lb-s4: 16px; --lb-s5: 24px;
  --lb-s6: 32px; --lb-s7: 48px; --lb-s8: 64px; --lb-s9: 96px; --lb-s10: 128px;
  --lb-gutter: 16px;            /* 16px en celular, crece en desktop */
  --lb-max: 1240px;
  --lb-max-narrow: 760px;       /* textos largos y formularios */
  --lb-section: clamp(64px, 40px + 6vw, 128px);  /* aire vertical entre bloques */
  /* Breakpoints (referencia; en CSS se escriben a mano): sm 480 · md 768 · lg 1024 · xl 1280 */

  /* ---------- Forma ---------- */
  --lb-r-xs: 4px;
  --lb-r-sm: 8px; --lb-r-md: 14px; --lb-r-lg: 22px; --lb-r-xl: 32px; --lb-r-pill: 999px;
  --lb-shadow-1: 0 1px 2px rgba(0, 42, 61, .06), 0 2px 8px rgba(0, 42, 61, .06);
  --lb-shadow-2: 0 4px 12px rgba(0, 42, 61, .06), 0 12px 32px rgba(0, 42, 61, .10);
  --lb-shadow-3: 0 12px 24px rgba(0, 42, 61, .10), 0 32px 64px rgba(0, 42, 61, .16); /* modales, flotantes */
  --lb-shadow-glow: 0 10px 40px rgba(102, 228, 238, .45);
  --lb-shadow-glow-mint: 0 10px 40px rgba(5, 206, 159, .35);
  --lb-shadow-inset: inset 0 1px 2px rgba(0, 42, 61, .08);
  --lb-hairline-light: inset 0 1px 0 rgba(255, 255, 255, .5); /* brillo superior en botones y vidrios */

  /* ---------- Iconos ---------- */
  --lb-icon-sm: 16px; --lb-icon-md: 20px; --lb-icon-lg: 24px; --lb-icon-xl: 32px;

  /* ---------- Capas ---------- */
  --lb-z-header: 100; --lb-z-drawer: 800; --lb-z-modal: 850; --lb-z-toast: 1000;

  /* ---------- Motion ---------- */
  --lb-ease: cubic-bezier(.2, .8, .2, 1);
  --lb-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --lb-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --lb-t-fast: 150ms; --lb-t: 280ms; --lb-t-slow: 600ms; --lb-t-xslow: 1100ms;
  --lb-stagger: 70ms;           /* delay entre hijos de .lb-stagger */

  /* ---------- Gradientes firma ---------- */
  --lb-grad-hero: radial-gradient(120% 120% at 85% 10%, #0A5A7F 0%, #004666 38%, #002A3D 100%);
  --lb-grad-light: linear-gradient(135deg, #E6FAFC 0%, #FFFFFF 55%, #F3FCFD 100%);
  --lb-grad-accent: linear-gradient(90deg, #66E4EE 0%, #05CE9F 100%);
  /* "La luz que se abre": el petróleo con el aqua entrando desde arriba a la derecha */
  --lb-grad-dawn: radial-gradient(70% 90% at 90% 0%, rgba(102, 228, 238, .55) 0%, rgba(102, 228, 238, 0) 60%),
                  radial-gradient(60% 70% at 0% 100%, rgba(5, 206, 159, .22) 0%, rgba(5, 206, 159, 0) 60%),
                  linear-gradient(160deg, #004666 0%, #002A3D 70%, #001B28 100%);
  --lb-grad-sky: linear-gradient(180deg, #E6FAFC 0%, #F3FCFD 45%, #FFFFFF 100%);
  --lb-grad-button: linear-gradient(180deg, #8AEDF4 0%, #66E4EE 55%, #4FD8E4 100%);
  --lb-grad-text: linear-gradient(95deg, #66E4EE 0%, #92EDF3 40%, #05CE9F 100%); /* texto con gradiente sobre oscuro */
  --lb-grad-text-dark: linear-gradient(95deg, #004666 0%, #0E7F96 55%, #04A07E 100%); /* texto con gradiente sobre claro */
}

@media (min-width: 768px) { :root { --lb-gutter: 32px; } }
@media (prefers-reduced-motion: reduce) { :root { --lb-t-fast: 1ms; --lb-t: 1ms; --lb-t-slow: 1ms; --lb-t-xslow: 1ms; --lb-stagger: 0ms; } }