/* ==========================================================================
   Albunea — tokens de diseño (fuente única de colores, tipografía, radios,
   sombras y espaciado). Panel y sitio SOLO usan estas variables.
   Dueño: Marca. Guía completa: /marca/guia.html (carpeta marca/ del repo).

   Tema: claro por omisión; oscuro si el sistema lo pide (prefers-color-scheme)
   salvo que la página fuerce <html data-tema="claro">. <html data-tema="oscuro">
   fuerza el oscuro. Los ratios de contraste (WCAG 2.x) están anotados contra
   --alb-superficie salvo que se indique otra cosa.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Superficies --------------------------------------------------- */
  --alb-fondo: #FAF7F0;            /* marfil: plano de la página */
  --alb-superficie: #FFFDF8;       /* tarjetas, tablas, campos */
  --alb-superficie-2: #F2EEE3;     /* zonas hundidas, encabezados de tabla, hover */
  --alb-superficie-inversa: #1B1840; /* bandas oscuras dentro del modo claro */
  --alb-velo: rgb(14 12 36 / 0.55); /* fondo detrás de modales */

  /* --- Texto ----------------------------------------------------------- */
  --alb-texto: #1B1840;            /* 16.51:1 */
  --alb-texto-2: #4A4766;          /* secundario 8.23:1 sobre fondo, 7.60 sobre superficie-2 */
  --alb-texto-tenue: #6B6787;      /* notas y ejes 5.28:1 (4.63 sobre superficie-2) */
  --alb-texto-inverso: #F3EEE2;

  /* --- Marca ----------------------------------------------------------- */
  --alb-primario: #3B2F8F;         /* índigo albunea 10.38:1 */
  --alb-primario-hover: #2E2475;
  --alb-primario-suave: #ECE9FA;   /* fondos de selección / insignia primaria */
  --alb-sobre-primario: #FFFDF8;   /* texto sobre primario 10.38:1 (12.71 en hover) */
  --alb-acento: #E2BE6A;           /* oro suave: relleno decorativo, botón acento */
  --alb-acento-texto: #8A6416;     /* oro para texto 5.28:1 */
  --alb-sobre-acento: #1B1840;     /* texto sobre oro 9.44:1 */
  --alb-amatista: #6E3FB8;         /* 6.74:1 */
  --alb-aurora: #1F6F8B;           /* 5.30:1 sobre fondo */

  /* --- Estados (siempre con icono + texto, nunca solo color) ------------ */
  --alb-exito: #1E7046;            /* 5.20:1 sobre su fondo */
  --alb-exito-fondo: #E3F1E8;
  --alb-alerta: #8A5300;           /* ámbar 5.60:1 sobre su fondo */
  --alb-alerta-fondo: #FBF0D9;
  --alb-peligro: #B02441;          /* carmín 6.51:1; 5.55 sobre su fondo */
  --alb-peligro-fondo: #FBE6EA;
  --alb-info: #1F6F8B;             /* 4.86:1 sobre su fondo */
  --alb-info-fondo: #E2F0F4;

  /* --- Bordes y foco ----------------------------------------------------- */
  --alb-borde: #E3DDCF;            /* divisores decorativos */
  --alb-borde-fuerte: #8F89A8;     /* contorno de campos 3.27:1 (no-texto ≥ 3) */
  --alb-foco: #6E3FB8;             /* anillo de foco amatista */

  /* --- Gráficas (validado con dataviz/validate_palette, superficie #FFFDF8) --
     Categórica en orden fijo, nunca ciclar: índigo, aurora, oro, cielo, rosa, ciruela.
     Gráficas de dispersión/mapas: máximo las 3 primeras. */
  --alb-serie-1: #5747D1;
  --alb-serie-2: #12938F;
  --alb-serie-3: #C08A12;
  --alb-serie-4: #3A86D8;
  --alb-serie-5: #D25A8C;
  --alb-serie-6: #8A3FA8;
  /* Secuencial/ordinal índigo (claro→oscuro). Para embudos usa 2–6. */
  --alb-secuencial-1: #C9C2F5;
  --alb-secuencial-2: #9C90EC;
  --alb-secuencial-3: #7465DD;
  --alb-secuencial-4: #5747D1;
  --alb-secuencial-5: #3F31AE;
  --alb-secuencial-6: #2A2080;
  --alb-grafica-superficie: #FFFDF8;
  --alb-grafica-rejilla: #ECE7DA;
  --alb-grafica-eje: #C9C2B0;

  /* --- Tipografía (sin CDNs: pilas del sistema) --------------------------- */
  --alb-fuente-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --alb-fuente-titulo: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif;
  --alb-fuente-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --alb-tam-xs: 0.75rem;   /* 12 */
  --alb-tam-s: 0.875rem;   /* 14 */
  --alb-tam-m: 1rem;       /* 16 */
  --alb-tam-l: 1.125rem;   /* 18 */
  --alb-tam-xl: 1.375rem;  /* 22 */
  --alb-tam-2xl: 1.75rem;  /* 28 */
  --alb-tam-3xl: 2.25rem;  /* 36 */
  --alb-tam-4xl: 3rem;     /* 48 */
  --alb-interlineado: 1.55;
  --alb-interlineado-titulo: 1.15;
  --alb-peso-normal: 400;
  --alb-peso-medio: 550;
  --alb-peso-fuerte: 650;

  /* --- Radios ------------------------------------------------------------ */
  --alb-radio-s: 6px;
  --alb-radio-m: 10px;
  --alb-radio-l: 16px;
  --alb-radio-xl: 24px;
  --alb-radio-pleno: 999px;

  /* --- Sombras (tintadas de índigo, nunca negras puras) --------------------- */
  --alb-sombra-1: 0 1px 2px rgb(27 24 64 / 0.06), 0 1px 1px rgb(27 24 64 / 0.04);
  --alb-sombra-2: 0 4px 12px rgb(27 24 64 / 0.08), 0 1px 3px rgb(27 24 64 / 0.06);
  --alb-sombra-3: 0 16px 40px rgb(27 24 64 / 0.14), 0 4px 10px rgb(27 24 64 / 0.06);
  --alb-sombra-halo: 0 0 0 1px rgb(226 190 106 / 0.45), 0 0 24px rgb(226 190 106 / 0.25);

  /* --- Espaciado (base 4) ---------------------------------------------------- */
  --alb-espacio-1: 4px;
  --alb-espacio-2: 8px;
  --alb-espacio-3: 12px;
  --alb-espacio-4: 16px;
  --alb-espacio-5: 24px;
  --alb-espacio-6: 32px;
  --alb-espacio-7: 48px;
  --alb-espacio-8: 64px;
  --alb-espacio-9: 96px;

  /* --- Movimiento y capas ----------------------------------------------------- */
  --alb-transicion: 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --alb-ancho-max: 1200px;
  --alb-z-menu: 20;
  --alb-z-modal: 50;
  --alb-z-aviso: 60;
}

