/* tokens.css — paleta y medidas comunes a las webs de la VM.
 *
 * FUENTE DE VERDAD: dashboard-personal/estilo/tokens.css
 * Las copias en <cada-web>/public/vendor/tokens.css las genera
 * `~/bin/sync-estilo.sh`. No las edites a mano: se sobrescriben.
 *
 * La paleta es la cálida que ya compartían pkm-web y dashboard-personal.
 * Aquí solo van colores de interfaz (superficies, texto, estados). Los
 * colores de dominio — el naranja del filamento, el violeta de la resina —
 * se quedan en la app que los entiende.
 */

:root {
  color-scheme: light;

  /* ---- claro: los valores reales ---- */
  --fondo: #fbfaf7;
  --fondo-panel: #ffffff;
  --fondo-alt: #f2efe8;

  --texto: #23211d;
  --texto-suave: #6b665e;
  --texto-tenue: #8a8880;

  --borde: #e6e2da;
  --borde-fuerte: #c9c2b4;

  --acento: #8a5a2b;
  --acento-suave: #f3ece2;

  /* Estados. Los cuatro ya existían en pkm-web y en el dashboard con estos
     mismos valores; aquí solo se les da un nombre único. */
  --ok: #2f7a4d;
  --aviso: #b4451f;
  --error: #a33131;
  --neutro: #8a8880;

  --sombra: 0 1px 2px rgba(35, 33, 29, 0.04), 0 4px 16px rgba(35, 33, 29, 0.06);

  /* ---- oscuro: declarados aquí, aplicados más abajo ----
     Están sueltos a propósito. Definir un color no lo activa, así que estos
     no pintan nada hasta que un bloque de los de abajo los asigna. Lo que se
     gana: cada hex existe una sola vez en el fichero. */
  --d-fondo: #16150f;
  --d-fondo-panel: #1e1d17;
  --d-fondo-alt: #26241c;

  --d-texto: #ece7dc;
  --d-texto-suave: #a29b8d;
  --d-texto-tenue: #7d786c;

  --d-borde: #322f26;
  --d-borde-fuerte: #4a4638;

  --d-acento: #d9a441;
  --d-acento-suave: #2a2519;

  --d-ok: #6cc38d;
  --d-aviso: #e08a5f;
  --d-error: #e0736f;
  --d-neutro: #7d786c;

  --d-sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.4);

  /* ---- medidas y tipografía ---- */
  --radio: 10px;
  --radio-gr: 14px;
  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", sans-serif;
}

/* El mapeo de oscuro, dos veces porque son dos disparadores distintos, pero
   sin un solo hex: si cambia un color, cambia en :root y aquí no se toca nada.
   El :not() evita que el sistema pise una elección explícita de "claro". */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fondo: var(--d-fondo);
    --fondo-panel: var(--d-fondo-panel);
    --fondo-alt: var(--d-fondo-alt);
    --texto: var(--d-texto);
    --texto-suave: var(--d-texto-suave);
    --texto-tenue: var(--d-texto-tenue);
    --borde: var(--d-borde);
    --borde-fuerte: var(--d-borde-fuerte);
    --acento: var(--d-acento);
    --acento-suave: var(--d-acento-suave);
    --ok: var(--d-ok);
    --aviso: var(--d-aviso);
    --error: var(--d-error);
    --neutro: var(--d-neutro);
    --sombra: var(--d-sombra);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --fondo: var(--d-fondo);
  --fondo-panel: var(--d-fondo-panel);
  --fondo-alt: var(--d-fondo-alt);
  --texto: var(--d-texto);
  --texto-suave: var(--d-texto-suave);
  --texto-tenue: var(--d-texto-tenue);
  --borde: var(--d-borde);
  --borde-fuerte: var(--d-borde-fuerte);
  --acento: var(--d-acento);
  --acento-suave: var(--d-acento-suave);
  --ok: var(--d-ok);
  --aviso: var(--d-aviso);
  --error: var(--d-error);
  --neutro: var(--d-neutro);
  --sombra: var(--d-sombra);
}