/* 
   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: #8b5cf6;
  --color-discourse-light: rgba(139, 92, 246, 0.12);
  --color-lexical: #06b6d4;
  --color-lexical-light: rgba(6, 182, 212, 0.12);
  --color-morphosyntax: #f59e0b;
  --color-morphosyntax-light: rgba(245, 158, 11, 0.12);
  --color-general: #64748b;
  --color-general-light: rgba(100, 116, 139, 0.12);
  /* Subcódigo semántico de una sola regla morfosintáctica. La tarjeta sigue
     usando naranja; estos tonos distinguen singular y plural en sus marcas. */
  --hit-first-person-singular: #0f9f86;
  --hit-first-person-plural: #2878c8;
  
  /* 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);
}