/* =============================================================================
   Presente7 · Capa 1 — Tokens · IDENTIDAD V2 «vibrante amigable»
   Spec: docs/superpowers/specs/2026-08-04-identidad-v2-frontend-ultrapremium-design.md
   Dos voces sobre una sola paleta: cálida (empleado), gestión (jefe y panel).
   Contraste: e2e/contraste.mjs juzga este archivo. --p7-coral y --p7-ok-vivo
   son DECORATIVOS: nunca color de texto.
   ========================================================================== */
:root {
  /* --- Marca --- */
  --p7-primario:      #5A48E8;
  --p7-primario-alto: #7C6CFF;
  --p7-primario-bajo: #4438B8;  /* hover/activo del primario */
  --p7-primario-tinte:#EDF2FF;  /* fondos suaves de acción, avatares */
  --p7-degradado-marca: linear-gradient(145deg, var(--p7-primario-alto), var(--p7-primario));

  /* --- Tinta y neutrales (índigo templado, nunca #000 ni gris puro) --- */
  --p7-tinta:       #1E1B4B;
  --p7-texto-suave: #5C5A78;
  --p7-blanco:      #FFFFFF;
  --p7-superficie:  #FFFFFF;
  --p7-fondo-calido:  #F7F8FF;
  --p7-fondo-gestion: #FBFCFE;
  --p7-borde:        #E7E9F5;
  --p7-borde-fuerte: #C9CCE3;

  /* --- Semánticos (texto AA sobre superficie; los *-vivo son decorativos) --- */
  --p7-ok:        #15803D;
  --p7-ok-vivo:   #22C55E;
  --p7-ok-tinte:  #E9FBEF;
  --p7-alerta:       #B45309;
  --p7-alerta-tinte: #FFF3D6;
  --p7-peligro:       #C92A2A;
  --p7-peligro-tinte: #FFE3E3;
  --p7-coral: #FF6B6B;

  /* --- Tipografía --- */
  --p7-fuente: "Inter", system-ui, sans-serif;
  --p7-fuente-display: "Nunito", "Inter", system-ui, sans-serif;

  /* --- Geometría y elevación --- */
  --p7-radio-s: 8px; --p7-radio-m: 12px; --p7-radio-l: 16px; --p7-radio-xl: 24px;
  --p7-sombra-1: 0 1px 3px rgba(30, 27, 75, .08);
  --p7-sombra-2: 0 8px 24px rgba(30, 27, 75, .12);
  --p7-sombra-marca: 0 10px 26px rgba(90, 72, 232, .30);

  /* --- Movimiento --- */
  --p7-dur-1: 150ms; --p7-dur-2: 250ms; --p7-dur-3: 400ms;
  --p7-curva-calida: cubic-bezier(.34, 1.4, .64, 1);   /* spring contenida */
  --p7-curva-gestion: cubic-bezier(.2, 0, 0, 1);       /* ease-out sobria */
}

/* --- Las dos voces: solo tokens derivados, jamás CSS suelto ------------- */
.p7-voz-calida {
  --p7-voz-fondo: var(--p7-fondo-calido);
  --p7-voz-radio: var(--p7-radio-xl);
  --p7-voz-sombra: var(--p7-sombra-marca);
  --p7-voz-fuente-titular: var(--p7-fuente-display);
  --p7-voz-curva: var(--p7-curva-calida);
}
.p7-voz-gestion {
  --p7-voz-fondo: var(--p7-fondo-gestion);
  --p7-voz-radio: var(--p7-radio-m);
  --p7-voz-sombra: var(--p7-sombra-1);
  --p7-voz-fuente-titular: var(--p7-fuente);
  --p7-voz-curva: var(--p7-curva-gestion);
}

/* =============================================================================
   ALIASES LEGACY — 17 hojas de módulos (attendance, onboarding, login, y las
   capas base/components/app de este mismo directorio) consumen estos nombres.
   Son la v2 con nombre viejo, no una segunda paleta.

   La lista completa salió del inventario de Task 4/Step 1, ampliado más allá
   de `static/` (donde vive la mitad de los módulos reales: attendance/static,
   onboarding/static). El detalle completo —comando, salida cruda y la tabla
   de mapeo— está en el reporte de la tarea.

   Regla de mapeo: rampa navy → profundidad de tinta (todas caen en --p7-tinta,
   v2 no tiene una rampa de profundidad); rampa teal → primario y variantes
   por intensidad; neutrales n-* → blanco/fondos/bordes/texto por intensidad;
   semánticos viejos (success/warning/danger, con sus -text/-surface/-border/
   -hover) → semánticos v2 por rol: el texto y el hover van al tono base (es
   el único con AA garantizado por e2e/contraste.mjs), el fondo va al *-tinte,
   el borde también va al tono base porque v2 no tiene un cuarto tono
   intermedio para bordes.

   Tipografía, espacio, radios viejos, elevación, z-index y el objetivo
   táctil NO son parte de la paleta v2 (esta tarea es solo la paleta): se
   preservan con su valor de v1 o se remapean a la geometría/sombra v2 más
   cercana, para que ninguna hoja de módulo se rompa.
   ========================================================================== */
