/* =============================
   Design Tokens (Light default)
   ============================= */
:root {
  /* Typographic scale (canonical font sizes; +2px sobre la escala antigua) */
  --fs-3xs: 0.75rem; /* 12px */
  --fs-2xs: 0.8125rem; /* 13px */
  --fs-xs: 0.875rem; /* 14px */
  --fs-sm: 0.9375rem; /* 15px */
  --fs-base: 1rem; /* 16px */
  --fs-md: 1.0625rem; /* 17px */
  --fs-lg: 1.125rem; /* 18px */
  --fs-xl: 1.25rem; /* 20px */
  --fs-2xl: 1.375rem; /* 22px */
  --fs-3xl: 1.625rem; /* 26px */
  --fs-4xl: 1.875rem; /* 30px */
  --fs-5xl: 2.125rem; /* 34px */
  --fs-6xl: 2.5rem; /* 40px */

  /* TRES PESOS (DSFR, 9-oct-2026). Las fuentes se cargan solo en 400, 500, 600 y 700
     (`app.html`), así que un 620, un 650 o un 800 ya se veían como 700 —el navegador toma el
     peso cargado más cercano— y pasarlos a `--fw-bold` no cambia nada en pantalla. El 600 es
     el énfasis de la app (387 usos medidos), y por eso es el del medio. Lo que estaba en 500
     se repartió por lo que es: rótulos, nombres y controles a 600; texto secundario (fechas,
     costos, conteos) e ítems de menú o navegación a 400, como en Primer y Material. Lo cuida
     `tres-pesos-y-cuatro-interlineados`. */
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* INTERLINEADO. Había 22 valores; cada token toma el grupo que mueve menos lo que se ve:
     · cifra    1.1  — números grandes y títulos de portada (1.04–1.15), donde lo apretado es a
                       propósito;
     · ajustada 1.25 — títulos y controles de una línea (1.2–1.3);
     · normal   1.45 — el texto de la interfaz (1.35–1.5): ninguno se mueve más de 0.1;
     · lectura  1.6  — párrafos para leer de corrido (1.55–1.7).
     `0` y `1` no son interlineado, son geometría (centrar un ícono o una pastilla en su caja),
     y se escriben tal cual. */
  --lh-cifra: 1.1;
  --lh-ajustada: 1.25;
  --lh-normal: 1.45;
  --lh-lectura: 1.6;

  /* Escala de espacios: rellenos, márgenes y separaciones (`gap`).
     GRILLA DE 4 PX, como la del DSFR: el número dice cuántas veces 4 px (`--sp-3` = 12 px), así
     que se lee sin tabla. En rem para que crezca con la letra que eligió la persona. El medio
     paso de 2 px existe para los ajustes finos (un borde, una pastilla) y no para el ritmo.
     Antes no había escala: el 9-oct-2026 había 3084 declaraciones de espacio escritas a mano
     con 105 valores distintos. Lo cuida `los-espacios-no-suben`. */
  --sp-0-5: 0.125rem; /* 2px */
  --sp-1: 0.25rem; /* 4px */
  --sp-2: 0.5rem; /* 8px */
  --sp-3: 0.75rem; /* 12px */
  --sp-4: 1rem; /* 16px */
  --sp-5: 1.25rem; /* 20px */
  --sp-6: 1.5rem; /* 24px */
  --sp-8: 2rem; /* 32px */
  --sp-10: 2.5rem; /* 40px */
  --sp-12: 3rem; /* 48px */
  --sp-16: 4rem; /* 64px */

  /* Typography & Colors */
  --text: rgba(0, 0, 0, 0.75);
  /* GRIS SECUNDARIO. Sólido y no `rgba(0,0,0,.5)`, y el motivo es un número: ese alfa se
     compone a gris 128 sobre blanco y da 3,95:1, cuando AA pide 4,5 para texto normal. Es el
     color de las bajadas, los pies y las etiquetas —texto chico, el primero que se pierde—, o
     sea justo donde el mínimo importa.

     `#677079` da 5,04:1 sobre `--surface` y 4,69:1 sobre `--surface-1`. No es un color nuevo:
     es el que la pantalla de entrar y el tablero ya se redefinían por su cuenta, cada uno con
     su propio comentario explicando lo mismo. Al subirlo acá los dos overrides se van.

     POR QUÉ SÓLIDO Y NO MÁS ALFA. Un alfa se aclara con el fondo; un sólido no. Sobre blanco
     —el fondo más claro que existe— el alfa es lo mejor que puede dar, así que subirlo para
     llegar a 4,5 ahí lo deja demasiado oscuro en cualquier fondo intermedio. El sólido da el
     mismo color en todos y se mide una vez.

     Lo fija `apps/web/tests/unit/el-gris-secundario-se-lee.unit.test.ts` sobre cada superficie
     clara del sistema, así que bajarlo no es una preferencia que se pueda cambiar de paso. */
  --muted: #677079;
  --text-strong: #000000;
  --text-inverse: #ffffff;

  /* Surfaces — blanco limpio y moderno (fondo blanco como el chat;
     separación con bordes/sombras suaves, no rellenos grises). */
  --bg: #ffffff;
  --bg-0: #ffffff;
  --bg-1: #ffffff;
  --bg-2: #ffffff;
  --surface: #ffffff;
  /* ES `var(--surface)` ACÁ y aun así tiene razón de ser: `apps/web/src/lib/widgets/
   * widget-tokens.css` lo redefine en `#1e2021` dentro de `.degu-dash`, y sus trece usos son
   * todos del tablero. No es el caso del difunto `--surface-2`: acá el segundo nivel existe, solo
   * que lo pone el contexto. */
  --surface-raised: var(--surface);
  --surface-0: #ffffff;
  --surface-1: #f5f7f8;
  --elevated: #ffffff;
  /* EL FONDO DE LA PÁGINA, donde se apoyan las tarjetas y los paneles de cada sección (el
   * dashboard, el chat, Creator, Skills, Proyectos, el Taller y Administración). Nació en el
   * dashboard (`widget-tokens.css`) y el 22-oct-2026 pasó a ser de todas: un gris apenas más
   * bajo que el blanco, para que lo blanco se separe sin marco. El texto secundario queda en
   * 4,63:1 (AA). NO es un gris cálido, y decirlo importa: con «tibio» alguien podía
   * «corregirlo» hacia el rojo más adelante, que es justo la dirección contraria a la que
   * este fondo necesita (@nmonge83, revisión de la #5048).
   *
   * LLEVA UNA PIZCA DEL VERDE DE LA MARCA, y no es decoración (Valentina, 27-oct-2026). Era
   * #f7f8f8: a tres niveles del blanco, un casi-blanco no tiene masa de color propia para
   * imponer su tono, así que lo que el ojo lee es el PUNTO BLANCO DEL MONITOR. En cualquier
   * pantalla externa sin calibrar —que salen de fábrica en un ajuste cálido— el fondo se veía
   * rosado. No era el valor: medidos, los seis grises del sistema tiran al frío, y el blanco
   * puro y un gris neutro se veían igual de rosados al lado.
   *
   * La salida no es quitarle rojo —no lo tiene— sino darle cuerpo para que gane al punto
   * blanco: un paso más abajo del blanco y un sesgo propio perceptible. Se eligió el verde
   * porque el rosa es su opuesto en el círculo cromático, o sea que es el tinte que más
   * resiste un punto blanco cálido, y de paso es el verde de Degú diluido.
   *
   * De yapa, la tarjeta blanca se despega mejor del fondo: 1,064:1 → 1,087:1.
   *
   * `--fondo-pagina-suave` es lo suave que va ENCIMA de ese fondo (chips, celdas, hover): el
   * `--surface-1` del sistema (#f5f7f8) se pierde sobre el fondo, así que la página lo
   * reemplaza por este. Lleva el MISMO tinte y no baja tanto como antes: con la caída de antes
   * (-6,-5,-5) el texto secundario encima quedaba en 4,42:1, bajo AA. Con este queda en 4,51:1,
   * al precio de 1,047:1 → 1,027:1 de separación contra el fondo. */
  --fondo-pagina: #f3f6f5;
  --fondo-pagina-suave: #f0f3f2;
  --panel-border: rgba(13, 18, 22, 0.08);
  --border-color: var(--panel-border);

  /* EL BORDE DE UN CONTROL NO ES EL DE UN PANEL, y la diferencia la pide la norma, no el gusto.
   *
   * WCAG 2.2 SC 1.4.11 (Non-text Contrast) exige 3:1 contra los colores adyacentes para «el
   * límite visual que indica el área activa de un control, cuando no hay otra forma visual de
   * identificar su presencia». Un campo de texto VACÍO es exactamente ese caso: no tiene
   * contenido que lo delate, así que lo único que dice «acá se escribe» es su borde y su fondo.
   *
   * Con `--panel-border` no llegaba: `rgba(13, 18, 22, 0.08)` se compone a `#ececec` sobre
   * blanco y da 1,18:1, mientras el fondo del campo (`--surface-1`) da 1,07:1 contra la
   * tarjeta. Ninguna de las dos señales alcanzaba ni la mitad del mínimo — el campo vacío no
   * era perceptible según la norma, aunque a simple vista «se viera».
   *
   * Los valores son el MÍNIMO que cumple, no el más oscuro posible: lo que se busca es que el
   * control se vea, no que grite. Misma familia fría que `--muted` (#677079).
   *
   * EL MÍNIMO SE CALCULÓ CONTRA LOS QUINCE FONDOS QUE EL REPO DECLARA, no contra los dos de
   * este archivo, y esa diferencia cambió los dos valores. El tablero se define superficies
   * propias en `widget-tokens.css` —cuatro, fuera de acá— y sobre las suyas el par que salía
   * de mirar solo `tokens.css` no llegaba: 2,95:1 en claro y 2,74:1 en oscuro. El peor caso
   * manda, así que el peor caso es el que se mide: `#f0f2f2` en claro (3,08:1) y `#26292b` en
   * oscuro (3,08:1). Sobre los fondos de este archivo sobra margen (3,48:1 y 3,68:1).
   *
   * `--panel-border` NO SE TOCA, y eso también es la norma: el borde decorativo de una tarjeta
   * o de un panel no es un componente de interfaz ni un objeto gráfico que haya que percibir
   * para entender el contenido, así que 1.4.11 no lo alcanza. Subirlo habría cambiado las 170
   * superficies del producto para cumplir algo que nadie pide.
   *
   * Lo mide `apps/web/tests/unit/el-borde-del-campo-se-ve.unit.test.ts`. */
  --control-border: #828b94;

  /* Brand Colors (verde esmeralda Degú #0D9E81) */
  --primary: #0d9e81;
  --primary-hover: #0b8a71;
  /* El verde de un RELLENO con texto encima (el botón principal, un chip activo, un contador).
     Con blanco encima, `--primary` da 3,37:1 y el texto de un botón (≈15px en negrita) no es
     «texto grande»: WCAG 1.4.3 le pide 4,5. `#08826a` es el mismo tono con menos luz y da
     4,76:1; `--primary-hover` (4,30) no alcanzaba. El verde de marca en texto, bordes e íconos
     sigue siendo `--primary`. Decisión del 6-oct-2026. */
  --primary-fill: #08826a;
  --primary-fill-hover: #097560;
  /* EL VERDE DE MARCA COMO TEXTO O ÍCONO SOBRE `--primary-soft`, que es el par de
     `--success-text`/`--success-soft`. En claro es el mismo verde profundo del relleno; en
     oscuro es el brillante, porque el profundo sobre un fondo oscuro translúcido da 3,03:1 y
     no se lee. Medido sobre `--primary-soft` encima de `--surface`: claro 4,26:1, oscuro
     5,69:1. (🔴 de @jotramon y @nmonge83 en la #3364.)

     OJO CON EL CLARO: 4,26 alcanza el 3:1 de un ícono (WCAG 1.4.11) pero no los 4,5 de un
     texto. Subirlo pide un verde más oscuro que el de marca, y esa decisión está pendiente
     junto con los 103 usos de `--primary` como texto. */
  --primary-text: #08826a;
  --accent: #0d9e81;
  --warning: #f59e0b;
  /* El ámbar como TEXTO: `--warning` da 2,15:1 sobre blanco y sirve para rellenos e íconos. */
  --warn-text: #7a5b12;
  --danger: #dc2626;
  /* El rojo como TEXTO, y `--danger` queda para rellenos, bordes e íconos. Sobre su propio
     fondo suave (`--danger-soft`) `--danger` daba 4,20:1, bajo los 4,5 de WCAG 1.4.3, en justo
     los mensajes de error. Este da 5,72:1 ahí, 6,12:1 sobre `--surface-1` y 6,57:1 sobre blanco. */
  --danger-text: #b42318;
  /* El texto SOBRE un relleno de peligro (el botón de borrar al pasar por encima). En oscuro el
     rojo se aclara para leerse sobre el fondo, y el blanco encima daría 2,8:1: ahí va oscuro. */
  --on-danger: #ffffff;
  --success: #16a34a;
  /* El verde de éxito como TEXTO. `--success` da 3,3:1 sobre blanco: sirve para rellenos e
     íconos, no para leer. Este da 6,38:1 sobre su fondo suave (`--success-soft`) y 6,64:1 sobre
     `--surface-1`; el anterior (#15803d) quedaba en 4,49 sobre el fondo suave. */
  --success-text: #166534;

  /* Effects */
  /* LA REDONDEZ, UNA POR TIPO DE ELEMENTO (6-oct-2026). Un botón, un campo o un chip se ven
     iguales en toda la web y también en las pantallas sin sesión y el login de Keycloak, que
     solo cargan este archivo. Antes `--radius` valía 18px acá y 10px en `app.css`, que lo
     pisaba: el mismo botón base tenía dos redondeces según la pantalla, y los controles de
     `pantalla-publica.css` tenían una tercera (4px). Criterio: homogeneidad (Bastien y
     Scapin) — misma forma para el mismo tipo de elemento. */
  --radius-control: 10px; /* botones, campos, selectores */
  /* Un control de menos de 25px (casilla, flecha, botón de ícono). Con 10px de radio, una caja
     de 18px se dibuja como un CÍRCULO —el navegador recorta el radio a la mitad del lado—, y
     una casilla redonda se lee como botón de opción: marcar una parecería desmarcar la otra. */
  --radius-control-sm: 5px;
  --radius-card: 14px; /* tarjetas, modales, avisos flotantes */
  --radius-pill: 999px; /* chips, etiquetas, filtros */
  --radius: var(--radius-control);
  --radius-lg: 26px;
  --shadow-soft: 0 28px 70px rgba(2, 6, 23, 0.35);
  --shadow-light: 0 16px 42px rgba(2, 6, 23, 0.2);

  /* EL VELO: la capa que oscurece la página detrás de algo que pide atención. UNO SOLO, y la
     decisión que esconde es cuántos hacen falta.

     Parecían dos casos distintos —el modal que tapa la pantalla y pide decidir, y el panel que
     entra por un costado y se cierra tocando afuera—, así que lo primero fue mirar qué hacen
     los sistemas que ya resolvieron esto. Los cuatro usan UN valor para los dos:

       Material 3   `mtrl_scrim_color` = #52000000, negro 32%; el mismo para el diálogo, el
                    cajón modal y la hoja inferior.
       Fluent 2     `colorBackgroundOverlay`, negro 40% en claro y 50% en oscuro. El PR 33955
                    de microsoft/fluentui existe justo para esto: sacó el `rgba(0,0,0,0.4)`
                    escrito a mano del diálogo Y del cajón, y los puso a los dos en el token.
       Bootstrap 5  `$modal-backdrop-opacity: .5`, y `$offcanvas-backdrop-opacity` se define
                    COMO el del modal — el cajón no tiene valor propio, lo hereda.
       Carbon       `$overlay` = rgba(0, 0, 0, 0.6), el mismo en todos los temas.

     Ninguno parte el velo por tipo de superficie, y ninguno lo aclara en oscuro (Fluent lo
     OSCURECE, de 40% a 50%; los otros tres no lo mueven). Así que acá tampoco: un token, negro,
     el mismo en los dos temas.

     EL VALOR es 0.5 y no es un promedio: el rango que usa la industria va de 0.32 a 0.6, y
     dentro de ese rango 0.5 es el que la casa ya tenía. `.modal-overlay` —la clase global de
     app.css, que CLAUDE.md manda usar para todo modal nuevo— está en `rgba(0, 0, 0, 0.5)` y la
     usan 45 archivos. Elegir cualquier otro número de la ventana habría movido 45 pantallas
     para alinearlas con las seis que estaban fuera. */
  --velo: rgba(0, 0, 0, 0.5);

  /* Responsive spacing */
  --spacing-section: clamp(32px, 6vw, 80px);
  --spacing-card: clamp(20px, 3vw, 28px);

  /* Status card */
  --status-card-bg: rgba(249, 250, 255, 0.95);
  --status-card-border: rgba(0, 0, 0, 0.08);
  --status-row-bg: rgba(225, 225, 236, 0.8);
  --status-row-border: rgba(0, 0, 0, 0.06);
}

