:root{
  /* Colores principales */
  --color-primario: rgb(8 128 196);                 /* md-sys-color-primary */
  --color-primario-claro: rgba(8, 128, 196);          /* md-sys-color-primary-container */
  --color-on-primario: rgb(255 255 255);           /* md-sys-color-on-primary */

  /* Fondo y texto */
  --color-fondo: rgb(247 249 255);                 /* md-sys-color-background */
  --color-texto: rgb(24 28 32);                    /* md-sys-color-on-background */
  --color-sombra: rgb(0 0 0);                      /* md-sys-color-shadow */

  /* Bordes y separadores */
  --color-borde: rgb(191 199 210);                 /* md-sys-color-outline-variant */

  /* Variantes útiles */
  --color-superficie: rgb(235 238 244);            /* md-sys-color-surface-container */
}

.light {
  --md-sys-color-primary: rgb(0 97 150);
  --md-sys-color-surface-tint: rgb(0 99 154);
  --md-sys-color-on-primary: rgb(255 255 255);
  --md-sys-color-primary-container: rgb(0 122 188);
  --md-sys-color-on-primary-container: rgb(253 252 255);
  --md-sys-color-secondary: rgb(93 95 95);
  --md-sys-color-on-secondary: rgb(255 255 255);
  --md-sys-color-secondary-container: rgb(255 255 255);
  --md-sys-color-on-secondary-container: rgb(116 118 118);
  --md-sys-color-tertiary: rgb(126 67 151);
  --md-sys-color-on-tertiary: rgb(255 255 255);
  --md-sys-color-tertiary-container: rgb(153 92 178);
  --md-sys-color-on-tertiary-container: rgb(255 251 255);
  --md-sys-color-error: rgb(186 26 26);
  --md-sys-color-on-error: rgb(255 255 255);
  --md-sys-color-error-container: rgb(255 218 214);
  --md-sys-color-on-error-container: rgb(147 0 10);
  --md-sys-color-background: rgb(247 249 255);
  --md-sys-color-on-background: rgb(24 28 32);
  --md-sys-color-surface: rgb(247 249 255);
  --md-sys-color-on-surface: rgb(24 28 32);
  --md-sys-color-surface-variant: rgb(219 227 238);
  --md-sys-color-on-surface-variant: rgb(64 72 80);
  --md-sys-color-outline: rgb(112 120 129);
  --md-sys-color-outline-variant: rgb(191 199 210);
  --md-sys-color-shadow: rgb(0 0 0);
  --md-sys-color-scrim: rgb(0 0 0);
  --md-sys-color-inverse-surface: rgb(45 49 53);
  --md-sys-color-inverse-on-surface: rgb(238 241 247);
  --md-sys-color-inverse-primary: rgb(149 204 255);
  --md-sys-color-primary-fixed: rgb(205 229 255);
  --md-sys-color-on-primary-fixed: rgb(0 29 50);
  --md-sys-color-primary-fixed-dim: rgb(149 204 255);
  --md-sys-color-on-primary-fixed-variant: rgb(0 74 117);
  --md-sys-color-secondary-fixed: rgb(226 226 226);
  --md-sys-color-on-secondary-fixed: rgb(26 28 28);
  --md-sys-color-secondary-fixed-dim: rgb(198 198 199);
  --md-sys-color-on-secondary-fixed-variant: rgb(69 71 71);
  --md-sys-color-tertiary-fixed: rgb(248 216 255);
  --md-sys-color-on-tertiary-fixed: rgb(50 0 71);
  --md-sys-color-tertiary-fixed-dim: rgb(235 178 255);
  --md-sys-color-on-tertiary-fixed-variant: rgb(102 45 127);
  --md-sys-color-surface-dim: rgb(215 218 224);
  --md-sys-color-surface-bright: rgb(247 249 255);
  --md-sys-color-surface-container-lowest: rgb(255 255 255);
  --md-sys-color-surface-container-low: rgb(241 244 250);
  --md-sys-color-surface-container: rgb(235 238 244);
  --md-sys-color-surface-container-high: rgb(229 232 238);
  --md-sys-color-surface-container-highest: rgb(224 226 233);
}