/* ────────────────────────────────────────────────────────────────────────────
 * theme.css — Capa semántica de color de Unabase Tasks
 *
 * colors.css trae la paleta cruda del design system (--bg-*) y los tokens
 * compartidos de la familia Unabase (--neutral-*, --primary-*, …). Este
 * archivo agrega la capa que faltaba: los tokens propios de Tasks, con un
 * valor por tema.
 *
 * Antes cada pantalla escribía el hex a mano (#1b2833 para una card,
 * #8ea3b1 para texto secundario, #3ddc97 para el acento) y por eso la app
 * solo podía existir en oscuro: el color vivía en 26 archivos .vue, no en
 * un lugar. Acá vive en un lugar.
 *
 * Convención de nombres: --t-<rol>[-<variante>].
 *
 * Los roles de TEXTO, RELLENO y BORDE están separados a propósito para los
 * colores de acento. El mismo mint que se lee perfecto sobre un fondo
 * oscuro (#3ddc97 sobre #101b23 = 8.9:1) es ilegible sobre blanco (1.7:1),
 * así que en claro el texto usa una versión oscurecida del mismo tono y el
 * relleno se queda vivo. Un solo token no puede hacer los dos trabajos.
 * ──────────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
 * MODO CLARO (día)
 * ══════════════════════════════════════════════════════════════════════════ */
