/* ============================================================
   IA Humana — Color tokens
   LIGHT-first: :root is the light theme (the default), and
   [data-theme="dark"] is the override. The neon is "el grito,
   no el fondo": used with restraint. On the light default the
   neon loses contrast, so the accent is olive (AA); on dark it
   returns to neon.
   ============================================================ */

:root {
  /* ---- Brand palette (raw) ---- */
  --neon: #B8FF2B;        /* accent on dark */
  --neon-deep: #9AE010;   /* deep accent */
  --olive: #5A7A0E;       /* accent on light (AA) */
  --ink: #0A0A0A;         /* near-black ink */
  --black: #080808;       /* page black */
  --paper: #F4F4EF;       /* warm light page */
  --white: #F0F0F0;       /* soft white */
  --pure: #FFFFFF;

  /* ---- Neutral ramp (cool-warm grey, dark scale) ---- */
  --grey-950: #080808;
  --grey-900: #0E0E0E;
  --grey-850: #141414;
  --grey-800: #1A1A1A;
  --grey-700: #262626;
  --grey-600: #3A3A3A;
  --grey-500: #5C5C5C;
  --grey-400: #8A8A8A;
  --grey-300: #B5B5B2;
  --grey-200: #D7D7D2;
  --grey-100: #ECECE7;

  /* ============ Semantic — LIGHT (default) ============ */
  --bg-page: var(--paper);
  --bg-sunken: #EAEAE3;
  --bg-raised: var(--pure);
  --bg-overlay: rgba(244, 244, 239, 0.72);

  /* Glass surfaces */
  --surface-card: rgba(255, 255, 255, 0.60);
  --surface-card-hover: rgba(255, 255, 255, 0.85);
  --surface-glass: rgba(255, 255, 255, 0.55);
  --surface-input: rgba(255, 255, 255, 0.70);

  --border: rgba(10, 10, 10, 0.12);
  --border-strong: rgba(10, 10, 10, 0.24);
  --border-faint: rgba(10, 10, 10, 0.07);

  --text-1: var(--ink);
  --text-2: rgba(10, 10, 10, 0.64);
  --text-3: rgba(10, 10, 10, 0.45);
  --text-on-accent: var(--paper);

  /* Accent */
  --accent: var(--olive);
  --accent-deep: #46600B;
  --accent-soft: rgba(90, 122, 14, 0.12);
  --accent-line: rgba(90, 122, 14, 0.38);

  /* Feedback (brand-aligned, restrained) */
  --success: #4F8A1E;
  --success-soft: rgba(79, 138, 30, 0.12);
  --warning: #9A6B00;
  --warning-soft: rgba(154, 107, 0, 0.12);
  --danger: #C0322F;
  --danger-soft: rgba(192, 50, 47, 0.10);
  --info: #2C7888;
  --info-soft: rgba(44, 120, 136, 0.10);

  /* ---- Categórico: las cuatro dimensiones ----
     La única paleta categórica del producto. Cuatro dimensiones tienen que
     distinguirse en el radar, en las tarjetas de nivel, en el informe y en el
     correo, y con el oliva solo no alcanza.

     Vivían en app.css. Están acá porque el servidor también las necesita en
     hexadecimal -para el SVG y para el HTML del correo, donde no hay
     variables- y ese duplicado ahora tiene una prueba que lo fija:
     diagnostico/tests/test_estaticos.py compara estos cuatro valores contra
     instrumento.COLOR_NIVEL. Si alguien cambia uno y no el otro, falla. */
  --dim-valor: #5A7A0E;
  --dim-capacidad: #B8451F;
  --dim-criterio: #946200;
  --dim-entorno: #0E7A93;
  --dim-valor-suave: rgba(90, 122, 14, 0.12);
  --dim-capacidad-suave: rgba(184, 69, 31, 0.12);
  --dim-criterio-suave: rgba(148, 98, 0, 0.12);
  --dim-entorno-suave: rgba(14, 122, 147, 0.12);

  /* ---- Ordinal: las cuatro bandas del índice ----
     Deliberadamente NO son los cuatro colores de arriba. En el tablero conviven
     las dos codificaciones -el radar habla de dimensiones, el mapa de calor
     habla de bandas- y repetir la paleta haría que un terracota significara
     "Capacidad" en un gráfico y "Inicial" en el de al lado.

     Las bandas son ordinales, así que se codifican como corresponde a un dato
     ordinal: una rampa de un solo tono, de arena a lima. Más saturado es más
     preparado, y eso se lee sin leyenda. Los grises de "sin datos" y "oculta"
     se quedan grises justamente para no entrar en la rampa. */
  --banda-inicial: #F0E6C8;
  --banda-en_desarrollo: #DFE8AC;
  --banda-preparado: #C3DE7C;
  --banda-avanzado: #9DCF3F;
  --banda-tinta: #2F3D08;

  color-scheme: light;
}

/* ============ Semantic — DARK (override) ============ */
[data-theme="dark"] {
  --bg-page: var(--black);
  --bg-sunken: #050505;
  --bg-raised: #101010;
  --bg-overlay: rgba(8, 8, 8, 0.72);

  --surface-card: rgba(240, 240, 240, 0.035);
  --surface-card-hover: rgba(240, 240, 240, 0.06);
  --surface-glass: rgba(18, 18, 18, 0.55);
  --surface-input: rgba(240, 240, 240, 0.04);

  --border: rgba(240, 240, 240, 0.10);
  --border-strong: rgba(240, 240, 240, 0.20);
  --border-faint: rgba(240, 240, 240, 0.06);

  --text-1: var(--white);
  --text-2: rgba(240, 240, 240, 0.66);
  --text-3: rgba(240, 240, 240, 0.42);
  --text-on-accent: var(--black);

  --accent: var(--neon);
  --accent-deep: var(--neon-deep);
  --accent-soft: rgba(184, 255, 43, 0.14);
  --accent-line: rgba(184, 255, 43, 0.40);

  --success: #8CE04A;
  --success-soft: rgba(140, 224, 74, 0.14);
  --warning: #E8B931;
  --warning-soft: rgba(232, 185, 49, 0.14);
  --danger: #FF6B6B;
  --danger-soft: rgba(255, 107, 107, 0.14);
  --info: #6FC6D6;
  --info-soft: rgba(111, 198, 214, 0.14);

  /* Las mismas dos paletas, levantadas para el negro. Este producto no activa
     el tema oscuro hoy -nada pone data-theme="dark"-, así que estos valores no
     se vieron en pantalla nunca. Están para que el archivo de tokens quede
     completo, no porque estén comprobados. */
  --dim-valor: #A8D93A;
  --dim-capacidad: #FF8A5C;
  --dim-criterio: #E8B931;
  --dim-entorno: #5FC8E0;
  --dim-valor-suave: rgba(168, 217, 58, 0.16);
  --dim-capacidad-suave: rgba(255, 138, 92, 0.16);
  --dim-criterio-suave: rgba(232, 185, 49, 0.16);
  --dim-entorno-suave: rgba(95, 200, 224, 0.16);

  --banda-inicial: #2A2612;
  --banda-en_desarrollo: #38401A;
  --banda-preparado: #4C5C1C;
  --banda-avanzado: #6E8A1E;
  --banda-tinta: #EDF3D8;

  color-scheme: dark;
}