/* 
   arText Analytics - Premium Design System
   Color Palette: Emerald & Slate modern tech aesthetic
*/

:root {
  /* Color System */
  --bg-app: #f8fafc;
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --border-color: #e2e8f0;
  
  --text-main: #0f172a;
  --text-muted: #64748b;
  --text-inverse: #ffffff;
  
  --primary: #0ea5e9;
  --primary-hover: #0284c7;
  --primary-light: rgba(14, 165, 233, 0.1);
  
  --accent-emerald: #10b981;
  --accent-emerald-dark: #0f766e;
  
  /* --- Niveles de la lengua --------------------------------------------------
     Paleta única de los tres niveles con los que el motor clasifica cada regla:
     discurso, morfosintaxis y léxico (las siglas son léxico). Esta declaración
     es la fuente: `original_suggestions.css` la consume por variable y
     `app/pdf/static/report_core.css` repite los mismos valores porque el PDF se
     compone sin esta hoja. `general` no es un nivel, sino el gris de una
     métrica sin categoría. Cambiar un color aquí obliga a repetirlo allí. */
  --color-discourse: #44709c;
  --color-discourse-light: rgba(139, 92, 246, 0.12);
  --color-lexical: #915c7f;
  --color-lexical-light: rgba(6, 182, 212, 0.12);
  --color-morphosyntax: #966127;
  --color-morphosyntax-light: rgba(245, 158, 11, 0.12);
  --color-general: #6c6c6c;
  --color-general-light: rgba(100, 116, 139, 0.12);
  /* Subcódigo semántico de una sola regla morfosintáctica: la persona verbal.
     Lo que importa es distinguir el singular del plural, en el texto y en el
     punto del panel: teja el singular y violeta el plural. Entre los dos hay
     ΔE 31 en el relleno y 35 en el punto, y 28 y 32 en el peor caso de
     daltonismo (Machado 2009); el terracota y el dorado de antes caían a 3,9
     y 2,1 (Amor, 22/09: costaba distinguirlos, sobre todo en los puntos del
     panel). Ninguno baja de ΔE 15 frente a los colores de categoría ni de 42
     frente al verde de «aplicado». Medidas: `docs/encargo-2026-09-22.md`, M3. */
  --hit-first-person-singular: #ac514c;
  --hit-first-person-plural: #755fad;

  /* --- Marcas del texto (estudio L7, propuesta J1) --------------------------

     Cada categoría tiene dos tonos del mismo color, y los dos están aquí:

     - el TINTE, fondo de la ocurrencia visible, claro y con el texto del folio
       encima (7,6–10,8:1);
     - el RELLENO, fondo del caso elegido, con texto blanco a 5,2:1. Es el que
       vale además como color de identidad —punto del chip, lomo de la tarjeta,
       cifra— porque sobre blanco da 5,2:1; los `--color-*` de arriba son
       exactamente estos.

     Los de antes (`#8b5cf6`, `#06b6d4`, `#f59e0b`, `#64748b`) se eligieron sin
     medir: entre el cian de léxico y el gris de general había ΔE 2,67 en
     protanopía, o sea el mismo color. Estos salen de recorrer el espacio de
     tono en OKLCh; el estudio y las cifras están en
     `docs/maquetas/contraste-2026-09/`.

     El VERDE está descartado para las marcas, y no por contraste: es el color
     con el que el panel dice «aplicado» (`--accent-emerald`, `.is-success`).
     Una marca verde en el texto se leería como una corrección ya aceptada. Por
     eso léxico va en malva, aunque fuera verde en una versión anterior de este
     mismo cambio: queda a ΔE 51 del verde de «aplicar».

     El CONECTOR no es una categoría: es lo mismo dentro de cualquiera de ellas.
     Si tomase el color de la suya, dentro de morfosintaxis saldría amarillo, o
     sea el color de morfosintaxis. Va en un solo tono oscuro, que da 3,4:1
     contra cualquiera de los seis rellenos. */
  --hit-tint-discourse: #d7eaff;
  --hit-tint-lexical: #f7c2e4;
  --hit-tint-morphosyntax: #f1eabc;
  --hit-tint-general: #e8e8e8;
  --hit-tint-first-person-singular: #ffcbc5;
  --hit-tint-first-person-plural: #ddd3ff;
  --hit-connector: #141821;

  /* Tercer tono del par, sólo para el PUNTO del panel: el mismo tono del tinte
     subido hasta 3:1 sobre el blanco. El tinte se queda en 1,2:1 y un círculo
     de 8 px con ese valor no se ve; el relleno, al otro extremo, se lee casi
     negro en un punto tan pequeño. Éste conserva la familia clara de cada
     categoría y además cumple 1.4.11 por sí solo, sin aro.

     Morfosintaxis va en el tono 75 y no en el 100 del tinte: a esta luz el
     amarillo del tinte cae en oliva, que es el mismo error que ya hubo que
     corregir en su relleno. */
  --hit-dot-discourse: #3b98f3;
  --hit-dot-lexical: #db6fba;
  --hit-dot-morphosyntax: #c98700;
  --hit-dot-general: #959595;
  --hit-dot-first-person-singular: #ed6d67;
  --hit-dot-first-person-plural: #a282f1;

  /* Acento del panel: chips y lomo de tarjeta. El relleno de la marca sirve
     como color de identidad en un punto de 8 px, pero en la cifra de un chip
     —12 px, peso 700— el malva de léxico y el ámbar de morfosintaxis quedaban a
     ΔE 34 y se leían como dos marrones. Éstos son los mismos tonos con el croma
     subido de 0,075 a 0,13, y siguen dando 4,6:1 sobre blanco, que es lo que
     necesita una cifra por ser texto: entre léxico y morfosintaxis pasan a
     ΔE 47, y el par más cercano de los cuatro está en 22. */
  --hit-accent-discourse: #2e78be;
  --hit-accent-lexical: #ac5992;
  --hit-accent-morphosyntax: #9f6b00;
  --hit-accent-general: #757575;
  
  /* Statuses */
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;

  /* --- Acciones secundarias (`.ghost-button`) -------------------------------
     Un único juego de tokens para TODOS los botones secundarios del sitio.
     Antes `.ghost-button` estaba pintado para fondo oscuro (texto #e2e8f0,
     borde blanco al 20 %) y se usaba siempre sobre tarjetas blancas: 1,23:1 de
     contraste, o sea ilegible y con aspecto de deshabilitado. Los valores de
     abajo están medidos sobre blanco:

       texto secundario   #334155  10,35:1   (AA holgado)
       borde secundario   #7d8da4   3,38:1   (AA de componentes, 1.4.11)
       texto destacado    #005596   7,66:1
       borde destacado    #3d8fcd   3,49:1
       texto destructivo  #b91c1c   6,47:1
       deshabilitado      #94a3b8   2,34:1 sobre #f1f5f9 — BAJO A PROPÓSITO:
                                    lo inerte debe verse inerte, y WCAG exime
                                    a los controles deshabilitados. Es lo que
                                    separa «no se puede pulsar» de «secundario».
     ------------------------------------------------------------------------ */
  --btn-secondary-text: #334155;
  --btn-secondary-border: #7d8da4;
  --btn-secondary-hover-bg: #eef2f7;
  --btn-secondary-active-bg: #dfe6ef;
  --btn-key-text: #005596;
  --btn-key-border: #3d8fcd;
  --btn-key-bg: #eaf3fb;
  --btn-key-hover-bg: #dbeaf8;
  --btn-danger-text: #b91c1c;
  --btn-danger-hover-bg: #fdeeee;
  --btn-off-text: #94a3b8;
  --btn-off-bg: #f1f5f9;
  --btn-off-border: #cbd5e1;
  --focus-ring: #006fc0;

  /* Typography */
  --font-heading: 'Outfit', 'Inter', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  
  /* Shadow & Transitions */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 0 15px rgba(14, 165, 233, 0.25);
  --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}