/**
 * Quiovo — Tokens de diseño (T10.5-DS1)
 * =====================================
 * SOLO variables. Sin selectores de componente, sin reglas que no sean :root.
 * Fuente de marca: --qv-brand = #3c2ab5 (muestreado del isotipo original).
 *
 * No carga fuentes externas (Google Fonts etc.). La familia es 100% de sistema:
 * el archivo Manrope autoalojado que se intentó en DS2 NO está en el repo
 * (solo public/fonts/manrope/OFL.txt), así que prometerlo aquí era mentira.
 * --qv-font-sans es el ÚNICO sitio donde se define la familia.
 */

:root {
    /* ------------------------------------------------------------------ */
    /* Color — marca                                                       */
    /* ------------------------------------------------------------------ */
    --qv-brand:        #3c2ab5; /* primario exacto muestreado del isotipo */
    --qv-brand-hover:  #30219a; /* ~10% más oscuro (hover/active)        */
    --qv-brand-soft:   #eeecfb; /* tinte muy claro sobre blanco          */

    /* ------------------------------------------------------------------ */
    /* Color — neutros cálidos                                             */
    /* ------------------------------------------------------------------ */
    --qv-ink:          #211d2b; /* texto principal (casi negro cálido)   */
    --qv-ink-2:        #3d3748; /* texto secundario fuerte               */
    --qv-muted:        #6b6478; /* texto atenuado / metadatos            */
    --qv-line:         #e6e3ec; /* bordes y separadores                  */
    --qv-bg:           #faf9fc; /* fondo de página (blanco cálido)       */
    --qv-surface:      #ffffff; /* superficies / tarjetas                */

    /* ------------------------------------------------------------------ */
    /* Color — semánticos                                                  */
    /* ------------------------------------------------------------------ */
    --qv-success:      #1f8a4c;
    --qv-warning:      #b7791f;
    --qv-danger:       #c0392b;
    --qv-info:         #2563eb;

    /* ------------------------------------------------------------------ */
    /* Color — semánticos de TEXTO (T10.5-DS4b)                            */
    /* Tinta oscura para texto/badge sobre el fondo suave del mismo tono.  */
    /* Ratios medidos (tools/_ds4b1_contrast.php), todos >= 7:1 (AA/AAA):  */
    /*   success-ink #14612f sobre #f1faf4 = 7.09  (sobre blanco 7.55)     */
    /*   warning-ink #6b4708 sobre #fdf8ef = 7.85  (sobre blanco 8.30)     */
    /*   danger-ink  #8a2318 sobre #fdf3f2 = 8.26  (sobre blanco 9.00)     */
    /*   info-ink    #1e3a8a sobre #f2f6fe = 9.56  (sobre blanco 10.36)    */
    /* ------------------------------------------------------------------ */
    --qv-success-ink:  #14612f;
    --qv-warning-ink:  #6b4708;
    --qv-danger-ink:   #8a2318;
    --qv-info-ink:     #1e3a8a;

    /* Tintes y bordes del mismo tono (T-UI2).
       Existían repetidos a mano en quiovo-panel.css y quiovo-ui.css; ahora son
       token. El texto va SIEMPRE con el par *-ink de arriba (ratios en cabecera). */
    --qv-success-tint:   #f1faf4;
    --qv-success-border: #c9e9d5;
    --qv-warning-tint:   #fdf8ef;
    --qv-warning-border: #f0dfba;
    --qv-danger-tint:    #fdf3f2;
    --qv-danger-border:  #f0c9c4;
    --qv-info-tint:      #f2f6fe;
    --qv-info-border:    #c9d8f6;

    /* Anillos de foco (antes rgba(60, 42, 181, …) escrito a mano en 8 sitios). */
    --qv-brand-ring:       rgba(60, 42, 181, 0.18);
    --qv-brand-ring-focus: rgba(60, 42, 181, 0.35);
    --qv-brand-border:     #cdc6f2; /* borde de marca suave (hover de KPI) */

    /* Texto sobre superficies de marca/sólidas (botones, pasos, badges sólidos).
       Antes era #ffffff / #fff suelto en una decena de reglas del panel. */
    --qv-on-brand: #ffffff;

    /* ------------------------------------------------------------------ */
    /* Layout                                                              */
    /* ------------------------------------------------------------------ */
    --qv-container: 80rem;  /* ancho máximo de contenido del panel        */
    --qv-measure:   65ch;   /* longitud de línea de lectura cómoda        */
    --qv-section-y: clamp(1.5rem, 3vw, 2.5rem); /* aire entre secciones  */

    /* ------------------------------------------------------------------ */
    /* Tipografía                                                          */
    /* ------------------------------------------------------------------ */
    --qv-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                    Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

    /* Escala de tamaños (rem, base 16px) */
    --qv-fs-xs:   0.75rem;  /* 12px */
    --qv-fs-sm:   0.875rem; /* 14px */
    --qv-fs-md:   1rem;     /* 16px */
    --qv-fs-lg:   1.125rem; /* 18px */
    --qv-fs-xl:   1.25rem;  /* 20px */
    --qv-fs-2xl:  1.5rem;   /* 24px */
    --qv-fs-3xl:  1.875rem; /* 30px */
    --qv-fs-4xl:  2.25rem;  /* 36px */

    /* Pesos */
    --qv-fw-regular:  400;
    --qv-fw-medium:   500;
    --qv-fw-semibold: 600;
    --qv-fw-bold:     700;

    /* Interlineado */
    --qv-lh-tight: 1.2;
    --qv-lh-base:  1.5;
    --qv-lh-loose: 1.7;

    /* ------------------------------------------------------------------ */
    /* Forma — radios                                                      */
    /* ------------------------------------------------------------------ */
    --qv-r-sm: 4px;
    --qv-r-md: 8px;
    --qv-r-lg: 16px;

    /* ------------------------------------------------------------------ */
    /* Forma — sombras suaves                                              */
    /* ------------------------------------------------------------------ */
    --qv-shadow-sm: 0 1px 2px rgba(33, 29, 43, 0.06);
    --qv-shadow-md: 0 2px 8px rgba(33, 29, 43, 0.08);
    --qv-shadow-lg: 0 8px 24px rgba(33, 29, 43, 0.10);

    /* ------------------------------------------------------------------ */
    /* Espaciado — múltiplos de 4/8                                        */
    /* ------------------------------------------------------------------ */
    --qv-space-1:  4px;
    --qv-space-2:  8px;
    --qv-space-3:  12px;
    --qv-space-4:  16px;
    --qv-space-5:  20px;
    --qv-space-6:  24px;
    --qv-space-8:  32px;
    --qv-space-10: 40px;
    --qv-space-12: 48px;
    --qv-space-16: 64px;

    /* ------------------------------------------------------------------ */
    /* T21 — Densidad y elevación del panel                                */
    /* ------------------------------------------------------------------ */
    /* Altura de fila de las tablas del panel. 56px es el mínimo cómodo para */
    /* objetivo táctil (>=44px) con aire vertical suficiente.               */
    --qv-row-h:         3.5rem;
    /* Altura mínima de un control de formulario. Compartida por inputs,     */
    /* selects y botones para que una fila de formulario quede alineada.     */
    --qv-control-h:     2.75rem;
    /* Cabecera de tabla pegada al hacer scroll dentro de la tarjeta.        */
    --qv-thead-bg:      #fbfafd;
    /* Superficie de panel: tarjetas del monitor y skeletons comparten tono. */
    --qv-surface-sunken: #f4f2f8;
}