/* Paleta base del proyecto (definida con la familia):
     carbón  #20222A   arena #CBBCA8   hueso #EDECE8   verde #3E5A4E
   El café medio de la paleta original se descartó a propósito: en superficies
   grandes, y sobre todo como fondo de las animaciones en modo oscuro, se leía
   sucio. Los acentos cálidos se resuelven con la arena (fondo claro y texto
   carbón) en vez de con un café oscuro. */
:root {
  /* Paleta clara */
  --color-fondo: #EDECE8;
  --color-superficie: #FFFFFF;
  --color-borde: #DCD7CD;
  --color-primario: #3E5A4E;        /* verde, AA sobre hueso */
  --color-primario-texto: #EDECE8;
  --color-confianza: #2C6B4F;       /* verde más vivo para "logrado" */
  --color-confianza-suave: #E3EDE6;
  --color-texto: #20222A;
  --color-texto-secundario: #585B62;
  --color-error: #A5342A;
  --color-error-texto: #FFFFFF;
  --color-atencion-suave: #F3EBDD;

  /* Acento cálido: la arena se usa como fondo con texto carbón encima, no como
     café oscuro con texto claro. Es lo que mantiene la calidez sin ensuciar. */
  --color-acento: #CBBCA8;
  --color-acento-texto: #20222A;
  --color-acento-suave: #F1EBE1;

  /* Tonos suaves por módulo: fondo + tinta, AA en ambos temas (círculos de icono). */
  --tono-mfi001-fondo: #E4EDE6; --tono-mfi001-tinta: #24583C;
  --tono-mfi002-fondo: #F3EAD8; --tono-mfi002-tinta: #6F4E1B;
  --tono-mfi003-fondo: #E2EAF0; --tono-mfi003-tinta: #245271;
  --tono-mfi004-fondo: #F4E6E7; --tono-mfi004-tinta: #8B3743;
  --tono-mfi005-fondo: #E9E6F0; --tono-mfi005-tinta: #4E4079;
  --tono-mfi006-fondo: #F4EEDA; --tono-mfi006-tinta: #64520F;
  --tono-mfi007-fondo: #E0EDEB; --tono-mfi007-tinta: #1D5A54;
  --tono-mfi008-fondo: #E6E8ED; --tono-mfi008-tinta: #34415C;
  --tono-mfi009-fondo: #F2E9E2; --tono-mfi009-tinta: #7A4A2E;
  --tono-mfi010-fondo: #E5EDEB; --tono-mfi010-tinta: #2B5F58;
  --tono-mfi011-fondo: #EFE9DF; --tono-mfi011-tinta: #6A5326;
  --tono-mfi012-fondo: #E8E9E5; --tono-mfi012-tinta: #3F4A3C;

  /* Ilustraciones (escenas.js). El mobiliario y los fondos sí se derivan de los
     tokens de arriba, pero piel, pelo y sombras necesitan valor propio por tema:
     mezclarlos con --color-texto o --color-superficie invertía la relación de
     claros y oscuros en modo oscuro (caras oscuras con pelo claro). */
  --esc-piel-1: #F2C6AE; --esc-piel-2: #C4885E; --esc-piel-3: #E3A47E;
  --esc-pelo-1: #33251E; --esc-pelo-2: #A8762F; --esc-pelo-3: #6E4331;
  --esc-sombra: #20222A;
  --esc-perro: #8C5A3C; --esc-perro-claro: #B98A66;

  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --texto-xs: 0.75rem; --texto-sm: 0.875rem; --texto-md: 1rem;
  --texto-lg: 1.25rem; --texto-xl: 1.5rem; --texto-2xl: 2rem;

  --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px;
  --esp-5: 24px; --esp-6: 32px; --esp-7: 48px; --esp-8: 64px;

  --radio-sm: 8px; --radio-md: 12px; --radio-lg: 18px;
  --sombra-sm: 0 1px 2px rgba(32,34,42,.08);
  --sombra-md: 0 2px 8px rgba(32,34,42,.10);
  --sombra-lg: 0 6px 24px rgba(32,34,42,.14);
}

[data-tema="dark"] {
  --color-fondo: #20222A;
  --color-superficie: #2A2D36;
  --color-borde: #3B3F4A;
  --color-primario: #8FB6A1;
  --color-primario-texto: #1A2620;
  --color-confianza: #93C9AC;
  --color-confianza-suave: #26332C;
  --color-texto: #EDECE8;
  --color-texto-secundario: #B4B2AB;
  --color-error: #F0B3AC;
  --color-error-texto: #45110C;
  --color-atencion-suave: #33312A;

  /* La arena funciona igual de bien sobre carbón: mismo acento en los dos temas. */
  --color-acento: #CBBCA8;
  --color-acento-texto: #20222A;
  /* Antes era un café oscuro (#3C2318) y como fondo de las animaciones se veía
     sucio. Ahora es carbón un punto más claro que el fondo: la escena respira. */
  --color-acento-suave: #2B2E37;

  --tono-mfi001-fondo: #242E28; --tono-mfi001-tinta: #96D6B0;
  --tono-mfi002-fondo: #2E2A20; --tono-mfi002-tinta: #E8C98A;
  --tono-mfi003-fondo: #232935; --tono-mfi003-tinta: #A6C6E4;
  --tono-mfi004-fondo: #2E2429; --tono-mfi004-tinta: #EFA9B8;
  --tono-mfi005-fondo: #282534; --tono-mfi005-tinta: #C6B6E8;
  --tono-mfi006-fondo: #2E2B1F; --tono-mfi006-tinta: #E3C877;
  --tono-mfi007-fondo: #212E2E; --tono-mfi007-tinta: #8AD2C9;
  --tono-mfi008-fondo: #262A33; --tono-mfi008-tinta: #B0C0DC;
  --tono-mfi009-fondo: #302A25; --tono-mfi009-tinta: #E3B394;
  --tono-mfi010-fondo: #232E2C; --tono-mfi010-tinta: #8DCCC1;
  --tono-mfi011-fondo: #2E2A22; --tono-mfi011-tinta: #DCC38A;
  --tono-mfi012-fondo: #282B27; --tono-mfi012-tinta: #B5C4B0;

  /* En oscuro la piel se mantiene clara y el pelo baja a tonos medios: así la
     escena sigue leyéndose de noche sin invertir a quién ilumina qué. */
  --esc-piel-1: #E8BCA4; --esc-piel-2: #C08054; --esc-piel-3: #D89E76;
  --esc-pelo-1: #5A4034; --esc-pelo-2: #AC6F35; --esc-pelo-3: #8A5A45;
  --esc-sombra: #15171D;
  --esc-perro: #A5765A; --esc-perro-claro: #C79B7C;
}