:root.light-theme {
  color-scheme: light;

  /* ── Superficies ──────────────────────────────────────────────────────── */
  /* El fondo de la app no es blanco puro: un gris azulado del mismo tono
     206° de la marca cansa menos la vista en jornadas largas y deja que las
     cards blancas se despeguen del fondo sin necesidad de borde grueso. */
  --t-bg:              #f2f6fa;
  --t-surface:         #ffffff;   /* card estándar */
  --t-surface-sunken:  #e9eef5;   /* pozos: columnas kanban, tracks */
  --t-surface-raised:  #f6f9fc;   /* elementos sobre una card: inputs, chips */
  --t-surface-hover:   #eef3f8;   /* hover de fila / celda */
  --t-surface-strong:  #dfe7f0;   /* relleno neutro con peso */

  /* ── Bordes ───────────────────────────────────────────────────────────── */
  --t-border:          #dbe4ed;
  --t-border-soft:     #e7edf4;
  --t-border-strong:   #c3d0dd;

  /* ── Texto ────────────────────────────────────────────────────────────── */
  /* Los ratios están medidos contra --t-surface-strong (#dfe7f0), la
     superficie clara MÁS OSCURA de la paleta. Medirlos contra el fondo de
     página era optimista: el mismo texto sobre un chip con tinte caía por
     debajo de 4.5, y los chips son justo donde vive el texto de estado. */
  --t-text:            #132330;   /* títulos            — 12.8:1 */
  --t-text-2:          #2b3d4c;   /* cuerpo             —  9.0:1 */
  --t-text-3:          #455663;   /* secundario         —  6.1:1 */
  --t-text-4:          #4d606f;   /* sutil              —  5.2:1 */
  --t-text-5:          #546878;   /* tenue / captions   —  4.6:1 */
  --t-text-invert:     #ffffff;   /* sobre rellenos oscuros */
  /* Texto sobre un relleno saturado (badge, barra, pill). Es blanco en los
     dos temas a propósito: no se invierte con el tema, se define por el
     relleno que tiene debajo, que es el mismo en claro y en oscuro. */
  --t-on-fill:         #ffffff;

  /* ── Acento: mint de marca ────────────────────────────────────────────── */
  --t-accent-text:     #09734f;   /*  4.7:1 */
  --t-accent-strong:   #046b45;   /* hover del texto acento */
  --t-accent-border:   #19b483;
  --t-accent-fill:     #19c08a;
  --t-accent-soft:     #d8f5e9;   /* relleno pálido del acento */
  --t-on-accent:       #04261a;   /* texto sobre --t-accent-fill */

  /* ── Acento secundario: teal ──────────────────────────────────────────── */
  --t-teal-text:       #047264;
  --t-teal-fill:       #0d8475;
  --t-teal-border:     #4fb9ab;

  /* ── Estados ──────────────────────────────────────────────────────────── */
  --t-warn-text:       #96590a;   /*  4.5:1 */
  --t-warn-fill:       #f0a833;
  --t-warn-border:     #e0a13a;
  --t-warn-deep:       #7a4708;   /* texto sobre --t-tint-amber */

  --t-danger-text:     #c02a2e;   /*  4.7:1 */
  --t-danger-fill:     #da3a3f;
  --t-danger-border:   #e08487;
  --t-danger-deep:     #8f1f22;

  --t-info-text:       #1c5fc4;   /*  4.8:1 */
  --t-info-fill:       #3473da;
  --t-info-border:     #8fb4ee;
  --t-info-deep:       #14488f;

  --t-success-text:    #08744c;
  --t-success-fill:    #128658;
  --t-success-border:  #63c99b;

  --t-purple-text:     #5b46d6;   /*  5.1:1 */
  --t-purple-fill:     #7762e5;
  --t-purple-border:   #a99af5;

  --t-cyan-text:       #0d6e89;   /*  4.7:1 */
  --t-cyan-fill:       #2ca8c4;
  --t-cyan-border:     #6bb6c9;

  --t-orange-text:     #ac471e;
  --t-orange-fill:     #e8734a;

  /* ── Podio (costos / perfil) ──────────────────────────────────────────── */
  /* Los puntos de medalla son decorativos y pueden quedarse saturados; el
     numeral que los acompaña se lee, así que necesita su propia variante.
     En oscuro ambos coinciden — sobre #101b23 el dorado ya da 9.4:1. */
  --t-gold:            #d99a2b;
  --t-silver:          #8b9bab;
  --t-bronze:          #a4643a;
  --t-gold-text:       #865f1a;   /*  4.6:1 */
  --t-silver-text:     #5d6873;   /*  4.6:1 */
  --t-bronze-text:     #905833;   /*  4.6:1 */

  /* ── Tintes: fondos pálidos para chips y badges de estado ─────────────── */
  --t-tint-green:      #e2f7ee;
  --t-tint-amber:      #fdf1dd;
  --t-tint-red:        #fdeaea;
  --t-tint-blue:       #e8f0fd;
  --t-tint-purple:     #eeebfd;
  --t-tint-cyan:       #e2f4f9;
  --t-tint-orange:     #fdeee4;
  --t-tint-yellow:     #fbf5dc;
  --t-tint-neutral:    #eef2f7;

  /* Toasts: el par éxito/error tiene que leerse como un par. Derivados por
     separado quedaban desparejos (uno tinte pálido, el otro rojo sólido). */
  --t-toast-success-bg: #dff3e9;
  --t-toast-danger-bg:  #fbe3e3;

  /* ── Capas translúcidas ───────────────────────────────────────────────── */
  /* En oscuro los hovers y las hairlines se pintan con blanco al 3–12%; en
     claro hay que invertir la polaridad y oscurecer, o desaparecen. La tinta
     clara es el mismo #132330 de los títulos, no negro puro: sobre un fondo
     azulado, el negro puro se ve sucio.

     --t-line-*  hairlines y bordes translúcidos (1 = apenas visible, 5 = marcado)
     --t-fill-*  rellenos translúcidos: hover de fila, selección
     --t-shade-* tinta de las sombras (1 = sutil, 4 = modal elevado)  */
  --t-line-1:          rgba(19, 35, 48, 0.05);
  --t-line-2:          rgba(19, 35, 48, 0.07);
  --t-line-3:          rgba(19, 35, 48, 0.09);
  --t-line-4:          rgba(19, 35, 48, 0.12);
  --t-line-5:          rgba(19, 35, 48, 0.20);

  --t-fill-1:          rgba(19, 35, 48, 0.03);
  --t-fill-2:          rgba(19, 35, 48, 0.04);
  --t-fill-3:          rgba(19, 35, 48, 0.06);
  --t-fill-4:          rgba(19, 35, 48, 0.09);
  --t-fill-5:          rgba(19, 35, 48, 0.14);

  --t-shade-1:         rgba(19, 35, 48, 0.06);
  --t-shade-2:         rgba(19, 35, 48, 0.10);
  --t-shade-3:         rgba(19, 35, 48, 0.14);
  --t-shade-4:         rgba(19, 35, 48, 0.18);

  --t-hover-1:         rgba(19, 35, 48, 0.03);
  --t-hover-2:         rgba(19, 35, 48, 0.05);
  --t-hover-3:         rgba(19, 35, 48, 0.07);
  --t-hover-4:         rgba(19, 35, 48, 0.10);
  --t-scrim:           rgba(19, 35, 48, 0.42);

  /* ── Tinta del login ──────────────────────────────────────────────────── */
  /* La portada (login y registro) tiene su propia tinta: un crema cálido
     #f5f0e6 a distintas opacidades sobre el panel oscuro. Es una decisión de
     diseño de esa pantalla, no del sistema, así que en oscuro se conserva el
     valor compuesto EXACTO y en claro se traduce a la jerarquía equivalente.
     La jerarquía se INVIERTE: la tinta más opaca (la más prominente sobre
     oscuro) es la más oscura sobre claro. */
  --t-login-ink-1:     #2b3d4c;   /*  9.0:1  — títulos */
  --t-login-ink-2:     #354756;   /*  7.6:1 */
  --t-login-ink-3:     #455663;   /*  6.1:1 */
  --t-login-ink-4:     #4c6072;   /*  5.2:1 */
  --t-login-ink-5:     #546878;   /*  4.6:1 */
  --t-login-ink-6:     #546878;   /*  4.6:1 */
  --t-login-ink-7:     #57697b;   /*  4.5:1  — placeholders */
  --t-login-ink-8:     #57697b;   /*  4.5:1 */

  /* ── Sobre media ──────────────────────────────────────────────────────── */
  /* El panel de la portada es una foto con un velo oscuro encima: se queda
     oscuro en los dos temas. El texto que va ahí NO puede seguir al tema —
     con la tinta clara del modo día se volvía invisible sobre la foto.
     Mismo valor en claro y en oscuro, a propósito. */
  --t-on-media:        #ffffff;
  --t-on-media-dim:    rgba(255, 255, 255, 0.72);
  --t-on-media-faint:  rgba(255, 255, 255, 0.30);

  /* ── Sombras ──────────────────────────────────────────────────────────── */
  --t-shadow-1:        0 1px 2px rgba(19, 35, 48, 0.06);
  --t-shadow-2:        0 4px 12px rgba(19, 35, 48, 0.08);
  --t-shadow-3:        0 12px 32px rgba(19, 35, 48, 0.12);
  --t-shadow-4:        0 18px 44px rgba(19, 35, 48, 0.16);

  /* ── Compatibilidad con los nombres --tasks-* que ya usaba el shell ───── */
  --tasks-bg-app:      var(--t-bg);
  --tasks-surface-1:   var(--t-surface-sunken);
  --tasks-surface-2:   var(--t-surface);
  --tasks-border:      var(--t-border);

  /* ── Nombres del design system compartido que no llegaron a colors.css ──
   * `--neutral-background-strong` y `--border` se usan en gantt.vue y en
   * usuarios.vue con un fallback oscuro escrito a mano. colors.css nunca los
   * definió: vivían en el bloque copiado de People que aquí estaba muerto, y
   * al retirarlo el `var()` empezó a caer al fallback en los dos temas — el
   * Gantt se quedó con la grilla oscura en pleno modo día.
   * Se definen aquí, apuntando a la capa semántica de Tasks. */
  --neutral-background-strong: var(--t-surface);
  --neutral-text-muted:        var(--t-text-4);
  --border:                    var(--t-border);

  /* ── Texto compartido, ajustado para el modo día ───────────────────────
   * colors.css define la escala de texto neutra para toda la familia
   * Unabase, pero sus escalones bajos no llegan a AA sobre fondo claro:
   * --neutral-text-subtitle da 3.2:1 sobre un chip con tinte y
   * --neutral-text-caption 2.1:1. En el Gantt eso deja el nombre del
   * responsable casi ilegible.
   *
   * Se reapuntan a la escala de Tasks, que sí está verificada. No se toca
   * colors.css: es el archivo compartido con los otros módulos y no me
   * corresponde cambiarles el contraste desde aquí.
   *
   * --neutral-text-disabled se queda como está: un control deshabilitado
   * debe leerse como deshabilitado, y WCAG exime a los elementos inactivos. */
  --neutral-text-subtitle: var(--t-text-3);
  --neutral-text-caption:  var(--t-text-5);

  /* ══════════════════════════════════════════════════════════════════════
   * Variantes heredadas
   *
   * La app venía con 227 colores escritos a mano. Unos 40 son el sistema
   * (los tokens de arriba); el resto son elecciones puntuales de una
   * pantalla concreta. Consolidarlas a la fuerza habría cambiado el aspecto
   * del modo oscuro, que nadie pidió cambiar, así que cada una conserva su
   * valor oscuro EXACTO y recibe un valor claro derivado de su rol.
   *
   * Las que estaban a menos de Δ26 (imperceptible) sí se agruparon: el
   * comentario de cada token dice qué hex absorbió.
   *
   * El índice va de más claro a más oscuro dentro de cada familia y rol.
   * El sufijo -flat marca un relleno decorativo —una barra, un rombo, un
   * punto— que no lleva texto encima y por eso conserva su viveza en claro
   * en lugar de oscurecerse para hacer legible un texto que no existe.
   *
   * Son deuda de diseño, no vocabulario: al tocar una pantalla, cambiar su
   * variante por el token semántico que le corresponda es una mejora.
   * ══════════════════════════════════════════════════════════════════════ */

  /* ── Ámbar ── */
  --t-amber-surface-1:       #ba5c12;   /* fondo, 1 uso */
  --t-amber-surface-2:       #b55d12;   /* fondo, 1 uso */
  --t-amber-surface-3:       #f9f3e6;   /* fondo, 2 usos, absorbe #453a1c */
  --t-amber-surface-flat-1:  #d4a34a;   /* fondo decorativo, 1 uso */
  --t-amber-surface-flat-2:  #f9f4e6;   /* fondo decorativo, 1 uso */
  --t-amber-border-1:        #d1be8a;   /* borde, 1 uso */
  --t-amber-border-2:        #d5be81;   /* borde, 6 usos, absorbe #5a3a1e */
  --t-amber-text-1:          #7c6332;   /* texto, 4 usos */
  --t-amber-text-2:          #875e36;   /* texto, 1 uso */
  --t-amber-text-3:          #806114;   /* texto, 3 usos */
  --t-amber-text-4:          #7b6128;   /* texto, 2 usos */
  --t-amber-text-5:          #72643b;   /* texto, 1 uso */
  --t-amber-text-6:          #7d642b;   /* texto, 1 uso */
  --t-amber-text-7:          #8d5b11;   /* texto, 2 usos, absorbe #d4a34a */
  --t-amber-text-8:          #7f6010;   /* texto, 1 uso */
  --t-amber-text-9:          #855d25;   /* texto, 2 usos */
  --t-amber-text-10:         #895c11;   /* texto, 2 usos */
  --t-amber-text-11:         #746645;   /* texto, 2 usos */
  --t-amber-text-12:         #321b0b;   /* texto, 1 uso */

  /* ── Azul / gris azulado ── */
  --t-blue-surface-1:       #e9f0f7;   /* fondo, 3 usos, absorbe #1b2a36 */
  --t-blue-surface-flat-1:  #eaf0f6;   /* fondo decorativo, 1 uso */
  --t-blue-surface-flat-2:  #e8f1f7;   /* fondo decorativo, 1 uso */
  --t-blue-border-1:        #9eb0bc;   /* borde, 1 uso */
  --t-blue-border-2:        #a1c5cf;   /* borde, 3 usos, absorbe #2a3a4a #24404a */
  --t-blue-border-3:        #b0c2d3;   /* borde, 4 usos, absorbe #1e2b36 */
  --t-blue-border-4:        #85c9e0;   /* borde, 2 usos */
  --t-blue-text-1:          #215ae4;   /* texto, 2 usos */
  --t-blue-text-2:          #4f33e6;   /* texto, 1 uso */
  --t-blue-text-3:          #4e697e;   /* texto, 31 uso, absorbe #b9c9d4 #b6c6d1 #a8bbc8 */
  --t-blue-text-4:          #4f6a7d;   /* texto, 11 uso, absorbe #9fbccb #9fb6c6 #9fb6c2 #9fb3bf */
  --t-blue-text-5:          #526a7a;   /* texto, 1 uso */
  --t-blue-text-6:          #56697a;   /* texto, 12 usos, absorbe #55697a #546a7a #4a5c6b */
  --t-blue-text-7:          #4b5563;   /* texto, 5 usos, absorbe #43596a */
  --t-blue-text-8:          #374151;   /* texto, 2 usos */
  --t-blue-text-9:          #24323e;   /* texto, 2 usos, absorbe #1a2332 */
  --t-blue-text-10:         #072c39;   /* texto, 3 usos, absorbe #002c3e */
  --t-blue-text-11:         #13202a;   /* texto, 11 uso, absorbe #0f1a22 #0f1620 #0a1218 #04121a */

  /* ── Cian / teal ── */
  --t-cyan-surface-1:       #26856e;   /* fondo, 5 usos, absorbe #2fbf8f */
  --t-cyan-surface-2:       #0d836b;   /* fondo, 3 usos, absorbe #06ccb4 */
  --t-cyan-surface-flat-1:  #3ac7a5;   /* fondo decorativo, 1 uso */
  --t-cyan-surface-flat-2:  #14cca8;   /* fondo decorativo, 6 usos, absorbe #0dcfa8 */
  --t-cyan-surface-flat-3:  #05b8a2;   /* fondo decorativo, 1 uso */
  --t-cyan-surface-flat-4:  #21867a;   /* fondo decorativo, 1 uso */
  --t-cyan-border-1:        #78cddd;   /* borde, 1 uso */
  --t-cyan-border-2:        #64cfd8;   /* borde, 1 uso */
  --t-cyan-border-3:        #64d3b8;   /* borde, 7 usos */
  --t-cyan-border-4:        #54d4ba;   /* borde, 4 usos, absorbe #06ccb4 */
  --t-cyan-text-1:          #3a6f5e;   /* texto, 1 uso */
  --t-cyan-text-2:          #146e76;   /* texto, 1 uso */
  --t-cyan-text-3:          #20715d;   /* texto, 14 usos */
  --t-cyan-text-4:          #1e7167;   /* texto, 7 usos */
  --t-cyan-text-5:          #0e715d;   /* texto, 1 uso */

  /* ── Verde ── */
  --t-green-surface-1:       #e6f9f2;   /* fondo, 1 uso */
  --t-green-surface-flat-1:  #e9f6f1;   /* fondo decorativo, 1 uso */
  --t-green-border-1:        #9acbb6;   /* borde, 6 usos, absorbe #2c5a44 #2c4d40 #2c4a3c */
  --t-green-text-1:          #1b7444;   /* texto, 1 uso */
  --t-green-text-2:          #406e58;   /* texto, 2 usos */
  --t-green-text-3:          #14764f;   /* texto, 1 uso */
  --t-green-text-4:          #25744a;   /* texto, 2 usos */
  --t-green-text-5:          #546d5f;   /* texto, 1 uso */

  /* ── Rojo ── */
  --t-red-surface-1:       #e91c1c;   /* fondo, 1 uso */
  --t-red-surface-2:       #dc2626;   /* fondo, 1 uso */
  --t-red-surface-3:       #f6eaec;   /* fondo, 1 uso */
  --t-red-surface-flat-1:  #df494e;   /* fondo decorativo, 1 uso */
  --t-red-border-1:        #ddb6ba;   /* borde, 3 usos, absorbe #5a2a2e */
  --t-red-border-2:        #d6b8bb;   /* borde, 2 usos, absorbe #4d2528 */
  --t-red-text-1:          #c32518;   /* texto, 6 usos, absorbe #e5807f */
  --t-red-text-2:          #cc1919;   /* texto, 3 usos */

  /* ── Amarillo ── */
  --t-yellow-text-1:  #7b650f;   /* texto, 3 usos */
}

