/* ===========================================================================
   Tokens de diseño
   ---------------------------------------------------------------------------
   Lenguaje visual: claymorphism suave - radios grandes, sombras difusas,
   chips pastel, morado como primario. Todo el color vive aquí; ninguna otra
   hoja declara un hex.

   Los tokens de INTERFAZ (superficies, chips, texto) son decorativos.
   Los tokens de SERIE (--serie-N) son datos y están validados aparte contra
   daltonismo y contraste: no se tocan sin volver a pasar el validador.
   =========================================================================== */

:root {
  color-scheme: light;

  /* --- Planos y superficies ---------------------------------------------- */
  --hs-ahorros-plano:            #f4f3fb;   /* fondo de página, lavanda muy claro */
  --hs-ahorros-superficie:       #ffffff;   /* tarjetas */
  --hs-ahorros-superficie-2:     #faf9ff;   /* tarjetas anidadas / filas alternas */
  --hs-ahorros-superficie-hover: #f2f0fd;

  /* --- Tinta -------------------------------------------------------------- */
  --hs-ahorros-tinta:            #1b1b2f;
  --hs-ahorros-tinta-2:          #5b5a72;
  --hs-ahorros-tinta-suave:      #8f8da8;

  /* --- Trazos ------------------------------------------------------------- */
  --hs-ahorros-borde:            #e8e6f4;
  --hs-ahorros-borde-fuerte:     #d5d2e8;
  --hs-ahorros-rejilla:          #eeecf8;   /* gridlines: por debajo del borde, casi invisible */

  /* --- Primario (morado) --------------------------------------------------- */
  --hs-ahorros-primario:         #6d4de6;
  --hs-ahorros-primario-fuerte:  #5a3ad4;
  --hs-ahorros-primario-suave:   #ede9fe;
  --hs-ahorros-primario-tinta:   #ffffff;   /* texto sobre primario */

  /* --- Chips pastel: fondo tenue + icono saturado ------------------------- */
  --hs-ahorros-chip-morado-bg:   #ede9fe;  --hs-ahorros-chip-morado-fg:   #6d4de6;
  --hs-ahorros-chip-verde-bg:    #dcf5e3;  --hs-ahorros-chip-verde-fg:    #16855a;
  --hs-ahorros-chip-ambar-bg:    #fef1d6;  --hs-ahorros-chip-ambar-fg:    #a06b00;
  --hs-ahorros-chip-rosa-bg:     #fde5ec;  --hs-ahorros-chip-rosa-fg:     #c03a6b;
  --hs-ahorros-chip-azul-bg:     #dfeafd;  --hs-ahorros-chip-azul-fg:     #2158b8;
  --hs-ahorros-chip-gris-bg:     #eeedf5;  --hs-ahorros-chip-gris-fg:     #5b5a72;

  /* --- Estado: SIEMPRE acompañado de icono + texto, nunca color solo ------ */
  --hs-ahorros-bien:             #0f8a4d;
  --hs-ahorros-bien-bg:          #dcf5e3;
  --hs-ahorros-aviso:            #a06b00;
  --hs-ahorros-aviso-bg:         #fef1d6;
  --hs-ahorros-grave:            #b4531f;
  --hs-ahorros-grave-bg:         #fdead9;
  --hs-ahorros-critico:          #c62f3f;
  --hs-ahorros-critico-bg:       #fde5e8;

  /* --- Series de datos (validadas - ver css/PALETA.md) -------------------- */
  --hs-ahorros-serie-1: #8962c5;   /* morado */
  --hs-ahorros-serie-2: #a36d24;   /* ocre */
  --hs-ahorros-serie-3: #af5594;   /* magenta */
  --hs-ahorros-serie-4: #8f791b;   /* oliva */
  --hs-ahorros-serie-5: #0089a7;   /* turquesa */
  --hs-ahorros-serie-6: #b95662;   /* coral */
  --hs-ahorros-serie-7: #4c79c5;   /* azul */
  --hs-ahorros-serie-8: #448c56;   /* verde */

  /* Ramp secuencial de una sola tinta (magnitud), del morado primario */
  --hs-ahorros-sec-100: #e5dcfd;  --hs-ahorros-sec-200: #cdbcfa;  --hs-ahorros-sec-300: #b39af5;
  --hs-ahorros-sec-400: #9878ef;  --hs-ahorros-sec-500: #7d5aea;  --hs-ahorros-sec-600: #6d4de6;
  --hs-ahorros-sec-700: #5433c4;

  /* --- Sombras: difusas y de bajo contraste, nunca duras ------------------ */
  --hs-ahorros-sombra-1: 0 1px 2px rgba(27, 27, 47, .04), 0 2px 8px rgba(27, 27, 47, .04);
  --hs-ahorros-sombra-2: 0 2px 4px rgba(27, 27, 47, .04), 0 8px 24px rgba(27, 27, 47, .07);
  --hs-ahorros-sombra-3: 0 8px 16px rgba(27, 27, 47, .06), 0 24px 48px rgba(27, 27, 47, .10);
  --hs-ahorros-sombra-primario: 0 6px 20px rgba(109, 77, 230, .32);

  /* --- Geometría ---------------------------------------------------------- */
  --hs-ahorros-r-xs: 8px;  --hs-ahorros-r-sm: 12px; --hs-ahorros-r-md: 16px;
  --hs-ahorros-r-lg: 22px; --hs-ahorros-r-xl: 28px; --hs-ahorros-r-full: 999px;

  --hs-ahorros-e-1: 4px;  --hs-ahorros-e-2: 8px;  --hs-ahorros-e-3: 12px; --hs-ahorros-e-4: 16px;
  --hs-ahorros-e-5: 24px; --hs-ahorros-e-6: 32px; --hs-ahorros-e-7: 48px;

  /* --- Tipografía --------------------------------------------------------- */
  --hs-ahorros-fuente: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hs-ahorros-fuente-num: 'Nunito', system-ui, sans-serif;

  --hs-ahorros-t-xs: .75rem; --hs-ahorros-t-sm: .8125rem; --hs-ahorros-t-md: .9375rem;
  --hs-ahorros-t-lg: 1.125rem; --hs-ahorros-t-xl: 1.5rem; --hs-ahorros-t-2xl: 2rem;
  --hs-ahorros-t-heroe: clamp(2.75rem, 11vw, 4rem);

  --hs-ahorros-trans: 160ms cubic-bezier(.2, .8, .3, 1);
}

