/*
 * Design tokens del panel. ÚNICO lugar donde se definen colores.
 *
 * Marca Fibox (del logo): magenta #E61280 · azul marino #21234C.
 * El magenta puro da 4.4:1 con texto blanco (no llega a AA 4.5:1), así que
 * botones y enlaces usan --acento (#D10F74, 5.2:1). El magenta puro queda
 * para detalles de marca (--marca), sin texto encima.
 *
 * Tema: <html data-theme="sistema|claro|oscuro">. "sistema" sigue a
 * prefers-color-scheme. El bloque oscuro está repetido a propósito (media
 * query + atributo) para no depender de light-dark(), que falta en Android viejos.
 */

:root {
  color-scheme: light;

  /* Marca */
  --marca: #E61280;
  --marino: #21234C;

  /* Superficies */
  --fondo: #F6F6F9;
  --superficie: #FFFFFF;
  --superficie-2: #F0F0F5;
  --borde: #E3E3EB;
  --borde-fuerte: #CFCFDC;

  /* Texto */
  --texto: #21234C;          /* 14.6:1 sobre --superficie */
  --texto-suave: #5A5D7A;    /*  6.3:1 */
  --texto-tenue: #63667F;    /*  5.2:1 sobre --fondo */

  /* Acento (acciones) */
  --acento: #D10F74;         /* 5.2:1 con blanco */
  --acento-hover: #B30C63;
  --acento-texto: #FFFFFF;
  --acento-suave: #FCE7F2;
  --enlace: #C20E6B;         /* acento como texto: 5.9:1 */
  --foco: rgba(209, 15, 116, 0.35);

  /* Estados (texto sobre su fondo suave: todos ≥ 4.5:1) */
  --ok: #1B7A45;        --ok-suave: #E4F4EA;
  --alerta: #8A5A00;    --alerta-suave: #FBF0D9;
  --error: #B42335;     --error-suave: #FBE7EA;
  --info: #2F4FB8;      --info-suave: #E7ECFB;
  --neutro: #5A5D7A;    --neutro-suave: #ECECF2;

  /* Forma */
  --radio: 10px;
  --radio-chico: 7px;
  --sombra: 0 1px 2px rgba(33, 35, 76, 0.05), 0 4px 16px rgba(33, 35, 76, 0.05);
  --sombra-alta: 0 8px 32px rgba(33, 35, 76, 0.14);

  /* Tipografía */
  --fuente: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) {
    color-scheme: dark;
    --fondo: #111229;
    --superficie: #181A36;
    --superficie-2: #202245;
    --borde: #2A2D57;
    --borde-fuerte: #3A3D6E;
    --texto: #ECEDF5;
    --texto-suave: #B0B3CE;
    --texto-tenue: #9396B8;
    --acento: #D10F74;
    --acento-hover: #E8288A;
    --acento-texto: #FFFFFF;
    --acento-suave: #3A1837;
    --enlace: #FF5CAB;       /* 5.9:1 sobre --superficie oscura */
    --foco: rgba(255, 77, 166, 0.45);
    --ok: #5FD394;      --ok-suave: #173A2E;
    --alerta: #F2C063;  --alerta-suave: #3A3020;
    --error: #FF8595;   --error-suave: #401E2E;
    --info: #9DB2FF;    --info-suave: #22295A;
    --neutro: #B0B3CE;  --neutro-suave: #262950;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2);
    --sombra-alta: 0 8px 32px rgba(0, 0, 0, 0.45);
  }
}

:root[data-theme="oscuro"] {
  color-scheme: dark;
  --fondo: #111229;
  --superficie: #181A36;
  --superficie-2: #202245;
  --borde: #2A2D57;
  --borde-fuerte: #3A3D6E;
  --texto: #ECEDF5;
  --texto-suave: #B0B3CE;
  --texto-tenue: #9396B8;
  --acento: #D10F74;
  --acento-hover: #E8288A;
  --acento-texto: #FFFFFF;
  --acento-suave: #3A1837;
  --enlace: #FF5CAB;
  --foco: rgba(255, 77, 166, 0.45);
  --ok: #5FD394;      --ok-suave: #173A2E;
  --alerta: #F2C063;  --alerta-suave: #3A3020;
  --error: #FF8595;   --error-suave: #401E2E;
  --info: #9DB2FF;    --info-suave: #22295A;
  --neutro: #B0B3CE;  --neutro-suave: #262950;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2);
  --sombra-alta: 0 8px 32px rgba(0, 0, 0, 0.45);
}