/*
 * design-system-jp/static/jp/tokens.css
 * -------------------------------------------------------------------------
 * Fuente humana de los design tokens de JotaPerformance (SDD plataforma-sistema §9).
 * Este archivo NO se enlaza directo en un <link> de producción: es la referencia
 * de la que se genera tokens.js (el mismo contenido, como CSSStyleSheet constructible,
 * adoptado por cada shadow root — ADR-0006 regla 2 y 7).
 *
 * El shell de cada plataforma SÍ carga este archivo a nivel de documento, dentro de
 * la capa `tokens` (ADR-0006 regla 3): @layer reset, tokens, base, shell.
 * Los módulos de negocio NUNCA enlazan este archivo: consumen las mismas variables
 * por herencia (los custom properties SÍ atraviesan el shadow boundary) a través de
 * `tokens.js` con adoptedStyleSheets.
 *
 * ---------------------------------------------------------------------------
 * IDENTIDAD DE MARCA
 * ---------------------------------------------------------------------------
 * JotaPerformance es una herramienta de trabajo que se usa 9 horas al día, de pie,
 * en un taller con poca luz y con las manos sucias. Por eso la paleta es sobria y
 * de alto contraste: el color se reserva para comunicar ESTADO (un vehículo
 * detenido, una inspección crítica), nunca para decorar. Si todo grita, nada se oye.
 *
 * El azul es la marca; el ámbar y el rojo son alarmas y no se usan jamás como
 * adorno; el grafito es la superficie de trabajo.
 */