/* ===========================================================================
   Modo oscuro. Pasos elegidos para la superficie oscura, no una inversión
   automática: las series se re-eligieron y se volvieron a validar.
   =========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-hs-ahorros-tema="claro"]) {
    color-scheme: dark;

    --hs-ahorros-plano:            #0e0d14;
    --hs-ahorros-superficie:       #191824;
    --hs-ahorros-superficie-2:     #201f2d;
    --hs-ahorros-superficie-hover: #272536;

    --hs-ahorros-tinta:            #f4f3fb;
    --hs-ahorros-tinta-2:          #b9b6cc;
    --hs-ahorros-tinta-suave:      #85829b;

    --hs-ahorros-borde:            #2b2939;
    --hs-ahorros-borde-fuerte:     #3b3850;
    --hs-ahorros-rejilla:          #262435;

    --hs-ahorros-primario:         #9b7dfb;
    --hs-ahorros-primario-fuerte:  #b39afd;
    --hs-ahorros-primario-suave:   #2a2340;
    --hs-ahorros-primario-tinta:   #14101f;

    --hs-ahorros-chip-morado-bg:   #2a2340;  --hs-ahorros-chip-morado-fg:   #b39afd;
    --hs-ahorros-chip-verde-bg:    #16301f;  --hs-ahorros-chip-verde-fg:    #5fd39a;
    --hs-ahorros-chip-ambar-bg:    #33240a;  --hs-ahorros-chip-ambar-fg:    #f0bd4e;
    --hs-ahorros-chip-rosa-bg:     #341522;  --hs-ahorros-chip-rosa-fg:     #f28bae;
    --hs-ahorros-chip-azul-bg:     #12253f;  --hs-ahorros-chip-azul-fg:     #74aef5;
    --hs-ahorros-chip-gris-bg:     #262532;  --hs-ahorros-chip-gris-fg:    #b9b6cc;

    --hs-ahorros-bien:             #46c47f;  --hs-ahorros-bien-bg:    #16301f;
    --hs-ahorros-aviso:            #e8b02f;  --hs-ahorros-aviso-bg:   #33240a;
    --hs-ahorros-grave:            #e8905c;  --hs-ahorros-grave-bg:   #35200f;
    --hs-ahorros-critico:          #f06a78;  --hs-ahorros-critico-bg: #38151c;

    --hs-ahorros-serie-1: #9371ca;
    --hs-ahorros-serie-2: #b07932;
    --hs-ahorros-serie-3: #bf5ea2;
    --hs-ahorros-serie-4: #9b852b;
    --hs-ahorros-serie-5: #1195b4;
    --hs-ahorros-serie-6: #cb5f6b;
    --hs-ahorros-serie-7: #5d86ca;
    --hs-ahorros-serie-8: #519962;

    --hs-ahorros-sec-100: #241d3a;  --hs-ahorros-sec-200: #33284f;  --hs-ahorros-sec-300: #45356d;
    --hs-ahorros-sec-400: #5b478f;  --hs-ahorros-sec-500: #745db2; --hs-ahorros-sec-600: #9b7dfb;
    --hs-ahorros-sec-700: #b9a2fd;

    --hs-ahorros-sombra-1: 0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.30);
    --hs-ahorros-sombra-2: 0 2px 4px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.40);
    --hs-ahorros-sombra-3: 0 8px 16px rgba(0,0,0,.40), 0 24px 48px rgba(0,0,0,.50);
    --hs-ahorros-sombra-primario: 0 6px 20px rgba(155, 125, 251, .28);
  }
}

/* El interruptor manual gana en ambos sentidos. */
:root[data-hs-ahorros-tema="oscuro"] {
  color-scheme: dark;

  --hs-ahorros-plano:            #0e0d14;
  --hs-ahorros-superficie:       #191824;
  --hs-ahorros-superficie-2:     #201f2d;
  --hs-ahorros-superficie-hover: #272536;

  --hs-ahorros-tinta:            #f4f3fb;
  --hs-ahorros-tinta-2:          #b9b6cc;
  --hs-ahorros-tinta-suave:      #85829b;

  --hs-ahorros-borde:            #2b2939;
  --hs-ahorros-borde-fuerte:     #3b3850;
  --hs-ahorros-rejilla:          #262435;

  --hs-ahorros-primario:         #9b7dfb;
  --hs-ahorros-primario-fuerte:  #b39afd;
  --hs-ahorros-primario-suave:   #2a2340;
  --hs-ahorros-primario-tinta:   #14101f;

  --hs-ahorros-chip-morado-bg:   #2a2340;  --hs-ahorros-chip-morado-fg:   #b39afd;
  --hs-ahorros-chip-verde-bg:    #16301f;  --hs-ahorros-chip-verde-fg:    #5fd39a;
  --hs-ahorros-chip-ambar-bg:    #33240a;  --hs-ahorros-chip-ambar-fg:    #f0bd4e;
  --hs-ahorros-chip-rosa-bg:     #341522;  --hs-ahorros-chip-rosa-fg:     #f28bae;
  --hs-ahorros-chip-azul-bg:     #12253f;  --hs-ahorros-chip-azul-fg:     #74aef5;
  --hs-ahorros-chip-gris-bg:     #262532;  --hs-ahorros-chip-gris-fg:     #b9b6cc;

  --hs-ahorros-bien:             #46c47f;  --hs-ahorros-bien-bg:    #16301f;
  --hs-ahorros-aviso:            #e8b02f;  --hs-ahorros-aviso-bg:   #33240a;
  --hs-ahorros-grave:            #e8905c;  --hs-ahorros-grave-bg:   #35200f;
  --hs-ahorros-critico:          #f06a78;  --hs-ahorros-critico-bg: #38151c;

  --hs-ahorros-serie-1: #9371ca;
  --hs-ahorros-serie-2: #b07932;
  --hs-ahorros-serie-3: #bf5ea2;
  --hs-ahorros-serie-4: #9b852b;
  --hs-ahorros-serie-5: #1195b4;
  --hs-ahorros-serie-6: #cb5f6b;
  --hs-ahorros-serie-7: #5d86ca;
  --hs-ahorros-serie-8: #519962;

  --hs-ahorros-sec-100: #241d3a;  --hs-ahorros-sec-200: #33284f;  --hs-ahorros-sec-300: #45356d;
  --hs-ahorros-sec-400: #5b478f;  --hs-ahorros-sec-500: #745db2;  --hs-ahorros-sec-600: #9b7dfb;
  --hs-ahorros-sec-700: #b9a2fd;

  --hs-ahorros-sombra-1: 0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.30);
  --hs-ahorros-sombra-2: 0 2px 4px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.40);
  --hs-ahorros-sombra-3: 0 8px 16px rgba(0,0,0,.40), 0 24px 48px rgba(0,0,0,.50);
  --hs-ahorros-sombra-primario: 0 6px 20px rgba(155, 125, 251, .28);
}