/* --- Modo oscuro: «cielo nocturno» ------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --alb-fondo: #0E0C24;
    --alb-superficie: #1A1740;
    --alb-superficie-2: #241F52;
    --alb-superficie-inversa: #F3EEE2;
    --alb-velo: rgb(5 4 16 / 0.7);
    --alb-texto: #F3EEE2;            /* 14.62:1 */
    --alb-texto-2: #C2BCD9;          /* 9.26:1 */
    --alb-texto-tenue: #9A94B8;      /* 5.89:1 (5.24 sobre superficie-2) */
    --alb-texto-inverso: #1B1840;
    --alb-primario: #B3A6FF;         /* 7.91:1 */
    --alb-primario-hover: #C9BFFF;
    --alb-primario-suave: #2C2566;
    --alb-sobre-primario: #12102E;   /* 8.62:1 (10.87 en hover) */
    --alb-acento: #E6C77E;
    --alb-acento-texto: #E6C77E;     /* 10.35:1 */
    --alb-sobre-acento: #12102E;     /* 11.27:1 */
    --alb-amatista: #C9A3FF;         /* 8.20:1 */
    --alb-aurora: #7FD3E6;           /* 9.97:1 */
    --alb-exito: #6FD6A3;            /* 7.43:1 sobre su fondo */
    --alb-exito-fondo: #13362B;
    --alb-alerta: #F2C46B;           /* 7.94:1 sobre su fondo */
    --alb-alerta-fondo: #3A3020;
    --alb-peligro: #FF9AAB;          /* 7.76:1 sobre su fondo */
    --alb-peligro-fondo: #3D1530;
    --alb-info: #7FD3E6;             /* 7.69:1 sobre su fondo */
    --alb-info-fondo: #123447;
    --alb-borde: #2E2A5C;
    --alb-borde-fuerte: #6E6894;     /* 3.28:1 */
    --alb-foco: #E6C77E;
    --alb-serie-1: #7F72E6;
    --alb-serie-2: #1A9F99;
    --alb-serie-3: #B78616;
    --alb-serie-4: #3F8DDB;
    --alb-serie-5: #D8607A;
    --alb-serie-6: #A15ED6;
    --alb-secuencial-1: #4A3CB8;
    --alb-secuencial-2: #6152D3;
    --alb-secuencial-3: #7F72E6;
    --alb-secuencial-4: #9C90EC;
    --alb-secuencial-5: #BDB3FA;
    --alb-secuencial-6: #E0DBFF;
    --alb-grafica-superficie: #1A1740;
    --alb-grafica-rejilla: #2A2658;
    --alb-grafica-eje: #3F3A75;
    --alb-sombra-1: 0 1px 2px rgb(0 0 0 / 0.3);
    --alb-sombra-2: 0 6px 16px rgb(0 0 0 / 0.35), 0 1px 3px rgb(0 0 0 / 0.3);
    --alb-sombra-3: 0 18px 48px rgb(0 0 0 / 0.5), 0 4px 12px rgb(0 0 0 / 0.3);
    --alb-sombra-halo: 0 0 0 1px rgb(230 199 126 / 0.4), 0 0 28px rgb(179 166 255 / 0.25);
  }
}

