/**
 * Paso 0 de la Tarea 14 (auditoría integral Fase 1, meta 2 — estética visual).
 *
 * Puente entre los nombres semánticos de estetica-apple/assets/tokens.css y
 * la paleta Material 3 que el proyecto YA usa (definida como objeto JS en
 * el tailwind.config inline de public/index.html — el proyecto no tenía
 * ninguna CSS Custom Property antes de este archivo).
 *
 * Regla de esta tarea: SOLO introducir el puente. NO se enlaza este archivo
 * desde index.html todavía, NINGÚN módulo lo consume todavía — cero cambio
 * de comportamiento visual en Fase 1. Fase 2 decide, módulo por módulo, si
 * migrar sus clases Tailwind/estilos inline a estas variables.
 *
 * Fuente de valores: public/index.html líneas 87-134 (paleta light,
 * tailwind.config.theme.extend.colors) y líneas 213-322 (overrides .dark).
 * Modo oscuro del proyecto: toggle explícito de clase `.dark` en <html>
 * (persistido en localStorage['sl-tema']) — NO prefers-color-scheme puro,
 * a diferencia del tokens.css original de estetica-apple. Se respeta ese
 * mecanismo aquí: solo bloque `:root` (claro) + bloque `html.dark`.
 */

:root {
  color-scheme: light;

  /* --- color: superficie y texto (M3 -> nombres estetica-apple) --- */
  --bg:            #fbf9f8; /* = background / surface */
  --surface:       #fbf9f8; /* = surface */
  --surface-2:     #efeded; /* = surface-container */
  --surface-3:     #eae8e7; /* = surface-container-high (nivel extra, M3 tiene 5 niveles vs. 2 de estetica-apple) */
  --text:          #1b1c1c; /* = on-surface */
  --text-2:        #5e3f3b; /* = on-surface-variant */
  --text-3:        #5f5e5e; /* = secondary */
  --separator:     rgba(27, 28, 28, 0.08); /* derivado de on-surface, mismo alpha que el ring de las section cards (índice.html:268) */

  --accent:        #b0000b; /* = primary (NO el azul de Apple — rojo Smartlease) */
  --accent-press:  #930007; /* = on-primary-fixed-variant, tono más oscuro para :active */
  --accent-ring:   rgba(176, 0, 11, 0.28); /* derivado de --accent, mismo alpha que --accent-ring original */

  /* Semánticos de estado: el proyecto usa clases Tailwind stock (green/amber),
     no tiene tokens ok/warn/err en el tailwind.config -- se fijan aquí con
     los mismos valores que ya aparecen hardcodeados en los overrides .dark
     de index.html (bg-green-*, text-amber-*) para no introducir un 4to tono. */
  --ok:            #16a34a; /* Tailwind green-600, ya usado en overrides dark */
  --warn:          #b45309; /* Tailwind amber-700, ya usado en overrides dark */
  --err:           #ba1a1a; /* = error (M3) */

  --material:       rgba(255, 255, 255, 0.88); /* header glassmorphism claro */
  --material-blur:  saturate(180%) blur(20px);

  /* --- tipografía: el proyecto ya distingue headline/body, estetica-apple no --- */
  --font:          Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* = font-body */
  --font-headline: "Plus Jakarta Sans", Inter, system-ui, sans-serif;               /* = font-headline, sin equivalente en tokens.css original */
  --font-mono:     ui-monospace, "SF Mono", "IBM Plex Mono", Menlo, Consolas, monospace;

  --fs-caption2: 11px; --fs-caption: 12px; --fs-footnote: 13px;
  --fs-body: 15px; --fs-callout: 16px; --fs-headline: 17px;
  --fs-title3: 20px; --fs-title2: 24px; --fs-title1: 30px; --fs-large: 40px;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-label:  0.06em;

  /* --- espacio: alineación natural, la escala de Tailwind (base 4px) ya
     coincide con la escala --sp-* de estetica-apple 1:1 -- no requiere mapeo,
     se declara aquí solo para que el código que use var(--sp-*) no dependa
     de recordar la equivalencia con space-N de Tailwind. */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* --- elevación: mapeada a los box-shadow inline que ya usa el proyecto
     (boxShadow.card del tailwind.config + los patrones de section card de
     index.html:263-278) en vez de copiar los valores de Apple. --- */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(27, 28, 28, 0.04), 0 1px 3px rgba(27, 28, 28, 0.06);
  --elev-2: 0 4px 16px -4px rgba(27, 28, 28, 0.10); /* = patrón "section card" claro */
  --elev-3: 0 12px 32px -4px rgba(27, 28, 28, 0.06); /* = boxShadow.card del tailwind.config */
  --elev-4: 0 16px 32px rgba(27, 28, 28, 0.12), 0 48px 96px rgba(27, 28, 28, 0.18);
  --hairline-top: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* --- forma: mapeada a borderRadius del tailwind.config (DEFAULT 4px,
     lg 8px, xl 12px, 2xl 16px, 3xl 24px, full 9999px) en vez de la escala
     de Apple. --- */
  --r-xs: 4px;   /* = rounded (DEFAULT) */
  --r-sm: 8px;   /* = rounded-lg */
  --r-md: 12px;  /* = rounded-xl */
  --r-lg: 16px;  /* = rounded-2xl */
  --r-xl: 24px;  /* = rounded-3xl */
  --r-pill: 9999px; /* = rounded-full */

  /* --- movimiento: mapeado a transitionDuration/keyframes del
     tailwind.config (150/200/250ms) en vez de 140/220/320ms de Apple. --- */
  --dur-fast: 150ms; --dur-base: 200ms; --dur-slow: 250ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in:  cubic-bezier(.4, 0, 1, 1);
  --spring:   cubic-bezier(.34, 1.56, .64, 1);

  /* --- Tarea 41 (auditoría Fase 2, origen T14): consolidación de colores
     Tailwind crudos identificados en administracion.js (_renderTabRoles,
     5 insignias de rol) y mensajes.js (_PRIORIDAD_CLS, 3 niveles de
     prioridad). Valores calcados 1:1 de los que ya usaba el proyecto —
     cero cambio de paleta visual, solo se deja de depender de utilidades
     Tailwind crudas + overrides .dark manuales por clase. --- */
  --role1-bg: #eff6ff;   --role1-text: #1d4ed8; /* Vendedor (blue) */
  --role2-bg: #f5f3ff;   --role2-text: #6d28d9; /* Gerente de Sucursal (violet) */
  --role3-bg: #ecfdf5;   --role3-text: #047857; /* Director Regional (emerald) */
  --role4-bg: #fffbeb;   --role4-text: #b45309; /* Coordinador Global (amber) */
  --role5-bg: #fff1f2;   --role5-text: #be123c; /* Super Admin (rose) */

  /* Bordes de prioridad de Mensajería — sin override .dark previo, se deja
     el mismo valor en ambos modos (comportamiento actual sin cambios). */
  --priority-alta:  #ef4444; /* red-500 */
  --priority-media: #fb923c; /* orange-400 */
  --priority-baja:  #fbbf24; /* amber-400 */
}

