/* Modo Light - tokens semanticos */
[data-mode="light"] {
    --color-bg: #f5f6f8;
    --color-surface: #ffffff;
    --color-surface-2: #f9fafb;
    --color-surface-elevated: #ffffff;
    /* RAISED: el bloque que se DESPEGA de la tarjeta sin ser un modal — el
       globito del chat, el nodo del diagrama de dependencias, el recuadro de
       tratamiento externo del formulario de subtarea, el hover del multiselect,
       la fila «tuya» de la tabla de subtareas y la fila de total del BOM.
       Se usaba en 9 lugares SIN estar declarada en ningun lado: una `var()` sin
       valor no pinta, asi que los nueve fondos venian TRANSPARENTES. Medido en
       el navegador (recorrido visual de la etapa 5): la fila resaltada computaba
       `rgba(0, 0, 0, 0)`, identica a una ajena, en los dos temas.
       Un solo valor sirve a los nueve: un escalon MAS que --color-surface-2
       (que ya es el hover de la tabla y el fondo del `th`), para que se note
       sobre la tarjeta blanca sin gritar. Si se lo acerca a --color-surface-2,
       la fila propia desaparece al pasarle el mouse por arriba. */
    --color-surface-raised: #f1f3f5;
    --color-border: #e5e7eb;
    --color-border-strong: #d1d5db;

    --color-fg: #1f2937;
    --color-fg-muted: #6b7280;
    --color-fg-subtle: #9ca3af;
    --color-fg-inverse: #ffffff;

    --color-link: var(--color-primary);
    --color-link-hover: var(--color-primary-strong);

    /* SEMANTICOS. Dos tokens por color, a proposito:
         --color-<x>      el RELLENO (fondo de .btn--<x>, bordes, iconos). NO se
                          toca: es la identidad visual elegida.
         --color-<x>-fg   el TEXTO cuando va encima de --color-<x>-bg (el fondo
                          palido de .badge--<x> y .alert--<x>).
       Por que existe el segundo. Medido en el recorrido visual: con el mismo
       token para las dos cosas, los badges claros quedaban por DEBAJO de AA
       (4,5:1) — warning 2,86 · success 3,00 · info 3,29 · danger 3,95. Un chip
       de estado es texto chico y en un taller a la intemperie eso no se lee.
       El -fg es el MISMO color, misma tonalidad y misma saturacion, con la
       luminosidad HSL bajada lo justo para llegar a 4,5 (se busco el minimo, no
       un color nuevo):
         success #16a34a -> #11813a   3,00 -> 4,53
         warning #d97706 -> #a75c05   2,86 -> 4,52
         danger  #dc2626 -> #cc2121   3,95 -> 4,52
         info    #0891b2 -> #077894   3,29 -> 4,55
       Como el relleno queda intacto, ningun boton, borde ni icono cambia de
       color: cambia SOLO el texto que no se leia. */
    --color-success: #16a34a;
    --color-success-fg: #11813a;
    --color-success-bg: #dcfce7;
    --color-success-subtle: #f0fdf4;
    --color-success-muted: #dcfce7;
    --color-warning: #d97706;
    --color-warning-fg: #a75c05;
    --color-warning-bg: #fef3c7;
    --color-warning-subtle: #fffbeb;
    --color-warning-muted: #fef3c7;
    --color-danger: #dc2626;
    --color-danger-fg: #cc2121;
    --color-danger-bg: #fee2e2;
    --color-danger-subtle: #fef2f2;
    --color-danger-muted: #fee2e2;
    --color-info: #0891b2;
    --color-info-fg: #077894;
    --color-info-bg: #cffafe;
    --color-info-subtle: #ecfeff;
    --color-info-muted: #cffafe;

    /* Alias para nomenclaturas alternativas usadas en templates */
    --color-surface-alt: var(--color-surface-2);
    --color-text: var(--color-fg);
    --color-text-muted: var(--color-fg-muted);
    --color-text-subtle: var(--color-fg-subtle);
    /* Alias historicos (hoy sin uso en el repo): apuntan al token de TEXTO, que
       es lo que su nombre dice — "fg on danger" = el color de la letra encima
       de un fondo de peligro. */
    --color-fg-on-danger: var(--color-danger-fg);
    --color-fg-on-success: var(--color-success-fg);
    --color-fg-on-warning: var(--color-warning-fg);
    --radius: var(--radius-md);

    --color-sidebar-bg: #ffffff;
    --color-sidebar-fg: #374151;
    --color-sidebar-fg-active: #111827;
    --color-sidebar-bg-active: rgba(0, 0, 0, 0.06);

    --color-topbar-bg: #ffffff;
    --color-topbar-fg: #1f2937;
    --color-topbar-border: #e5e7eb;

    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05);
}