/* Mismo bloque, forzado por atributo (selector de tema del panel). */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --alb-fondo: #0E0C24;
  --alb-superficie: #1A1740;
  --alb-superficie-2: #241F52;
  --alb-superficie-inversa: #F3EEE2;
  --alb-velo: rgb(5 4 16 / 0.7);
  --alb-texto: #F3EEE2;
  --alb-texto-2: #C2BCD9;
  --alb-texto-tenue: #9A94B8;
  --alb-texto-inverso: #1B1840;
  --alb-primario: #B3A6FF;
  --alb-primario-hover: #C9BFFF;
  --alb-primario-suave: #2C2566;
  --alb-sobre-primario: #12102E;
  --alb-acento: #E6C77E;
  --alb-acento-texto: #E6C77E;
  --alb-sobre-acento: #12102E;
  --alb-amatista: #C9A3FF;
  --alb-aurora: #7FD3E6;
  --alb-exito: #6FD6A3;
  --alb-exito-fondo: #13362B;
  --alb-alerta: #F2C46B;
  --alb-alerta-fondo: #3A3020;
  --alb-peligro: #FF9AAB;
  --alb-peligro-fondo: #3D1530;
  --alb-info: #7FD3E6;
  --alb-info-fondo: #123447;
  --alb-borde: #2E2A5C;
  --alb-borde-fuerte: #6E6894;
  --alb-foco: #E6C77E;
  --alb-serie-1: #7F72E6;
  --alb-serie-2: #1A9F99;
  --alb-serie-3: #B78616;
  --alb-serie-4: #3F8DDB;
  --alb-serie-5: #D8607A;
  --alb-serie-6: #A15ED6;
  --alb-secuencial-1: #4A3CB8;
  --alb-secuencial-2: #6152D3;
  --alb-secuencial-3: #7F72E6;
  --alb-secuencial-4: #9C90EC;
  --alb-secuencial-5: #BDB3FA;
  --alb-secuencial-6: #E0DBFF;
  --alb-grafica-superficie: #1A1740;
  --alb-grafica-rejilla: #2A2658;
  --alb-grafica-eje: #3F3A75;
  --alb-sombra-1: 0 1px 2px rgb(0 0 0 / 0.3);
  --alb-sombra-2: 0 6px 16px rgb(0 0 0 / 0.35), 0 1px 3px rgb(0 0 0 / 0.3);
  --alb-sombra-3: 0 18px 48px rgb(0 0 0 / 0.5), 0 4px 12px rgb(0 0 0 / 0.3);
  --alb-sombra-halo: 0 0 0 1px rgb(230 199 126 / 0.4), 0 0 28px rgb(179 166 255 / 0.25);
}

@media (prefers-reduced-motion: reduce) {
  :root { --alb-transicion: 0ms linear; }
}

/* --- Cielo nocturno de la Constelación (igual en claro y oscuro: siempre es de noche) --- */
:root {
  --alb-cielo-fondo: #0E0C24;      /* índigo noche */
  --alb-cielo-fondo-2: #1E1A4A;
  --alb-cielo-estrella: #F3EEE2;   /* marfil: visitante anónimo */
  --alb-cielo-oro: #E6C77E;        /* oro: ya compró */
  --alb-cielo-amatista: #C9A3FF;   /* amatista clara: identificado */
  --alb-cielo-aurora: #7FD3E6;     /* aurora clara: intención alta */
  --alb-cielo-linea: #8F86D9;      /* trazo de las figuras */
  --alb-cielo-texto: #F3EEE2;      /* 16.9:1 sobre el fondo */
  --alb-cielo-tenue: #B9B3D6;      /* 9.3:1 */
  --alb-cielo-foco: #E6C77E;
}