:root {
  /* --- Marca: teal* y brand* → primario y sus variantes ------------------ */
  --p7-teal:        var(--p7-primario);
  --p7-teal-600:    var(--p7-primario);
  --p7-teal-500:    var(--p7-primario);
  --p7-teal-700:    var(--p7-primario-bajo);
  --p7-teal-900:    var(--p7-primario-bajo);
  --p7-teal-400:    var(--p7-primario-alto);
  --p7-teal-300:    var(--p7-primario-alto);
  --p7-teal-bright: var(--p7-primario-alto);
  --p7-teal-soft:   var(--p7-primario-tinte);
  --p7-brand:         var(--p7-primario);
  --p7-brand-hover:   var(--p7-primario-bajo);
  --p7-brand-press:   var(--p7-primario-bajo);
  /* El brand-text original ya usaba un tono más oscuro que --brand para
     ganar AA como texto; primario-bajo conserva esa distancia de rol. */
  --p7-brand-text:    var(--p7-primario-bajo);
  --p7-brand-surface: var(--p7-primario-tinte);
  /* -border al tono saturado y -surface al tinte claro, mismo patrón que
     success/warning/danger: si ambos fueran el tinte, el borde se funde con
     su propio relleno y desaparece. */
  --p7-brand-border:  var(--p7-primario-alto);
  --p7-on-brand:      var(--p7-blanco);
  /* Sobre fondos oscuros el tono legible es el claro, igual que antes. */
  --p7-brand-on-dark: var(--p7-primario-alto);
  /* Huérfanos: solo presente7-attendance-activity.css los definía en local
     y otra hoja (presente7-evidencia.css) los consumía sin red de
     seguridad — quedaban rotos. Se resuelven aquí por el mismo rol. */
  --p7-primary:        var(--p7-primario);
  --p7-primary-strong: var(--p7-primario-bajo);
  --p7-accent:         var(--p7-primario-alto);

  /* --- Tinta y neutrales: navy*, ink*, line*, n-* y bg/canvas ------------ */
  --p7-navy:     var(--p7-tinta);
  --p7-navy-500: var(--p7-tinta);
  --p7-navy-600: var(--p7-tinta);
  --p7-navy-700: var(--p7-tinta);
  --p7-navy-800: var(--p7-tinta);
  --p7-navy-900: var(--p7-tinta);
  --p7-navy-950: var(--p7-tinta);
  --p7-ink:         var(--p7-tinta);
  --p7-ink-1:       var(--p7-tinta);
  --p7-ink-2:       var(--p7-texto-suave);
  --p7-ink-faint:   var(--p7-texto-suave);
  --p7-ink-invert:  var(--p7-blanco);
  --p7-muted: var(--p7-texto-suave);
  --p7-faint: var(--p7-texto-suave);
  --p7-line:        var(--p7-borde);
  --p7-line-base:   var(--p7-borde);
  --p7-line-hair:   var(--p7-borde);
  --p7-line-soft:   var(--p7-borde);
  --p7-line-strong: var(--p7-borde-fuerte);
  --p7-bg:     var(--p7-fondo-calido);
  --p7-canvas: var(--p7-fondo-calido);
  --p7-surface:        var(--p7-superficie);
  --p7-surface-muted:  var(--p7-fondo-calido);
  --p7-surface-sunken: var(--p7-fondo-calido);
  /* Rampa n-* por intensidad: claros a fondo, medios a borde, oscuros a
     texto — el mismo criterio que ya separaba fondo/borde/texto en v1. */
  --p7-n-25:  var(--p7-fondo-gestion);
  --p7-n-100: var(--p7-fondo-calido);
  --p7-n-150: var(--p7-borde);
  --p7-n-200: var(--p7-borde);
  --p7-n-300: var(--p7-borde-fuerte);
  --p7-n-400: var(--p7-borde-fuerte);
  --p7-n-600: var(--p7-texto-suave);
  --p7-n-700: var(--p7-tinta);

  /* --- Semánticos: success/warning/danger* → ok/alerta/peligro ----------- */
  --p7-success:         var(--p7-ok);
  --p7-success-hover:   var(--p7-ok);
  --p7-success-text:    var(--p7-ok);
  --p7-success-surface: var(--p7-ok-tinte);
  --p7-success-border:  var(--p7-ok);
  --p7-warning:         var(--p7-alerta);
  --p7-warning-hover:   var(--p7-alerta);
  --p7-warning-text:    var(--p7-alerta);
  --p7-warning-surface: var(--p7-alerta-tinte);
  --p7-warning-border:  var(--p7-alerta);
  --p7-warning-soft:    var(--p7-alerta-tinte);
  --p7-danger:          var(--p7-peligro);
  --p7-danger-hover:    var(--p7-peligro);
  --p7-danger-text:     var(--p7-peligro);
  --p7-danger-surface:  var(--p7-peligro-tinte);
  --p7-danger-border:   var(--p7-peligro);
  --p7-danger-soft:     var(--p7-peligro-tinte);

  /* --- Foco: mismo patrón de dos anillos, con los colores v2 ------------- */
  --p7-ring:      0 0 0 2px var(--p7-superficie), 0 0 0 4px var(--p7-primario);
  --p7-ring-dark: 0 0 0 2px var(--p7-tinta), 0 0 0 4px var(--p7-primario-alto);
  --p7-ring-soft: 0 0 0 3px rgba(90, 72, 232, .18); /* --p7-primario en rgba */

  /* --- Elevación: 5 niveles viejos → los 2 de v2 + la sombra de marca ---- */
  --p7-elev-1:     var(--p7-sombra-1);
  --p7-elev-2:     var(--p7-sombra-1);
  --p7-elev-3:     var(--p7-sombra-2);
  --p7-elev-4:     var(--p7-sombra-2);
  --p7-elev-brand: var(--p7-sombra-marca);

  /* --- Movimiento: sin voz asignada, la curva sobria es el default ------- */
  --p7-ease:        var(--p7-curva-gestion);
  --p7-ease-in-out: var(--p7-curva-gestion);

  /* --- Forma: radios viejos → los 4 tamaños de v2 por cercanía de tamaño - */
  --p7-radius-xs: var(--p7-radio-s);  /* 6px  → 8px  */
  --p7-radius-sm: var(--p7-radio-s);  /* 8px  → 8px  */
  --p7-radius-md: var(--p7-radio-m);  /* 10px → 12px */
  --p7-radius-lg: var(--p7-radio-l);  /* 14px → 16px */
  --p7-radius-xl: var(--p7-radio-xl); /* 18px → 24px */
  /* Full es una forma, no un paso de la escala: se preserva literal. */
  --p7-radius-full: 999px;

  /* -----------------------------------------------------------------------
     Fuera de la paleta v2 — tipografía, espacio, capa Z y objetivo táctil.
     Esta tarea (Task 4) es solo la paleta; estos valores se preservan tal
     cual estaban en v1 porque las mismas 17 hojas los siguen consumiendo.
     -------------------------------------------------------------------- */
  --p7-font: var(--p7-fuente);

  --p7-text-2xs: 0.75rem;
  --p7-text-xs:  0.8125rem;
  --p7-text-sm:  0.875rem;
  --p7-text-md:  1rem;
  --p7-text-lg:  1.125rem;
  --p7-text-xl:  1.3125rem;
  --p7-text-2xl: 1.625rem;
  --p7-text-3xl: 2rem;

  --p7-lh-tight:   1.2;
  --p7-lh-snug:    1.35;
  --p7-lh-normal:  1.5;
  --p7-lh-relaxed: 1.65;

  --p7-track-display: -0.022em;
  --p7-track-title:   -0.014em;
  --p7-track-body:    -0.003em;
  --p7-track-over:     0.06em;

  --p7-weight-normal: 400;
  --p7-weight-medium: 500;
  --p7-weight-semi:   600;
  --p7-weight-bold:   700;

  --p7-space-1: 0.25rem;
  --p7-space-2: 0.5rem;
  --p7-space-3: 0.75rem;
  --p7-space-4: 1rem;
  --p7-space-5: 1.25rem;
  --p7-space-6: 1.5rem;
  --p7-space-8: 2rem;
  /* v2 no amplió la escala 1-8 y truncó aquí, pero templates/errors/base_error.html
     y templates/reset_send.html seguían pidiendo estos tres: la escala en sí no
     cambió de v1 a v2 (space-1..8 arriba son el mismo valor literal), así que el
     equivalente v2 es el mismo rem de siempre, no uno remapeado. */
  --p7-space-10: 2.5rem;
  --p7-space-12: 3rem;
  --p7-space-16: 4rem;

  --p7-touch: 44px;

  --p7-z-sidebar:  1050;
  --p7-z-backdrop: 1040;
  --p7-z-toast:    1080;
}