/* ============================================================================
   LBS Design System — Tokens
   Solo custom properties. Cero selectores. Este archivo se copia TAL CUAL
   a las otras apps de la suite (Setonix, Dispatch, Gestión, Sengi, MT, SCADA).
   ============================================================================

   Paleta azul construida desde #0030FF (electric LBS) y #2F6BFF (primary UI).
   #0030FF se reserva para acento eléctrico, glows y CTAs.
   #2F6BFF es el primario de interfaz.

   Contraste verificado contra superficies oscuras (#191b20) y claras (#fff):
     blue-400 (#6B85FF) sobre dark surface → 5.30:1 (AA normal)
     blue-600 (#0030FF) sobre white        → 7.31:1 (AAA)
     white sobre blue-600                  → 7.31:1 (AAA) — btn-primary
   ========================================================================= */

/* ── Tipografía (font-face al final) ─────────────────────────────────── */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/IBMPlexSans-Regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/IBMPlexSans-Regular-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/IBMPlexSans-SemiBold-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

:root {
  /* ── Escala azul LBS ─────────────────────────────────────────────── */
  --blue-50:  #EEF2FF;
  --blue-100: #DBE4FF;
  --blue-200: #BFD0FF;
  --blue-300: #93ADFF;
  --blue-400: #6B85FF;
  --blue-500: #2F6BFF;
  --blue-600: #0030FF;
  --blue-700: #0028D9;
  --blue-800: #001FB3;
  --blue-900: #00188C;
  --blue-950: #0A1033;

  /* ── Neutrales ink ───────────────────────────────────────────────── */
  --ink-950: #0b0c0e;
  --ink-900: #131418;
  --ink-850: #191b20;
  --ink-800: #212329;
  --ink-700: #2e3037;
  --ink-600: #45474f;
  --ink-500: #5f626b;
  --ink-400: #888b93;
  --ink-300: #b5b8bf;
  --ink-200: #d7d9de;
  --ink-100: #f0f1f3;
  --ink-50:  #f7f8f9;

  /* ── Estado ──────────────────────────────────────────────────────── */
  --red-500: #c24747;
  --red-bg:  rgba(194, 71, 71, .12);
  --green-500: #39866a;
  --green-bg: rgba(57, 134, 106, .12);

  /* ── Tipografía ──────────────────────────────────────────────────── */
  --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'Cascadia Code', Consolas, monospace;
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 14px;
  --fs-md:   15px;
  --fs-lg:   18px;
  --fs-xl:   20px;
  --fs-2xl:  26px;
  --lh-tight: 1.15;
  --lh-base:  1.43;
  --lh-loose: 1.55;

  /* ── Espaciado ───────────────────────────────────────────────────── */
  --sp-2:  2px;
  --sp-4:  4px;
  --sp-6:  6px;
  --sp-8:  8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;

  /* ── Radios ──────────────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* ── Elevaciones (3 niveles) ─────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.12);
  --shadow-2: 0 1px 0 rgba(255,255,255,.06) inset,
              0 12px 40px rgba(0,0,0,.45),
              0 2px 6px rgba(0,0,0,.2);
  --shadow-3: 0 1px 0 rgba(255,255,255,.1) inset,
              0 24px 80px rgba(0,0,0,.5),
              0 4px 12px rgba(0,0,0,.25);

  /* ── Glass ───────────────────────────────────────────────────────── */
  --glass-blur: 14px;
  --glass-saturate: 1.4;
  --glass-blur-raised: 20px;
  --glass-saturate-raised: 1.6;

  /* ── Bordes glass (gradiente de luz) ─────────────────────────────── */
  --glass-border-top:    rgba(255,255,255,.18);
  --glass-border-bottom: rgba(0,0,0,.25);
  --glass-border-side:   rgba(255,255,255,.08);

  /* ── Blobs / mesh gradient ───────────────────────────────────────── */
  --blob-1: rgba(0, 48, 255, .12);
  --blob-2: rgba(78, 99, 255, .08);
  --blob-3: rgba(47, 107, 255, .06);
  --blob-warm: rgba(255, 140, 50, .035);

  /* ── Animación ───────────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(.2, .7, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-glass: cubic-bezier(.4, 0, .2, 1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   280ms;
  --dur-enter:  320ms;

  /* ── Tema oscuro (default) ───────────────────────────────────────── */
  --bg:             var(--ink-950);
  --surface:        rgba(25, 27, 32, .72);
  --surface-solid:  var(--ink-850);
  --surface-border: rgba(255, 255, 255, .09);
  --text:           #e7e9ee;
  --text-muted:     rgba(231, 233, 238, .56);
  --accent:         var(--blue-400);
  --accent-solid:   var(--blue-600);
  --accent-contrast:#ffffff;
  --focus-ring:     0 0 0 3px rgba(107, 133, 255, .35);
}

html[data-theme="light"] {
  --bg:             var(--ink-50);
  --surface:        rgba(255, 255, 255, .82);
  --surface-solid:  #ffffff;
  --surface-border: rgba(11, 12, 14, .10);
  --text:           var(--ink-900);
  --text-muted:     var(--ink-500);
  --accent:         var(--blue-600);
  --accent-solid:   var(--blue-600);
  --accent-contrast:#ffffff;
  --focus-ring:     0 0 0 3px rgba(0, 48, 255, .22);

  --shadow-1: 0 1px 3px rgba(11,18,32,.06), 0 4px 12px rgba(11,18,32,.04);
  --shadow-2: 0 2px 6px rgba(11,18,32,.08), 0 1px 2px rgba(11,18,32,.06);
  --shadow-3: 0 4px 24px rgba(11,18,32,.12), 0 2px 6px rgba(11,18,32,.06);

  --glass-border-top:    rgba(255,255,255,.7);
  --glass-border-bottom: rgba(0,0,0,.06);
  --glass-border-side:   rgba(0,0,0,.04);

  --blob-1: rgba(0, 48, 255, .06);
  --blob-2: rgba(78, 99, 255, .04);
  --blob-3: rgba(47, 107, 255, .03);
  --blob-warm: rgba(255, 120, 30, .025);
}