/* Temas "Windows claro" y "Windows oscuro": ajustan los tokens de Fluent 2
   (fluent-tokens.css) a la paleta de Windows 11. Se carga DESPUÉS de
   fluent-tokens.css y usa los mismos selectores, así que pisa solo estos
   valores. La elección (claro / oscuro / automático) la guarda
   componentes/tema.js en html[data-theme]; se cambia en Configuración.

   Claro: fondo Mica #f3f3f3, superficies blancas, acento #005fb8.
   Oscuro: fondo Mica #202020, superficies #2b2b2b, acento #60cdff con
   texto oscuro encima (como los botones principales de Windows 11). */

:root {
  --colorNeutralForeground1: #1b1b1b;
  --colorNeutralForeground2: #5f5f5f;
  --colorNeutralBackground1: #ffffff;
  --colorNeutralBackground2: #f9f9f9;
  --colorNeutralBackground3: #f3f3f3;
  --colorNeutralBackground4: #eeeeee;
  --colorNeutralStroke1: #d1d1d1;
  --colorNeutralStroke2: #e5e5e5;
  --colorSubtleBackgroundHover: #ebebeb;
  --colorSubtleBackgroundPressed: #e3e3e3;
  --colorSubtleBackgroundSelected: #e8e8e8;

  --colorBrandBackground: #005fb8;
  --colorBrandBackgroundHover: #1a6fbf;
  --colorBrandBackgroundPressed: #3380c6;
  --colorBrandBackgroundSelected: #1a6fbf;
  --colorCompoundBrandBackground: #005fb8;
  --colorCompoundBrandBackgroundHover: #1a6fbf;
  --colorCompoundBrandBackgroundPressed: #3380c6;
  --colorBrandForeground1: #005fb8;
  --colorBrandForeground2: #003e92;
  --colorCompoundBrandForeground1: #005fb8;
  --colorCompoundBrandForeground1Hover: #003e92;
  --colorCompoundBrandForeground1Pressed: #003e92;
  --colorBrandForegroundLink: #005fb8;
  --colorBrandForegroundLinkHover: #003e92;
  --colorBrandForegroundLinkPressed: #002f6c;
  --colorBrandStroke1: #005fb8;
  --colorCompoundBrandStroke: #005fb8;
  --colorCompoundBrandStrokeHover: #1a6fbf;
  --colorCompoundBrandStrokePressed: #3380c6;
  --colorNeutralForegroundOnBrand: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --colorNeutralForeground1: #ffffff;
    --colorNeutralForeground2: #c9c9c9;
    --colorNeutralBackground1: #2b2b2b;
    --colorNeutralBackground1Hover: #323232;
    --colorNeutralBackground1Pressed: #272727;
    --colorNeutralBackground2: #282828;
    --colorNeutralBackground3: #202020;
    --colorNeutralBackground4: #1c1c1c;
    --colorNeutralStroke1: #5a5a5a;
    --colorNeutralStroke2: #383838;
    --colorSubtleBackgroundHover: #343434;
    --colorSubtleBackgroundPressed: #2e2e2e;
    --colorSubtleBackgroundSelected: #333333;

    --colorBrandBackground: #60cdff;
    --colorBrandBackgroundHover: #5ab9e7;
    --colorBrandBackgroundPressed: #56a7cf;
    --colorBrandBackgroundSelected: #5ab9e7;
    --colorCompoundBrandBackground: #60cdff;
    --colorCompoundBrandBackgroundHover: #5ab9e7;
    --colorCompoundBrandBackgroundPressed: #56a7cf;
    --colorBrandForeground1: #60cdff;
    --colorBrandForeground2: #99ebff;
    --colorCompoundBrandForeground1: #60cdff;
    --colorCompoundBrandForeground1Hover: #99ebff;
    --colorCompoundBrandForeground1Pressed: #4cc2ff;
    --colorBrandForegroundLink: #99ebff;
    --colorBrandForegroundLinkHover: #c4f4ff;
    --colorBrandForegroundLinkPressed: #60cdff;
    --colorBrandStroke1: #60cdff;
    --colorCompoundBrandStroke: #60cdff;
    --colorCompoundBrandStrokeHover: #5ab9e7;
    --colorCompoundBrandStrokePressed: #56a7cf;
    --colorNeutralForegroundOnBrand: #000000;
    --colorNeutralBackgroundDisabled: #3d3d3d;
    --colorNeutralForegroundDisabled: #8a8a8a;
    --colorNeutralStrokeDisabled: #4a4a4a;
  }
}

:root[data-theme="dark"] {
  --colorNeutralForeground1: #ffffff;
  --colorNeutralForeground2: #c9c9c9;
  --colorNeutralBackground1: #2b2b2b;
  --colorNeutralBackground1Hover: #323232;
  --colorNeutralBackground1Pressed: #272727;
  --colorNeutralBackground2: #282828;
  --colorNeutralBackground3: #202020;
  --colorNeutralBackground4: #1c1c1c;
  --colorNeutralStroke1: #5a5a5a;
  --colorNeutralStroke2: #383838;
  --colorSubtleBackgroundHover: #343434;
  --colorSubtleBackgroundPressed: #2e2e2e;
  --colorSubtleBackgroundSelected: #333333;

  --colorBrandBackground: #60cdff;
  --colorBrandBackgroundHover: #5ab9e7;
  --colorBrandBackgroundPressed: #56a7cf;
  --colorBrandBackgroundSelected: #5ab9e7;
  --colorCompoundBrandBackground: #60cdff;
  --colorCompoundBrandBackgroundHover: #5ab9e7;
  --colorCompoundBrandBackgroundPressed: #56a7cf;
  --colorBrandForeground1: #60cdff;
  --colorBrandForeground2: #99ebff;
  --colorCompoundBrandForeground1: #60cdff;
  --colorCompoundBrandForeground1Hover: #99ebff;
  --colorCompoundBrandForeground1Pressed: #4cc2ff;
  --colorBrandForegroundLink: #99ebff;
  --colorBrandForegroundLinkHover: #c4f4ff;
  --colorBrandForegroundLinkPressed: #60cdff;
  --colorBrandStroke1: #60cdff;
  --colorCompoundBrandStroke: #60cdff;
  --colorCompoundBrandStrokeHover: #5ab9e7;
  --colorCompoundBrandStrokePressed: #56a7cf;
  --colorNeutralForegroundOnBrand: #000000;
  --colorNeutralBackgroundDisabled: #3d3d3d;
  --colorNeutralForegroundDisabled: #8a8a8a;
  --colorNeutralStrokeDisabled: #4a4a4a;
}

/* Vistas previas de cada tema en Configuración: muestran los dos temas a la
   vez, así que no pueden usar los tokens (que valen para toda la página). */
.vista-tema { --vt-fondo: #f3f3f3; --vt-panel: #ffffff; --vt-borde: #e5e5e5; --vt-texto: #1b1b1b; --vt-suave: #c4c4c4; --vt-acento: #005fb8; }
.vista-tema--oscuro { --vt-fondo: #202020; --vt-panel: #2b2b2b; --vt-borde: #383838; --vt-texto: #ffffff; --vt-suave: #5a5a5a; --vt-acento: #60cdff; }