/* ══════════════════════════════════════════════════════════════════════════
 * MODO OSCURO (noche)
 *
 * Los valores son exactamente los hex que la app ya usaba hardcodeados, así
 * que el oscuro no cambia de aspecto al migrar: solo dejó de estar escrito
 * a mano en 26 archivos.
 * ══════════════════════════════════════════════════════════════════════════ */
:root.dark-theme {
  color-scheme: dark;

  /* ── Superficies ──────────────────────────────────────────────────────── */
  --t-bg:              #101b23;
  --t-surface:         #1b2833;
  --t-surface-sunken:  #16222c;
  --t-surface-raised:  #22303c;
  --t-surface-hover:   #24323e;
  --t-surface-strong:  #2e4152;

  /* ── Bordes ───────────────────────────────────────────────────────────── */
  --t-border:          #2c3d4a;
  --t-border-soft:     #23303c;
  --t-border-strong:   #3b4f60;

  /* ── Texto ────────────────────────────────────────────────────────────── */
  --t-text:            #e8eef2;
  --t-text-2:          #cfe0ec;
  --t-text-3:          #8ea3b1;
  --t-text-4:          #7b8f9d;
  --t-text-5:          #64798a;
  --t-text-invert:     #0b1016;
  --t-on-fill:         #ffffff;

  /* ── Acento: mint de marca ────────────────────────────────────────────── */
  --t-accent-text:     #3ddc97;
  --t-accent-strong:   #57e6a8;
  --t-accent-border:   #3ddc97;
  --t-accent-fill:     #3ddc97;
  --t-accent-soft:     #14352a;
  --t-on-accent:       #0f1b16;

  /* ── Acento secundario: teal ──────────────────────────────────────────── */
  --t-teal-text:       #06ccb4;
  --t-teal-fill:       #2a9d8f;
  --t-teal-border:     #3d94a8;

  /* ── Estados ──────────────────────────────────────────────────────────── */
  --t-warn-text:       #f0b352;
  --t-warn-fill:       #f0b352;
  --t-warn-border:     #f0b352;
  --t-warn-deep:       #f3c98b;

  --t-danger-text:     #e56b6f;
  --t-danger-fill:     #e5484d;
  --t-danger-border:   #e56b6f;
  --t-danger-deep:     #fca5a5;

  --t-info-text:       #5b9bf8;
  --t-info-fill:       #5b9bf8;
  --t-info-border:     #5b9bf8;
  --t-info-deep:       #8fc0ff;

  --t-success-text:    #4ade80;
  --t-success-fill:    #4ade80;
  --t-success-border:  #4ade80;

  --t-purple-text:     #9b8cf5;
  --t-purple-fill:     #9b8cf5;
  --t-purple-border:   #9b8cf5;

  --t-cyan-text:       #7fd7e8;
  --t-cyan-fill:       #45d4e0;
  --t-cyan-border:     #3d94a8;

  --t-orange-text:     #e8734a;
  --t-orange-fill:     #e8734a;

  /* ── Podio ────────────────────────────────────────────────────────────── */
  --t-gold:            #f0b352;
  --t-silver:          #b8c6d0;
  --t-bronze:          #cd8b5c;
  --t-gold-text:       #f0b352;
  --t-silver-text:     #b8c6d0;
  --t-bronze-text:     #cd8b5c;

  /* ── Tintes ───────────────────────────────────────────────────────────── */
  --t-tint-green:      #14352a;
  --t-tint-amber:      #2b2118;
  --t-tint-red:        #4d2528;
  --t-tint-blue:       #23384d;
  --t-tint-purple:     #241f38;
  --t-tint-cyan:       #062d3a;
  --t-tint-orange:     #2a1d12;
  --t-tint-yellow:     #2a2416;
  --t-tint-neutral:    #22303c;

  /* Toasts */
  --t-toast-success-bg: #065f46;
  --t-toast-danger-bg:  #7f1d1d;

  /* ── Capas translúcidas ───────────────────────────────────────────────── */
  --t-line-1:          rgba(255, 255, 255, 0.03);
  --t-line-2:          rgba(255, 255, 255, 0.05);
  --t-line-3:          rgba(255, 255, 255, 0.08);
  --t-line-4:          rgba(255, 255, 255, 0.12);
  --t-line-5:          rgba(255, 255, 255, 0.25);

  --t-fill-1:          rgba(255, 255, 255, 0.03);
  --t-fill-2:          rgba(255, 255, 255, 0.05);
  --t-fill-3:          rgba(255, 255, 255, 0.08);
  --t-fill-4:          rgba(255, 255, 255, 0.14);
  --t-fill-5:          rgba(255, 255, 255, 0.20);

  --t-shade-1:         rgba(0, 0, 0, 0.08);
  --t-shade-2:         rgba(0, 0, 0, 0.35);
  --t-shade-3:         rgba(0, 0, 0, 0.50);
  --t-shade-4:         rgba(0, 0, 0, 0.62);

  --t-hover-1:         rgba(255, 255, 255, 0.03);
  --t-hover-2:         rgba(255, 255, 255, 0.06);
  --t-hover-3:         rgba(255, 255, 255, 0.10);
  --t-hover-4:         rgba(255, 255, 255, 0.14);
  --t-scrim:           rgba(0, 0, 0, 0.60);

  /* ── Tinta del login ──────────────────────────────────────────────────── */
  /* Crema #f5f0e6 compuesto sobre #101b23 a la opacidad que tenía cada uso:
     el aspecto de la portada en oscuro no cambia ni un píxel. */
  --t-login-ink-1:     #bcbbb5;   /* era rgba(245,240,230,0.75) */
  --t-login-ink-2:     #b0b0ac;   /* 0.70 */
  --t-login-ink-3:     #838685;   /* 0.50 */
  --t-login-ink-4:     #777b7b;   /* 0.45 */
  --t-login-ink-5:     #6c7071;   /* 0.40 */
  --t-login-ink-6:     #606667;   /* 0.35 */
  --t-login-ink-7:     #555b5e;   /* 0.30 */
  --t-login-ink-8:     #495054;   /* 0.25 */

  /* ── Sobre media ──────────────────────────────────────────────────────── */
  /* El panel de la portada es una foto con un velo oscuro encima: se queda
     oscuro en los dos temas. El texto que va ahí NO puede seguir al tema —
     con la tinta clara del modo día se volvía invisible sobre la foto.
     Mismo valor en claro y en oscuro, a propósito. */
  --t-on-media:        #ffffff;
  --t-on-media-dim:    rgba(255, 255, 255, 0.72);
  --t-on-media-faint:  rgba(255, 255, 255, 0.30);

  /* ── Sombras ──────────────────────────────────────────────────────────── */
  --t-shadow-1:        0 1px 2px rgba(0, 0, 0, 0.30);
  --t-shadow-2:        0 4px 12px rgba(0, 0, 0, 0.35);
  --t-shadow-3:        0 12px 32px rgba(0, 0, 0, 0.45);
  --t-shadow-4:        0 18px 44px rgba(0, 0, 0, 0.50);

  /* ── Compatibilidad --tasks-* ─────────────────────────────────────────── */
  --tasks-bg-app:      var(--t-bg);
  --tasks-surface-1:   var(--t-surface-sunken);
  --tasks-surface-2:   var(--t-surface);
  --tasks-border:      var(--t-border);

  /* ── Nombres del design system compartido (ver el bloque claro) ── */
  --neutral-background-strong: var(--t-surface);
  --neutral-text-muted:        var(--t-text-4);
  --border:                    var(--t-border);

  /* ══════════════════════════════════════════════════════════════════════
   * Variantes heredadas
   *
   * La app venía con 227 colores escritos a mano. Unos 40 son el sistema
   * (los tokens de arriba); el resto son elecciones puntuales de una
   * pantalla concreta. Consolidarlas a la fuerza habría cambiado el aspecto
   * del modo oscuro, que nadie pidió cambiar, así que cada una conserva su
   * valor oscuro EXACTO y recibe un valor claro derivado de su rol.
   *
   * Las que estaban a menos de Δ26 (imperceptible) sí se agruparon: el
   * comentario de cada token dice qué hex absorbió.
   *
   * El índice va de más claro a más oscuro dentro de cada familia y rol.
   * El sufijo -flat marca un relleno decorativo —una barra, un rombo, un
   * punto— que no lleva texto encima y por eso conserva su viveza en claro
   * en lugar de oscurecerse para hacer legible un texto que no existe.
   *
   * Son deuda de diseño, no vocabulario: al tocar una pantalla, cambiar su
   * variante por el token semántico que le corresponda es una mejora.
   * ══════════════════════════════════════════════════════════════════════ */

  /* ── Ámbar ── */
  --t-amber-surface-1:       #f4a261;   /* fondo, 1 uso */
  --t-amber-surface-2:       #f0872e;   /* fondo, 1 uso */
  --t-amber-surface-3:       #4a3a1c;   /* fondo, 2 usos, absorbe #453a1c */
  --t-amber-surface-flat-1:  #d4a34a;   /* fondo decorativo, 1 uso */
  --t-amber-surface-flat-2:  #57491f;   /* fondo decorativo, 1 uso */
  --t-amber-border-1:        #6b5a2a;   /* borde, 1 uso */
  --t-amber-border-2:        #5a4a1e;   /* borde, 6 usos, absorbe #5a3a1e */
  --t-amber-text-1:          #f5f0e6;   /* texto, 4 usos */
  --t-amber-text-2:          #e6d3c0;   /* texto, 1 uso */
  --t-amber-text-3:          #f0d9a0;   /* texto, 3 usos */
  --t-amber-text-4:          #d9c08a;   /* texto, 2 usos */
  --t-amber-text-5:          #b9a878;   /* texto, 1 uso */
  --t-amber-text-6:          #c9a961;   /* texto, 1 uso */
  --t-amber-text-7:          #e8a33d;   /* texto, 2 usos, absorbe #d4a34a */
  --t-amber-text-8:          #fbbf24;   /* texto, 1 uso */
  --t-amber-text-9:          #c98f3d;   /* texto, 2 usos */
  --t-amber-text-10:         #f59e0b;   /* texto, 2 usos */
  --t-amber-text-11:         #8a7a52;   /* texto, 2 usos */
  --t-amber-text-12:         #1a0e06;   /* texto, 1 uso */

  /* ── Azul / gris azulado ── */
  --t-blue-surface-1:       #223140;   /* fondo, 3 usos, absorbe #1b2a36 */
  --t-blue-surface-flat-1:  #2a3947;   /* fondo decorativo, 1 uso */
  --t-blue-surface-flat-2:  #1b2a36;   /* fondo decorativo, 1 uso */
  --t-blue-border-1:        #8ea3b1;   /* borde, 1 uso */
  --t-blue-border-2:        #2a4a52;   /* borde, 3 usos, absorbe #2a3a4a #24404a */
  --t-blue-border-3:        #22303d;   /* borde, 4 usos, absorbe #1e2b36 */
  --t-blue-border-4:        #062d3a;   /* borde, 2 usos */
  --t-blue-text-1:          #eef3ff;   /* texto, 2 usos */
  --t-blue-text-2:          #b9adf8;   /* texto, 1 uso */
  --t-blue-text-3:          #b9c8d4;   /* texto, 31 uso, absorbe #b9c9d4 #b6c6d1 #a8bbc8 */
  --t-blue-text-4:          #a7bac7;   /* texto, 11 uso, absorbe #9fbccb #9fb6c6 #9fb6c2 #9fb3bf */
  --t-blue-text-5:          #93a8b6;   /* texto, 1 uso */
  --t-blue-text-6:          #56697a;   /* texto, 12 usos, absorbe #55697a #546a7a #4a5c6b */
  --t-blue-text-7:          #4b5563;   /* texto, 5 usos, absorbe #43596a */
  --t-blue-text-8:          #374151;   /* texto, 2 usos */
  --t-blue-text-9:          #24323e;   /* texto, 2 usos, absorbe #1a2332 */
  --t-blue-text-10:         #062d3a;   /* texto, 3 usos, absorbe #002c3e */
  --t-blue-text-11:         #101b23;   /* texto, 11 uso, absorbe #0f1a22 #0f1620 #0a1218 #04121a */

  /* ── Cian / teal ── */
  --t-cyan-surface-1:       #3ac7a5;   /* fondo, 5 usos, absorbe #2fbf8f */
  --t-cyan-surface-2:       #0dcfa8;   /* fondo, 3 usos, absorbe #06ccb4 */
  --t-cyan-surface-flat-1:  #3ac7a5;   /* fondo decorativo, 1 uso */
  --t-cyan-surface-flat-2:  #15dab3;   /* fondo decorativo, 6 usos, absorbe #0dcfa8 */
  --t-cyan-surface-flat-3:  #05b8a2;   /* fondo decorativo, 1 uso */
  --t-cyan-surface-flat-4:  #21867a;   /* fondo decorativo, 1 uso */
  --t-cyan-border-1:        #7fd7e8;   /* borde, 1 uso */
  --t-cyan-border-2:        #45d4e0;   /* borde, 1 uso */
  --t-cyan-border-3:        #3ac7a5;   /* borde, 7 usos */
  --t-cyan-border-4:        #0dcfa8;   /* borde, 4 usos, absorbe #06ccb4 */
  --t-cyan-text-1:          #d1e7e0;   /* texto, 1 uso */
  --t-cyan-text-2:          #45d4e0;   /* texto, 1 uso */
  --t-cyan-text-3:          #3ac7a5;   /* texto, 14 usos */
  --t-cyan-text-4:          #2a9d8f;   /* texto, 7 usos */
  --t-cyan-text-5:          #0aa888;   /* texto, 1 uso */

  /* ── Verde ── */
  --t-green-surface-1:       #1d4d3a;   /* fondo, 1 uso */
  --t-green-surface-flat-1:  #2c4d40;   /* fondo decorativo, 1 uso */
  --t-green-border-1:        #2f5a48;   /* borde, 6 usos, absorbe #2c5a44 #2c4d40 #2c4a3c */
  --t-green-text-1:          #a8ebc7;   /* texto, 1 uso */
  --t-green-text-2:          #9fc7b4;   /* texto, 2 usos */
  --t-green-text-3:          #6ee7b7;   /* texto, 1 uso */
  --t-green-text-4:          #7fd6a8;   /* texto, 2 usos */
  --t-green-text-5:          #7d9b8a;   /* texto, 1 uso */

  /* ── Rojo ── */
  --t-red-surface-1:       #f87171;   /* fondo, 1 uso */
  --t-red-surface-2:       #dc2626;   /* fondo, 1 uso */
  --t-red-surface-3:       #2a1c1e;   /* fondo, 1 uso */
  --t-red-surface-flat-1:  #e56b6f;   /* fondo decorativo, 1 uso */
  --t-red-border-1:        #6b3138;   /* borde, 3 usos, absorbe #5a2a2e */
  --t-red-border-2:        #4a2b2e;   /* borde, 2 usos, absorbe #4d2528 */
  --t-red-text-1:          #f0837a;   /* texto, 6 usos, absorbe #e5807f */
  --t-red-text-2:          #ef4444;   /* texto, 3 usos */

  /* ── Amarillo ── */
  --t-yellow-text-1:  #fde68a;   /* texto, 3 usos */
}

/* ══════════════════════════════════════════════════════════════════════════
 * Base que depende del tema
 * ══════════════════════════════════════════════════════════════════════════ */
body {
  background-color: var(--t-bg);
  color: var(--t-text-2);
}

/* La barra de scroll con el acento del tema (styles.css la pinta con
   --bg-primary-500, que en claro queda demasiado saturada). */
.scroll::-webkit-scrollbar-thumb { background-color: var(--t-border-strong); }
.scroll:hover::-webkit-scrollbar-thumb { background-color: var(--t-text-5); }

/* Autofill de Chrome: sin esto pinta los inputs de amarillo en claro y de
   azul en oscuro, ignorando la card que los contiene. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--t-text);
  -webkit-box-shadow: 0 0 0 1000px var(--t-surface-raised) inset;
  caret-color: var(--t-text);
}

::selection { background: var(--t-accent-fill); color: var(--t-on-accent); }