@layer tokens {
  :root {
    /* =====================================================================
     * 1 · COLOR — escalas completas
     * Cada familia va de 50 (casi blanco) a 900 (casi negro), como cualquier
     * sistema serio: permite construir estados (hover, activo, deshabilitado,
     * fondo suave) sin inventar un hex nuevo cada vez.
     * ===================================================================== */

    /* ---- Azul de marca ---- */
    --jp-azul-50: #eff6ff;
    --jp-azul-100: #dbeafe;
    --jp-azul-200: #bfdbfe;
    --jp-azul-300: #93c5fd;
    --jp-azul-400: #60a5fa;
    --jp-azul-500: #3b82f6;
    --jp-azul-600: #2563eb;
    --jp-azul-700: #1d4ed8;
    --jp-azul-800: #1e40af;
    --jp-azul-900: #1e3a8a;
    --jp-azul-950: #172554;

    /* ---- Grafito: superficies, texto, bordes ---- */
    --jp-gris-50: #f8fafc;
    --jp-gris-100: #f1f5f9;
    --jp-gris-200: #e2e8f0;
    --jp-gris-300: #cbd5e1;
    --jp-gris-400: #94a3b8;
    --jp-gris-500: #64748b;
    --jp-gris-600: #475569;
    --jp-gris-700: #334155;
    --jp-gris-800: #1e293b;
    --jp-gris-900: #0f172a;
    --jp-gris-950: #020617;

    /* ---- Verde: conforme, pagado, entregado ---- */
    --jp-verde-50: #f0fdf4;
    --jp-verde-100: #dcfce7;
    --jp-verde-200: #bbf7d0;
    --jp-verde-500: #22c55e;
    --jp-verde-600: #16a34a;
    --jp-verde-700: #15803d;
    --jp-verde-900: #14532d;

    /* ---- Ámbar: atención, por vencer, esperando ---- */
    --jp-ambar-50: #fffbeb;
    --jp-ambar-100: #fef3c7;
    --jp-ambar-200: #fde68a;
    --jp-ambar-500: #f59e0b;
    --jp-ambar-600: #d97706;
    --jp-ambar-700: #b45309;
    --jp-ambar-900: #78350f;

    /* ---- Rojo: crítico, vencido, error ---- */
    --jp-rojo-50: #fef2f2;
    --jp-rojo-100: #fee2e2;
    --jp-rojo-200: #fecaca;
    --jp-rojo-500: #ef4444;
    --jp-rojo-600: #dc2626;
    --jp-rojo-700: #b91c1c;
    --jp-rojo-900: #7f1d1d;

    /* ---- Violeta: acento secundario (flotas, convenios, reportes) ---- */
    --jp-violeta-50: #f5f3ff;
    --jp-violeta-100: #ede9fe;
    --jp-violeta-500: #8b5cf6;
    --jp-violeta-600: #7c3aed;
    --jp-violeta-700: #6d28d9;

    /* ---- Turquesa: acento de la app del conductor ---- */
    --jp-turquesa-50: #ecfeff;
    --jp-turquesa-100: #cffafe;
    --jp-turquesa-500: #06b6d4;
    --jp-turquesa-600: #0891b2;
    --jp-turquesa-700: #0e7490;

    /* =====================================================================
     * 2 · ALIAS SEMÁNTICOS — lo que se usa en el código
     * Un componente NUNCA referencia --jp-azul-600; referencia
     * --jp-color-primario. Así el día que la marca cambie de azul, cambia
     * una línea y no doscientas.
     * ===================================================================== */

    --jp-color-primario: var(--jp-azul-600);
    --jp-color-primario-hover: var(--jp-azul-700);
    --jp-color-primario-activo: var(--jp-azul-800);
    --jp-color-primario-suave: var(--jp-azul-100);
    --jp-color-primario-sutil: var(--jp-azul-50);
    --jp-color-primario-contraste: #ffffff;

    --jp-color-texto: var(--jp-gris-900);
    --jp-color-texto-suave: var(--jp-gris-600);
    --jp-color-texto-secundario: var(--jp-gris-500);
    --jp-color-texto-tenue: var(--jp-gris-400);
    --jp-color-texto-invertido: #ffffff;

    --jp-color-fondo: #ffffff;
    --jp-color-fondo-alterno: var(--jp-gris-50);
    --jp-color-fondo-hundido: var(--jp-gris-100);
    --jp-color-fondo-elevado: #ffffff;
    --jp-color-fondo-inverso: var(--jp-gris-900);

    --jp-color-borde: var(--jp-gris-200);
    --jp-color-borde-fuerte: var(--jp-gris-300);
    --jp-color-borde-sutil: var(--jp-gris-100);
    --jp-color-borde-foco: var(--jp-azul-500);

    /* ---- Superposición: fondo oscurecido detrás de modal/drawer/menú ---- */
    --jp-color-superposicion: rgb(2 6 23 / 60%);

    /* ---- Esqueleto de carga: base + brillo del barrido (jp-cargando) ---- */
    --jp-color-esqueleto-base: var(--jp-gris-200);
    --jp-color-esqueleto-brillo: var(--jp-gris-100);

    --jp-color-exito: var(--jp-verde-600);
    --jp-color-exito-suave: var(--jp-verde-100);
    --jp-color-alerta: var(--jp-ambar-600);
    --jp-color-alerta-suave: var(--jp-ambar-100);
    --jp-color-error: var(--jp-rojo-600);
    --jp-color-error-suave: var(--jp-rojo-100);
    --jp-color-info: var(--jp-azul-600);
    --jp-color-info-suave: var(--jp-azul-100);

    /* ---- Semáforo: inspección, estados de OT (SDD §9) ---- */
    --jp-sem-verde: var(--jp-verde-600);
    --jp-sem-verde-suave: var(--jp-verde-100);
    --jp-sem-ambar: var(--jp-ambar-600);
    --jp-sem-ambar-suave: var(--jp-ambar-100);
    --jp-sem-rojo: var(--jp-rojo-600);
    --jp-sem-rojo-suave: var(--jp-rojo-100);
    --jp-sem-gris: var(--jp-gris-400);
    --jp-sem-gris-suave: var(--jp-gris-100);

    /* ---- Barra lateral (superficie oscura permanente) ---- */
    --jp-nav-fondo: var(--jp-gris-900);
    --jp-nav-fondo-hover: var(--jp-gris-800);
    --jp-nav-fondo-activo: var(--jp-azul-950);
    --jp-nav-texto: var(--jp-gris-300);
    --jp-nav-texto-activo: #ffffff;
    --jp-nav-texto-tenue: var(--jp-gris-500);
    --jp-nav-borde: var(--jp-gris-800);

    /* =====================================================================
     * 3 · ESPACIO — múltiplos de 4px
     * ===================================================================== */
    --jp-espacio-0: 0;
    --jp-espacio-1: 4px;
    --jp-espacio-2: 8px;
    --jp-espacio-3: 12px;
    --jp-espacio-4: 16px;
    --jp-espacio-5: 24px;
    --jp-espacio-6: 32px;
    --jp-espacio-7: 48px;
    --jp-espacio-8: 64px;
    --jp-espacio-9: 96px;

    /* =====================================================================
     * 4 · RADIO
     * ===================================================================== */
    --jp-radio-1: 4px;
    --jp-radio-2: 8px;
    --jp-radio-3: 12px;
    --jp-radio-4: 16px;
    --jp-radio-5: 24px;
    --jp-radio-pildora: 999px;
    --jp-radio-circulo: 50%;

    /* =====================================================================
     * 5 · ELEVACIÓN
     * Sombras en dos capas (uña + halo) para que se vean reales y no como
     * un desenfoque plano.
     * ===================================================================== */
    --jp-sombra-0: none;
    --jp-sombra-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.1);
    --jp-sombra-2: 0 2px 4px rgba(15, 23, 42, 0.06), 0 4px 8px rgba(15, 23, 42, 0.08);
    --jp-sombra-3: 0 4px 8px rgba(15, 23, 42, 0.06), 0 12px 24px rgba(15, 23, 42, 0.1);
    --jp-sombra-4: 0 8px 16px rgba(15, 23, 42, 0.08), 0 24px 48px rgba(15, 23, 42, 0.14);
    --jp-sombra-interna: inset 0 1px 2px rgba(15, 23, 42, 0.06);
    --jp-anillo-foco: 0 0 0 3px rgba(59, 130, 246, 0.35);
    --jp-anillo-error: 0 0 0 3px rgba(220, 38, 38, 0.25);

    /* =====================================================================
     * 6 · TIPOGRAFÍA
     * Escala mayor-tercera recortada. Los tamaños llevan su interlineado
     * emparejado: un tamaño sin su line-height produce texto que se toca.
     * ===================================================================== */
    --jp-tipografia-base: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --jp-tipografia-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --jp-tam-0: 11px;
    --jp-tam-1: 12px;
    --jp-tam-2: 14px;
    --jp-tam-3: 16px;
    --jp-tam-4: 18px;
    --jp-tam-5: 24px;
    --jp-tam-6: 30px;
    --jp-tam-7: 38px;
    --jp-tam-8: 48px;

    --jp-alto-0: 16px;
    --jp-alto-1: 16px;
    --jp-alto-2: 20px;
    --jp-alto-3: 24px;
    --jp-alto-4: 28px;
    --jp-alto-5: 32px;
    --jp-alto-6: 38px;
    --jp-alto-7: 46px;
    --jp-alto-8: 56px;

    --jp-peso-normal: 400;
    --jp-peso-medio: 500;
    --jp-peso-semi: 600;
    --jp-peso-fuerte: 700;

    --jp-espaciado-apretado: -0.02em;
    --jp-espaciado-normal: 0;
    --jp-espaciado-amplio: 0.04em;
    --jp-espaciado-rotulo: 0.08em;

    /* =====================================================================
     * 7 · CAPAS — escala z-index ÚNICA (ADR-0006 regla 5)
     * ===================================================================== */
    --jp-capa-base: 0;
    --jp-capa-elevado: 10;
    --jp-capa-pegajoso: 50;
    --jp-capa-menu: 100;
    --jp-capa-panel: 500;
    --jp-capa-overlay: 800;
    --jp-capa-modal: 900;
    --jp-capa-toast: 1000;
    --jp-capa-pista: 1100;

    /* =====================================================================
     * 8 · MOVIMIENTO
     * ===================================================================== */
    --jp-transicion-rapida: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --jp-transicion-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --jp-transicion-lenta: 320ms cubic-bezier(0.4, 0, 0.2, 1);
    --jp-curva-entrada: cubic-bezier(0, 0, 0.2, 1);
    --jp-curva-salida: cubic-bezier(0.4, 0, 1, 1);
    --jp-curva-rebote: cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Duración de los bucles de carga (esqueleto, barra indeterminada): son
       animaciones continuas, no una transición de estado, por eso viven en
       su propio token en vez de reusar --jp-transicion-*. */
    --jp-duracion-carga: 1400ms;

    /* =====================================================================
     * 9 · MEDIDAS DE COMPONENTE
     * El objetivo táctil mínimo es 44px porque el asesor de servicio usa el
     * sistema con una mano mientras sostiene la tablet con la otra.
     * ===================================================================== */
    --jp-control-alto-sm: 32px;
    --jp-control-alto: 40px;
    --jp-control-alto-lg: 48px;
    --jp-tactil-minimo: 44px;
    --jp-nav-ancho: 248px;
    --jp-nav-ancho-plegado: 68px;
    --jp-barra-alto: 60px;
    --jp-contenido-max: 1440px;
    --jp-lectura-max: 68ch;

    /* =====================================================================
     * 10 · SERIES DE GRÁFICOS (reportes/sedes/flotas)
     * Paleta categórica para series de un mismo gráfico (barras, dona,
     * ranking). Nunca un hex suelto en un componente: si un gráfico necesita
     * una serie más, se agrega aquí, no se inventa en el JS.
     * ===================================================================== */
    --jp-grafico-serie-1: var(--jp-azul-600);
    --jp-grafico-serie-2: var(--jp-turquesa-600);
    --jp-grafico-serie-3: var(--jp-violeta-600);
    --jp-grafico-serie-4: var(--jp-verde-600);
    --jp-grafico-serie-5: var(--jp-ambar-600);
    --jp-grafico-serie-6: var(--jp-rojo-600);
    --jp-grafico-serie-7: var(--jp-gris-500);
    --jp-grafico-serie-8: var(--jp-azul-300);
    /* Comparativo de dos series (periodo actual vs. anterior): el anterior
       siempre en gris neutro para que el actual sea el que llame la atención. */
    --jp-grafico-comparativo-actual: var(--jp-grafico-serie-1);
    --jp-grafico-comparativo-anterior: var(--jp-gris-300);
    /* Escala de jp-avatar: no reutiliza --jp-control-alto-* porque un avatar
       también existe fuera de un control de formulario (cabeceras, listas). */
    --jp-avatar-tam-sm: 28px;
    --jp-avatar-tam-md: 36px;
    --jp-avatar-tam-lg: 48px;
    --jp-avatar-tam-xl: 64px;
  }

  /* =======================================================================
   * MODO OSCURO
   * El taller a las 7 p. m. tiene una sola lámpara. No es una preferencia
   * estética: es lo que evita el deslumbramiento en la tablet del foso.
   * ======================================================================= */
  @media (prefers-color-scheme: dark) {
    :root[data-tema='auto'],
    :root:not([data-tema]) {
      --jp-color-primario: var(--jp-azul-500);
      --jp-color-primario-hover: var(--jp-azul-400);
      --jp-color-primario-suave: var(--jp-azul-900);
      --jp-color-primario-sutil: var(--jp-azul-950);

      --jp-color-texto: var(--jp-gris-100);
      --jp-color-texto-suave: var(--jp-gris-300);
      --jp-color-texto-secundario: var(--jp-gris-400);
      --jp-color-texto-tenue: var(--jp-gris-500);

      --jp-color-fondo: var(--jp-gris-900);
      --jp-color-fondo-alterno: var(--jp-gris-950);
      --jp-color-fondo-hundido: var(--jp-gris-950);
      --jp-color-fondo-elevado: var(--jp-gris-800);

      --jp-color-borde: var(--jp-gris-700);
      --jp-color-borde-fuerte: var(--jp-gris-600);
      --jp-color-borde-sutil: var(--jp-gris-800);

      --jp-sem-verde-suave: var(--jp-verde-900);
      --jp-sem-ambar-suave: var(--jp-ambar-900);
      --jp-sem-rojo-suave: var(--jp-rojo-900);
      --jp-sem-gris-suave: var(--jp-gris-800);
      --jp-color-exito-suave: var(--jp-verde-900);
      --jp-color-alerta-suave: var(--jp-ambar-900);
      --jp-color-error-suave: var(--jp-rojo-900);
      --jp-color-info-suave: var(--jp-azul-900);
      --jp-color-superposicion: rgb(0 0 0 / 68%);
      --jp-color-esqueleto-base: var(--jp-gris-700);
      --jp-color-esqueleto-brillo: var(--jp-gris-600);
    }
  }

  :root[data-tema='oscuro'] {
    --jp-color-primario: var(--jp-azul-500);
    --jp-color-primario-hover: var(--jp-azul-400);
    --jp-color-primario-suave: var(--jp-azul-900);
    --jp-color-primario-sutil: var(--jp-azul-950);

    --jp-color-texto: var(--jp-gris-100);
    --jp-color-texto-suave: var(--jp-gris-300);
    --jp-color-texto-secundario: var(--jp-gris-400);
    --jp-color-texto-tenue: var(--jp-gris-500);

    --jp-color-fondo: var(--jp-gris-900);
    --jp-color-fondo-alterno: var(--jp-gris-950);
    --jp-color-fondo-hundido: var(--jp-gris-950);
    --jp-color-fondo-elevado: var(--jp-gris-800);

    --jp-color-borde: var(--jp-gris-700);
    --jp-color-borde-fuerte: var(--jp-gris-600);
    --jp-color-borde-sutil: var(--jp-gris-800);

    --jp-sem-verde-suave: var(--jp-verde-900);
    --jp-sem-ambar-suave: var(--jp-ambar-900);
    --jp-sem-rojo-suave: var(--jp-rojo-900);
    --jp-sem-gris-suave: var(--jp-gris-800);
    --jp-color-exito-suave: var(--jp-verde-900);
    --jp-color-alerta-suave: var(--jp-ambar-900);
    --jp-color-error-suave: var(--jp-rojo-900);
    --jp-color-info-suave: var(--jp-azul-900);
    --jp-color-superposicion: rgb(0 0 0 / 68%);
    --jp-color-esqueleto-base: var(--jp-gris-700);
    --jp-color-esqueleto-brillo: var(--jp-gris-600);
  }

  /* =======================================================================
   * ACENTO POR PLATAFORMA
   * Las cuatro plataformas comparten el sistema pero no la identidad: quien
   * administra LICENCIA y quien atiende en el mostrador deben saber, de un
   * vistazo y sin leer, en cuál de las cuatro están.
   * ======================================================================= */
  :root[data-plataforma='licencia'] {
    --jp-color-primario: var(--jp-violeta-600);
    --jp-color-primario-hover: var(--jp-violeta-700);
    --jp-color-primario-suave: var(--jp-violeta-100);
    --jp-color-primario-sutil: var(--jp-violeta-50);
    --jp-nav-fondo-activo: #2e1065;
  }

  :root[data-plataforma='portal'] {
    --jp-color-primario: var(--jp-verde-600);
    --jp-color-primario-hover: var(--jp-verde-700);
    --jp-color-primario-suave: var(--jp-verde-100);
    --jp-color-primario-sutil: var(--jp-verde-50);
    --jp-nav-fondo-activo: var(--jp-verde-900);
  }

  :root[data-plataforma='app'] {
    --jp-color-primario: var(--jp-turquesa-600);
    --jp-color-primario-hover: var(--jp-turquesa-700);
    --jp-color-primario-suave: var(--jp-turquesa-100);
    --jp-color-primario-sutil: var(--jp-turquesa-50);
    --jp-nav-fondo-activo: var(--jp-turquesa-700);
  }

  /* =======================================================================
   * MÓVIL — el objetivo táctil manda sobre la densidad
   * Bajo 720px los controles suben al mínimo táctil: el pulgar del cliente
   * no se encoge porque la pantalla sea chica.
   * ======================================================================= */
  @media (max-width: 719px) {
    :root {
      --jp-control-alto-sm: 36px;
      --jp-control-alto: 44px;
      --jp-control-alto-lg: 52px;
    }
  }

  /* =======================================================================
   * MOVIMIENTO REDUCIDO — accesibilidad, no opcional
   * ======================================================================= */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --jp-transicion-rapida: 1ms;
      --jp-transicion-base: 1ms;
      --jp-transicion-lenta: 1ms;
    }
  }
}