/* =====================================================================
   HoloNook · design tokens
   Única fuente de los colores de la interfaz. Se carga ANTES que cualquier otra hoja en todas las páginas.
   Las hojas usan solo tokens semánticos (texto, superficie, borde, éxito…), nunca colores sueltos:
   para un tema nuevo basta con redefinir este archivo bajo otro selector (p. ej. [data-tema="oscuro"]).

   Capas:
   1. Marca: los colores de la identidad.
   2. Canales RGB: para transparencias, rgba(var(--hn-xxx-rgb), .3).
   3. Semánticos: lo que significa cada color en la interfaz, agrupado por familia.

   Fuera de aquí, a propósito: los efectos de las cartas (holo-simey.css), los materiales del binder
   (tapas, fundas y anillas, con sus paletas en binder.css) y las ilustraciones de novedades.
   ===================================================================== */
:root{
  /* ---- 1. Marca ---- */
  --hn-navy:#0B1B3D; --hn-navy-claro:#1a2c5c;
  --hn-cobalt:#3B6CFF; --hn-cobalt-osc:#2A56E6; --hn-cobalt-claro:#5b86ff; --hn-cobalt-suave:#7d9bff; --hn-cobalt-profundo:#243f9c;
  --hn-violeta:#7b6bff; --hn-violeta-boton:#6a5cff; --hn-violeta-claro:#8a6bff;
  --hn-icy:#D8E8FF; --hn-lav:#CBB9FF; --hn-champ:#F8F6FF; --hn-rosa-holo:#ffe0f0; --hn-menta-holo:#d6fff2;

  /* ---- 2. Canales RGB (transparencias) ---- */
  --hn-tinta-rgb:11,27,61;          /* tinta sobre superficies: velos suaves, bordes, rellenos tenues */
  --hn-sombra-rgb:11,27,61;         /* sombras */
  --hn-velo-rgb:11,27,61;           /* fondo detrás de los diálogos (::backdrop) */
  --hn-panel-rgb:255,255,255;       /* paneles translúcidos y sus bordes */
  --hn-luz-rgb:255,255,255;         /* brillos y reflejos (sombras interiores claras) */
  --hn-sobre-acento-rgb:255,255,255;/* texto e iconos sobre colores de acento */
  --hn-acento-rgb:59,108,255;
  --hn-lav-rgb:203,185,255; --hn-icy-rgb:216,232,255; --hn-champ-rgb:248,246,255; --hn-rosa-holo-rgb:255,224,240;
  --hn-enlace-rgb:49,94,232; --hn-violeta-rgb:123,107,255; --hn-violeta-borde-rgb:160,136,230;
  --hn-exito-rgb:31,138,92; --hn-peligro-rgb:198,40,40; --hn-peligro-vivo-rgb:198,40,57;
  --hn-deseo-rgb:214,51,108; --hn-deseo-claro-rgb:224,69,123; --hn-apoyo-rgb:217,87,127;

  /* ---- 3. Semánticos ---- */
  /* Texto */
  --hn-texto:var(--hn-navy); --hn-texto2:#4E5A7C; --hn-texto3:#7A84A3;
  --hn-sobre-acento:#fff;                       /* texto sobre botones y sellos de color */
  --hn-enlace:#315ee8;                          /* enlaces de las páginas sencillas (legal, gestión) */
  /* Superficies */
  --hn-panel:rgba(var(--hn-panel-rgb),.78); --hn-panel-solido:#fff;
  --hn-luz:#fff;                                /* brillo blanco en sombras y materiales */
  --hn-superficie-suave:#f3f6ff;                /* fondo de página, hover de botones */
  --hn-lila-fondo:#f1eefb;
  /* Bordes y sombras */
  --hn-borde:rgba(var(--hn-tinta-rgb),.10); --hn-borde2:rgba(var(--hn-tinta-rgb),.16);
  --hn-sombra:0 1px 2px rgba(var(--hn-sombra-rgb),.05),0 10px 30px rgba(var(--hn-acento-rgb),.10);
  --hn-sombra-alta:0 2px 6px rgba(var(--hn-sombra-rgb),.06),0 18px 44px rgba(var(--hn-acento-rgb),.18);
  /* Acento (cobalto) */
  --hn-acento-texto:#2452cc;
  --hn-acento-borde:#b9cbff; --hn-acento-borde-suave:#d6e0ff; --hn-acento-borde-hover:#9db3f6; --hn-acento-borde-neutro:#dce3f5;
  --hn-acento-fondo:#eef2ff;
  /* Neutros */
  --hn-neutro-fondo:#f6f7fb; --hn-neutro-chapa:#eceef5; --hn-neutro-linea:#e2e6f1; --hn-neutro-borde:#d6dcea;
  --hn-neutro-control:#cfd6ea; --hn-neutro-pista:#cfd4e2; --hn-neutro-texto:#5c5960;
  /* Violeta (holo, Plus) */
  --hn-violeta-texto:#4b3b8f; --hn-violeta-texto2:#5a47a8; --hn-violeta-tinta:#2d2166; --hn-violeta-fondo:#e8e3ff;
  /* Éxito */
  --hn-exito:#1f8a5c; --hn-exito-claro:#2f9e6e; --hn-exito-texto:#1b7f45; --hn-exito-oscuro:#176438; --hn-exito-tinta:#1f6b4a;
  --hn-exito-borde:#9fd8bd; --hn-exito-borde-suave:#bfe6d2; --hn-exito-fondo:#eaf8f1;
  /* Peligro */
  --hn-peligro:#c62828; --hn-error:#c0392b; --hn-peligro-vivo:#c62839; --hn-peligro-boton:#d23447; --hn-peligro-oscuro:#ae2733;
  --hn-peligro-borde:#d9534f; --hn-peligro-fondo:#fdecea;
  /* Deseo (lista de deseos, rosa) */
  --hn-deseo:#d6336c; --hn-deseo-claro:#e0457b; --hn-deseo-brillo:#ff7aa6; --hn-deseo-relleno:#ff5d8f; --hn-deseo-texto:#b0275c;
  --hn-deseo-borde:#f3a6c0; --hn-deseo-borde-hover:#e97aa3; --hn-deseo-fondo:#fff5f8;
  --hn-apoyo:#d9577f;                           /* «Apoyar HoloNook» */
  /* Cabeceras teñidas con el tono de cada set (hsl(var(--tono) s l)): pastel en claro, profundo en oscuro */
  --hn-tono-s1:90%; --hn-tono-s2:85%; --hn-tono-s3:80%; --hn-tono-l1:86%; --hn-tono-l2:89%; --hn-tono-l3:95%; --hn-tono-l4:91%; --hn-tono-base:#fcfbff;
  /* Placas claras de los logos de set (muchos logos son oscuros: la placa no se oscurece, solo se atenúa) */
  --hn-placa-filtro:none;
  /* Aviso (ámbar) */
  --hn-aviso-fondo:#fff4d6; --hn-aviso-fondo-suave:#fffaf0; --hn-aviso-borde:#f0d58a; --hn-aviso-borde-suave:#f0dcaa;
  --hn-aviso-texto:#6b4a00; --hn-aviso-texto2:#8a5a00; --hn-naranja-texto:#b0521f;
  /* Insignia beta (oro) */
  --hn-beta-borde:#c79d43; --hn-beta-borde-suave:#e9d39a; --hn-beta-claro:#fff8df; --hn-beta-oscuro:#f6dc9a; --hn-beta-texto:#604513;
  /* Degradados de marca */
  --hn-holo:linear-gradient(115deg,var(--hn-icy) 0%,var(--hn-lav) 28%,var(--hn-rosa-holo) 50%,var(--hn-menta-holo) 70%,var(--hn-icy) 100%);
  --hn-boton:linear-gradient(135deg,var(--hn-cobalt-claro) 0%,var(--hn-cobalt) 45%,var(--hn-violeta-boton) 100%);

  /* ---- Forma y tipografía ---- */
  --hn-radio:18px; --hn-radio-s:12px;
  --hn-sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --hn-serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --hn-lateral:248px;
}