/* Modo oscuro: el proyecto alterna la clase .dark en <html> explícitamente
   (ver script de tema en index.html) -- no se usa prefers-color-scheme aquí
   a propósito, para no pelear con ese mecanismo ya existente. */
html.dark {
  color-scheme: dark;

  --bg:            #141313;
  --surface:       #141313;
  --surface-2:     #242222;
  --surface-3:     #2a2929;
  --text:          #e8e6e5;
  --text-2:        #c9b5b1;
  --text-3:        #9e9c9b;
  --separator:     rgba(255, 255, 255, 0.12);

  --accent:        #c8000d; /* = bg-primary dark */
  --accent-press:  #6e0006; /* = bg-primary-container dark */
  --accent-ring:   rgba(255, 68, 68, 0.36); /* derivado de text-primary dark #ff4444 */

  --ok:            #4ade80; /* Tailwind green-400, ya usado en overrides dark */
  --warn:          #fbbf24; /* Tailwind amber-400, ya usado en overrides dark */
  --err:           #ff5555; /* = text-error dark */

  --material:      rgba(26, 24, 24, 0.88); /* header glassmorphism oscuro, index.html:282 */

  /* Tarea 41 — mismos valores que ya usaban los overrides .dark manuales
     de index.html (bg-blue-50/violet-50/emerald-50/amber-50/rose-50 +
     text-*-700) antes de esta consolidación. */
  --role1-bg: rgb(30 64 175 / 0.2);  --role1-text: #60a5fa;
  --role2-bg: rgb(76 29 149 / 0.2);  --role2-text: #a78bfa;
  --role3-bg: rgb(6 78 59 / 0.25);   --role3-text: #34d399;
  --role4-bg: rgb(120 53 15 / 0.25); --role4-text: #fbbf24;
  --role5-bg: rgb(159 18 57 / 0.25); --role5-text: #fb7185;

  --elev-1: 0 1px 2px rgba(0, 0, 0, .4);
  --elev-2: 0 8px 32px -4px rgba(0, 0, 0, .5); /* = patrón "section card" oscuro */
  --elev-3: 0 8px 32px -4px rgba(0, 0, 0, .5);
  --elev-4: 0 16px 48px rgba(0, 0, 0, .6);
  --hairline-top: inset 0 1px 0 rgba(255, 255, 255, .06);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}