html {
  color-scheme: light;
}

html[data-theme="dark"],
html.theme-dark {
  color-scheme: dark;
}

html[data-theme="light"],
html.theme-light {
  color-scheme: light;
}

/* =============================
   Dark Theme (manual + auto)
   ============================= */
[data-theme="dark"],
.theme-dark,
.dg-error--dark {
  /* Modo oscuro Degú: NEGRO neutro (sin tinte azul) + VERDE esmeralda de marca
     + BLANCO. Capas escalonadas (bg < surface < elevated) para que paneles y
     tarjetas se separen del fondo; texto blanco con muted claramente más tenue. */
  --text: rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.56);
  --text-strong: #ffffff;
  --text-inverse: #ffffff;

  --bg: #0a0c0b;
  --bg-0: var(--bg);
  --bg-1: #121614;
  --bg-2: #1b211e;
  --surface: #141816;
  --surface-raised: var(--surface);
  --surface-0: #0f1311;
  --surface-1: #1b201d;
  --elevated: #1f2522;
  /* Más oscuro que las tarjetas y los paneles que se apoyan encima (`--surface`, `--elevated`,
   * la tarjeta del dashboard), para que se vean elevados y no hundidos: la tarjeta del dashboard
   * (#1e2021) queda en 1,13:1, `--surface` (#141816) apenas por encima, y el texto secundario en
   * 6,4:1. `--surface-0` (#0f1311) sí es más oscuro: es otro fondo, no algo que se apoye en este
   * (@nmonge83, #5048). El #1a1c1d que usaba el dashboard dejaba sus tarjetas casi
   * pegadas al fondo (1,05:1) y los paneles del resto MÁS oscuros que la página (22-oct-2026). */
  --fondo-pagina: #121413;
  --fondo-pagina-suave: #1b201d;

  /* Verde de marca, un punto más brillante para que destaque sobre el negro. */
  --primary: #10b88f;
  --primary-hover: #19d3a4;
  /* TEXTO BLANCO TAMBIÉN EN OSCURO (decisión de Valentina, 8-oct-2026), como el botón verde
     de GitHub; Material 3 y Atlassian hacen lo contrario (relleno claro con texto oscuro). Para
     que el blanco se lea, el relleno es el MISMO verde profundo que en claro: #08826a da 4,76:1
     con blanco y 3,76:1 contra --surface oscuro (el 3:1 de un control). El verde brillante
     (#10b88f) daba 2,54:1 con blanco: sirve como acento y texto, no como relleno con texto. */
  --primary-fill: #08826a;
  --primary-fill-hover: #097560;
  /* El brillante, no el profundo: ver el comentario del tema claro. */
  --primary-text: #10b88f;
  --accent: #10b88f;
  /* Los colores de estado en oscuro, medidos sobre `--surface` (#141816): el rojo de
     siempre daba 3,71:1 —bajo los 4,5 de WCAG para texto— y no tenía variante oscura.
     `#f87171` da 6,48:1; el verde, 8,19:1 de relleno y 10,28:1 como texto. */
  --danger: #f87171;
  --danger-text: #f87171;
  --warn-text: #f0d08a;
  --on-danger: #1a0505;
  --success: #34c77b;
  --success-text: #4ade80;

  --panel-border: rgba(255, 255, 255, 0.12);
  --border-color: var(--panel-border);
  /* Peor caso `#26292b`, el `--surface-1` del tablero: 3,08:1. Ver el bloque claro. */
  --control-border: #6b747d;

  --status-card-bg: #141816;
  --status-card-border: rgba(255, 255, 255, 0.14);
  --status-row-bg: #1b201d;
  --status-row-border: rgba(255, 255, 255, 0.1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.theme-light) {
    --text: rgba(255, 255, 255, 0.92);
    --muted: rgba(255, 255, 255, 0.56);
    --text-strong: #ffffff;
    --text-inverse: #ffffff;

    --bg: #0a0c0b;
    --bg-0: var(--bg);
    --bg-1: #121614;
    --bg-2: #1b211e;
    --surface: #141816;
    --surface-raised: var(--surface);
    --surface-0: #0f1311;
    --surface-1: #1b201d;
    --elevated: #1f2522;
    /* Los mismos que el oscuro manual: ver arriba. */
    --fondo-pagina: #121413;
    --fondo-pagina-suave: #1b201d;

    --primary: #10b88f;
    --primary-hover: #19d3a4;
    /* TEXTO BLANCO TAMBIÉN EN OSCURO (decisión de Valentina, 8-oct-2026), como el botón verde
       de GitHub; Material 3 y Atlassian hacen lo contrario (relleno claro con texto oscuro). Para
       que el blanco se lea, el relleno es el MISMO verde profundo que en claro: #08826a da 4,76:1
       con blanco y 3,76:1 contra --surface oscuro (el 3:1 de un control). El verde brillante
       (#10b88f) daba 2,54:1 con blanco: sirve como acento y texto, no como relleno con texto. */
    --primary-fill: #08826a;
    --primary-fill-hover: #097560;
    /* El brillante, no el profundo: ver el comentario del tema claro. */
    --primary-text: #10b88f;
    --accent: #10b88f;
    /* Los colores de estado en oscuro, medidos sobre `--surface` (#141816): el rojo de
       siempre daba 3,71:1 —bajo los 4,5 de WCAG para texto— y no tenía variante oscura.
       `#f87171` da 6,48:1; el verde, 8,19:1 de relleno y 10,28:1 como texto. */
    --danger: #f87171;
    --danger-text: #f87171;
    --warn-text: #f0d08a;
    --on-danger: #1a0505;
    --success: #34c77b;
    --success-text: #4ade80;

    --panel-border: rgba(255, 255, 255, 0.12);
    --border-color: var(--panel-border);
    /* Peor caso `#26292b`, el `--surface-1` del tablero: 3,08:1. Ver el bloque claro. */
    --control-border: #6b747d;

    --status-card-bg: #141816;
    --status-card-border: rgba(255, 255, 255, 0.14);
    --status-row-bg: #1b201d;
    --status-row-border: rgba(255, 255, 255, 0.1);
  }

  html:not([data-theme="light"]):not(.theme-light) {
    color-scheme: dark;
  }
}