/* =====================================================================
   Tema oscuro: azul marino profundo, no negro. Se activa con <html data-tema="oscuro"> (js/tema.js).
   Solo se redefinen tokens; lo que no aparece aquí vale igual en los dos temas
   (texto sobre acento, luz de los materiales, forma y tipografía).
   ===================================================================== */
:root[data-tema="oscuro"]{
  color-scheme:dark;
  /* Marca: los acentos suben de luminosidad para mantener el contraste sobre fondo oscuro */
  --hn-navy:#0a1230; --hn-navy-claro:#2b3d75;
  --hn-cobalt:#6b8cff; --hn-cobalt-osc:#9db3ff; --hn-cobalt-claro:#7d9bff; --hn-cobalt-suave:#9db3ff; --hn-cobalt-profundo:#2a3f8f;
  --hn-violeta:#8f80ff; --hn-violeta-boton:#7a6cff; --hn-violeta-claro:#a996ff;
  --hn-lav:#3b2f72; --hn-champ:#141a35;

  /* Canales */
  --hn-tinta-rgb:200,212,255;
  --hn-sombra-rgb:2,5,16;
  --hn-velo-rgb:3,6,18;
  --hn-panel-rgb:24,32,62;
  --hn-luz-rgb:72,86,140;                 /* los brillos blancos serían deslumbrantes: aquí son un reflejo tenue */
  --hn-acento-rgb:107,140,255;
  --hn-lav-rgb:72,54,140; --hn-icy-rgb:36,52,104; --hn-champ-rgb:20,26,52; --hn-rosa-holo-rgb:92,40,88;
  --hn-enlace-rgb:143,168,255; --hn-violeta-rgb:143,128,255; --hn-violeta-borde-rgb:150,130,230;
  --hn-exito-rgb:60,190,130; --hn-peligro-rgb:255,110,110; --hn-peligro-vivo-rgb:255,100,120;
  --hn-deseo-rgb:255,105,155; --hn-deseo-claro-rgb:255,120,165; --hn-apoyo-rgb:240,130,165;

  /* Texto */
  --hn-texto:#e7ebfa; --hn-texto2:#aab3d0; --hn-texto3:#7f8aab; --hn-enlace:#8fa8ff;
  /* Superficies */
  --hn-panel-solido:#18203e; --hn-luz:#48568c; --hn-superficie-suave:#1e2749; --hn-lila-fondo:#221d40;
  /* Acento */
  --hn-acento-texto:#a9bcff; --hn-acento-borde:#3d5296; --hn-acento-borde-suave:#2f3f73; --hn-acento-borde-hover:#5670c4;
  --hn-acento-borde-neutro:#2c3760; --hn-acento-fondo:#232f5c;
  /* Neutros */
  --hn-neutro-fondo:#1a2240; --hn-neutro-chapa:#29324f; --hn-neutro-linea:#2a3354; --hn-neutro-borde:#343f66;
  --hn-neutro-control:#3a4670; --hn-neutro-pista:#3a4468; --hn-neutro-texto:#bcb7c4;
  /* Violeta */
  --hn-violeta-texto:#c3b8ff; --hn-violeta-texto2:#b4a6f2; --hn-violeta-tinta:#e3ddff; --hn-violeta-fondo:#221c45;
  /* Éxito */
  --hn-exito:#2fa874; --hn-exito-claro:#3cc58a; --hn-exito-texto:#62d49e; --hn-exito-oscuro:#82e0b2; --hn-exito-tinta:#8fdcb5;
  --hn-exito-borde:#2d6b50; --hn-exito-borde-suave:#24513f; --hn-exito-fondo:#15302a;
  /* Peligro */
  --hn-peligro:#ff7d7d; --hn-error:#ff8a7c; --hn-peligro-vivo:#ff6f83; --hn-peligro-boton:#e0455a; --hn-peligro-oscuro:#ff9d9d;
  --hn-peligro-borde:#c0504c; --hn-peligro-fondo:#3a1c25;
  /* Deseo */
  --hn-deseo:#ff70a0; --hn-deseo-claro:#e85a8c; --hn-deseo-brillo:#ff8db3; --hn-deseo-relleno:#ff70a0; --hn-deseo-texto:#ff9fc1;
  --hn-deseo-borde:#7a3a58; --hn-deseo-borde-hover:#a64d77; --hn-deseo-fondo:#3a1d30; --hn-apoyo:#f08aaa;
  --hn-placa-filtro:brightness(.86) saturate(.92);
  --hn-tono-s1:45%; --hn-tono-s2:40%; --hn-tono-s3:35%; --hn-tono-l1:30%; --hn-tono-l2:26%; --hn-tono-l3:17%; --hn-tono-l4:22%; --hn-tono-base:#151c38;
  /* Aviso */
  --hn-aviso-fondo:#3a3018; --hn-aviso-fondo-suave:#2a2516; --hn-aviso-borde:#7a6328; --hn-aviso-borde-suave:#5f5024;
  --hn-aviso-texto:#f2d27a; --hn-aviso-texto2:#e8c060; --hn-naranja-texto:#ff9d66;
  /* Insignia beta */
  --hn-beta-borde:#a8843a; --hn-beta-borde-suave:#6a5626; --hn-beta-claro:#4a3d1c; --hn-beta-oscuro:#6e5726; --hn-beta-texto:#f6dc9a;
  /* Degradados */
  --hn-holo:linear-gradient(115deg,#1f2c58 0%,#3a2d6e 28%,#4a2650 50%,#1d4a45 70%,#1f2c58 100%);
}

/* =====================================================================
   Tema lavanda: claro, con base lila y acentos violeta. <html data-tema="lavanda">.
   Los colores de estado (éxito, peligro, deseo, aviso, beta) son los del tema claro.
   ===================================================================== */
:root[data-tema="lavanda"]{
  /* Marca: el navy pasa a ciruela y el cobalto a violeta */
  --hn-navy:#2a1b4d; --hn-navy-claro:#4a3478;
  --hn-cobalt:#7a5cf0; --hn-cobalt-osc:#6344d6; --hn-cobalt-claro:#9a7dff; --hn-cobalt-suave:#b49dff; --hn-cobalt-profundo:#4b2f9e;
  --hn-violeta:#9b6bff; --hn-violeta-boton:#b86bf2; --hn-violeta-claro:#a77dff;
  --hn-icy:#e6dcff; --hn-lav:#d4c2ff; --hn-champ:#f7f2ff; --hn-rosa-holo:#ffe1f2; --hn-menta-holo:#e4f1ff;

  /* Canales */
  --hn-tinta-rgb:42,27,77; --hn-sombra-rgb:42,27,77; --hn-velo-rgb:42,27,77;
  --hn-acento-rgb:122,92,240;
  --hn-lav-rgb:212,194,255; --hn-icy-rgb:230,220,255; --hn-champ-rgb:247,242,255; --hn-rosa-holo-rgb:255,225,242;
  --hn-enlace-rgb:106,75,220;

  /* Texto */
  --hn-texto:#2a1b4d; --hn-texto2:#5e5480; --hn-texto3:#8d84a8; --hn-enlace:#6a4bdc;
  /* Superficies */
  --hn-superficie-suave:#f3edff; --hn-lila-fondo:#efe6ff;
  /* Acento */
  --hn-acento-texto:#5b3fc9; --hn-acento-borde:#cdbbff; --hn-acento-borde-suave:#e0d4ff; --hn-acento-borde-hover:#b39cf5;
  --hn-acento-borde-neutro:#e3dbf5; --hn-acento-fondo:#f0e9ff;
  /* Neutros con un punto lila */
  --hn-neutro-fondo:#f7f4fc; --hn-neutro-chapa:#eee9f6; --hn-neutro-linea:#e7e0f2; --hn-neutro-borde:#dcd3ea;
  --hn-neutro-control:#d5cbe6; --hn-neutro-pista:#d6cce6;
  /* Cabeceras teñidas por set: algo más rosadas */
  --hn-tono-base:#fdfaff;
}