/*
 * Tokens de diseño de ABHI HelpDesk: la única fuente de los valores de la interfaz (change ui-brand-theme).
 * Guía de uso: docs/ui-guidelines.md. Fuera de este archivo, las hojas solo usan var(--abhi-…).
 *
 * Dos niveles:
 *   - Primitivos (--abhi-<color>-<tono>): valores. Los cuatro de marca son los del Manual de Identidad
 *     corporativa ABHISOFT 2025 y no cambian entre temas.
 *   - Roles (--abhi-color-…, --abhi-shadow-…): lo que usan las hojas. Se redefinen para el tema oscuro.
 *
 * Cortes responsive (las variables CSS no funcionan dentro de @media; son constantes):
 *   600px celular · 768px tableta vertical · 1024px tableta horizontal / escritorio pequeño · 1280px escritorio.
 *
 * El tema oscuro se declara dos veces con los mismos valores: elegido por el agente (data-theme="dark") y
 * siguiendo al sistema (prefers-color-scheme sin data-theme="light"). La prueba de contraste exige que coincidan.
 */

:root {
    /* Marca (manual) */
    --abhi-lime-500: #D8D902;
    --abhi-graphite-700: #3D4543;
    --abhi-sky-300: #96D9E9;
    --abhi-amber-500: #DD8A03;

    /* Derivados de marca */
    --abhi-lime-50: #FAFAD9;
    --abhi-lime-600: #C4C502;
    --abhi-lime-800: #5E5F00;
    --abhi-lime-950: #2F3A1F;
    --abhi-sky-50: #E8F7FB;
    --abhi-sky-800: #1E6B7E;
    --abhi-sky-950: #173238;
    --abhi-amber-50: #FDF1DD;
    --abhi-amber-300: #E9A73A;
    --abhi-amber-800: #8A5700;
    --abhi-amber-950: #3A2E14;

    /* Neutros tintados hacia el gris de marca */
    --abhi-white: #FFFFFF;
    --abhi-gray-50: #F4F6F5;
    --abhi-gray-100: #E9ECEB;
    --abhi-gray-200: #D5DAD8;
    --abhi-gray-300: #C3CBC8;
    --abhi-gray-400: #A9B3B0;
    --abhi-gray-500: #7C8784;
    --abhi-gray-550: #6B7673;
    --abhi-gray-600: #5F6B68;
    --abhi-gray-650: #4B5552;
    --abhi-gray-100-dark: #E6EAE8;
    --abhi-gray-750: #2E3533;
    --abhi-gray-800: #252B29;
    --abhi-gray-850: #1C2120;
    --abhi-gray-900: #151918;

    /* Semánticos fuera del manual (éxito y peligro; design, decisión 8) */
    --abhi-green-50: #E6F4EA;
    --abhi-green-300: #5FCB8A;
    --abhi-green-700: #1F7A3D;
    --abhi-green-950: #173323;
    --abhi-red-50: #FDECEA;
    --abhi-red-300: #FF8A7A;
    --abhi-red-700: #B42318;
    --abhi-red-950: #3D1D1A;

    /* Tipografía */
    --abhi-font-family: Mukta, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --abhi-font-family-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
    --abhi-font-weight-light: 300;
    --abhi-font-weight-regular: 400;
    --abhi-font-weight-medium: 500;
    --abhi-font-weight-semibold: 600;
    --abhi-font-weight-bold: 700;
    --abhi-font-size-display: 2rem;
    --abhi-line-height-display: 2.5rem;
    --abhi-font-size-h1: 1.75rem;
    --abhi-line-height-h1: 2.25rem;
    --abhi-font-size-h2: 1.375rem;
    --abhi-line-height-h2: 1.875rem;
    --abhi-font-size-h3: 1.125rem;
    --abhi-line-height-h3: 1.625rem;
    --abhi-font-size-body: 1rem;
    --abhi-line-height-body: 1.5rem;
    --abhi-font-size-table: 0.875rem;
    --abhi-line-height-table: 1.25rem;
    --abhi-font-size-label: 0.8125rem;
    --abhi-line-height-label: 1.125rem;
    --abhi-font-size-caption: 0.75rem;
    --abhi-line-height-caption: 1rem;

    /* Espaciado (base 4 px) */
    --abhi-space-1: 0.25rem;
    --abhi-space-2: 0.5rem;
    --abhi-space-3: 0.75rem;
    --abhi-space-4: 1rem;
    --abhi-space-5: 1.5rem;
    --abhi-space-6: 2rem;
    --abhi-space-7: 3rem;
    --abhi-space-8: 4rem;

    /* Radios */
    --abhi-radius-sm: 0.25rem;
    --abhi-radius-md: 0.5rem;
    --abhi-radius-lg: 0.75rem;
    --abhi-radius-full: 999px;

    /* Tamaños */
    --abhi-size-sidebar: 16rem;
    --abhi-size-sidebar-collapsed: 4.5rem;
    --abhi-size-topbar: 3.5rem;
    --abhi-size-content-max: 90rem;
    --abhi-size-reading-max: 60rem;
    --abhi-size-form-max: 48rem;
    --abhi-size-login-card: 26rem;
    --abhi-size-media-max: 24rem;
    --abhi-size-icon: 1.25rem;
    --abhi-size-icon-sm: 1rem;
    --abhi-size-icon-lg: 3rem;
    --abhi-size-touch: 2.75rem;
    --abhi-size-control-sm: 2.25rem;
    --abhi-size-focus-ring: 2px;
    /* Logotipo (manual: mínimo 170 px la versión principal y 85 px el isotipo; área de seguridad 3x).
       En la versión vertical el nombre ocupa todo el ancho y mide 30x: x = 176 px / 30 ≈ 5.9 px, 3x ≈ 18 px. */
    --abhi-size-logo: 11rem;
    --abhi-size-logo-safe: 1.125rem;
    --abhi-size-isotipo: 5.5rem;

    /* Movimiento */
    --abhi-duration-fast: 120ms;
    --abhi-duration-normal: 200ms;
    /* Tiempo real de la bandeja (design D5 de inbox-realtime): cuánto dura el resaltado de un ticket nuevo y la salida de una fila */
    --abhi-duration-highlight: 5s;
    --abhi-duration-leaving: 1s;
    --abhi-opacity-leaving: 0.45;
    --abhi-easing: cubic-bezier(0.2, 0, 0, 1);

    /* ---- Roles: tema claro ---- */
    color-scheme: light;
    --abhi-color-bg: var(--abhi-gray-50);
    --abhi-color-surface: var(--abhi-white);
    --abhi-color-surface-hover: var(--abhi-gray-100);
    --abhi-color-surface-sunken: var(--abhi-gray-100);
    --abhi-color-paper: var(--abhi-white);
    --abhi-color-on-paper: var(--abhi-graphite-700);
    --abhi-color-text: var(--abhi-graphite-700);
    --abhi-color-text-muted: var(--abhi-gray-600);
    --abhi-color-border: var(--abhi-gray-200);
    --abhi-color-border-strong: var(--abhi-gray-500);
    --abhi-color-link: var(--abhi-sky-800);
    --abhi-color-focus: var(--abhi-graphite-700);
    --abhi-color-accent: var(--abhi-lime-500);
    --abhi-color-accent-hover: var(--abhi-lime-600);
    --abhi-color-on-accent: var(--abhi-graphite-700);
    --abhi-color-accent-subtle: var(--abhi-lime-50);
    --abhi-color-on-accent-subtle: var(--abhi-lime-800);
    --abhi-color-accent-border: var(--abhi-lime-500);
    --abhi-color-sky: var(--abhi-sky-300);
    --abhi-color-on-sky: var(--abhi-graphite-700);

    --abhi-color-success: var(--abhi-green-700);
    --abhi-color-success-subtle: var(--abhi-green-50);
    --abhi-color-on-success-subtle: var(--abhi-green-700);
    --abhi-color-danger: var(--abhi-red-700);
    --abhi-color-danger-subtle: var(--abhi-red-50);
    --abhi-color-on-danger-subtle: var(--abhi-red-700);
    --abhi-color-warning: var(--abhi-amber-800);
    --abhi-color-warning-border: var(--abhi-amber-500);
    --abhi-color-warning-subtle: var(--abhi-amber-50);
    --abhi-color-on-warning-subtle: var(--abhi-amber-800);
    --abhi-color-info: var(--abhi-sky-800);
    --abhi-color-info-border: var(--abhi-sky-300);
    --abhi-color-info-subtle: var(--abhi-sky-50);
    --abhi-color-on-info-subtle: var(--abhi-sky-800);
    --abhi-color-on-strong: var(--abhi-white);

    /* El menú lateral es oscuro en ambos temas */
    --abhi-color-sidebar-bg: var(--abhi-graphite-700);
    --abhi-color-sidebar-text: var(--abhi-gray-100-dark);
    --abhi-color-sidebar-text-muted: var(--abhi-gray-300);
    --abhi-color-sidebar-active-bg: var(--abhi-gray-650);
    --abhi-color-sidebar-active-text: var(--abhi-white);
    --abhi-color-sidebar-indicator: var(--abhi-lime-500);
    --abhi-color-sidebar-focus: var(--abhi-lime-500);

    --abhi-shadow-sm: 0 1px 2px rgba(61, 69, 67, 0.08);
    --abhi-shadow-md: 0 2px 4px rgba(61, 69, 67, 0.06), 0 6px 16px rgba(61, 69, 67, 0.08);
    --abhi-shadow-lg: 0 8px 24px rgba(61, 69, 67, 0.16);
    --abhi-color-backdrop: rgba(21, 25, 24, 0.5);
}

/* ---- Roles: tema oscuro elegido por el agente ---- */
:root[data-theme="dark"] {
    color-scheme: dark;
    --abhi-color-bg: var(--abhi-gray-850);
    --abhi-color-surface: var(--abhi-gray-800);
    --abhi-color-surface-hover: var(--abhi-gray-750);
    --abhi-color-surface-sunken: var(--abhi-gray-900);
    --abhi-color-paper: var(--abhi-white);
    --abhi-color-on-paper: var(--abhi-graphite-700);
    --abhi-color-text: var(--abhi-gray-100-dark);
    --abhi-color-text-muted: var(--abhi-gray-400);
    --abhi-color-border: var(--abhi-gray-750);
    --abhi-color-border-strong: var(--abhi-gray-550);
    --abhi-color-link: var(--abhi-sky-300);
    --abhi-color-focus: var(--abhi-lime-500);
    --abhi-color-accent: var(--abhi-lime-500);
    --abhi-color-accent-hover: var(--abhi-lime-600);
    --abhi-color-on-accent: var(--abhi-graphite-700);
    --abhi-color-accent-subtle: var(--abhi-lime-950);
    --abhi-color-on-accent-subtle: var(--abhi-lime-500);
    --abhi-color-accent-border: var(--abhi-lime-500);
    --abhi-color-sky: var(--abhi-sky-300);
    --abhi-color-on-sky: var(--abhi-graphite-700);

    --abhi-color-success: var(--abhi-green-300);
    --abhi-color-success-subtle: var(--abhi-green-950);
    --abhi-color-on-success-subtle: var(--abhi-green-300);
    --abhi-color-danger: var(--abhi-red-300);
    --abhi-color-danger-subtle: var(--abhi-red-950);
    --abhi-color-on-danger-subtle: var(--abhi-red-300);
    --abhi-color-warning: var(--abhi-amber-300);
    --abhi-color-warning-border: var(--abhi-amber-500);
    --abhi-color-warning-subtle: var(--abhi-amber-950);
    --abhi-color-on-warning-subtle: var(--abhi-amber-300);
    --abhi-color-info: var(--abhi-sky-300);
    --abhi-color-info-border: var(--abhi-sky-300);
    --abhi-color-info-subtle: var(--abhi-sky-950);
    --abhi-color-on-info-subtle: var(--abhi-sky-300);
    --abhi-color-on-strong: var(--abhi-gray-850);

    --abhi-color-sidebar-bg: var(--abhi-gray-900);
    --abhi-color-sidebar-text: var(--abhi-gray-100-dark);
    --abhi-color-sidebar-text-muted: var(--abhi-gray-400);
    --abhi-color-sidebar-active-bg: var(--abhi-gray-750);
    --abhi-color-sidebar-active-text: var(--abhi-white);
    --abhi-color-sidebar-indicator: var(--abhi-lime-500);
    --abhi-color-sidebar-focus: var(--abhi-lime-500);

    --abhi-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --abhi-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.35);
    --abhi-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --abhi-color-backdrop: rgba(0, 0, 0, 0.6);
}

/* ---- Roles: tema oscuro siguiendo al sistema (mismos valores que el bloque anterior) ---- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --abhi-color-bg: var(--abhi-gray-850);
        --abhi-color-surface: var(--abhi-gray-800);
        --abhi-color-surface-hover: var(--abhi-gray-750);
        --abhi-color-surface-sunken: var(--abhi-gray-900);
        --abhi-color-paper: var(--abhi-white);
        --abhi-color-on-paper: var(--abhi-graphite-700);
        --abhi-color-text: var(--abhi-gray-100-dark);
        --abhi-color-text-muted: var(--abhi-gray-400);
        --abhi-color-border: var(--abhi-gray-750);
        --abhi-color-border-strong: var(--abhi-gray-550);
        --abhi-color-link: var(--abhi-sky-300);
        --abhi-color-focus: var(--abhi-lime-500);
        --abhi-color-accent: var(--abhi-lime-500);
        --abhi-color-accent-hover: var(--abhi-lime-600);
        --abhi-color-on-accent: var(--abhi-graphite-700);
        --abhi-color-accent-subtle: var(--abhi-lime-950);
        --abhi-color-on-accent-subtle: var(--abhi-lime-500);
        --abhi-color-accent-border: var(--abhi-lime-500);
        --abhi-color-sky: var(--abhi-sky-300);
        --abhi-color-on-sky: var(--abhi-graphite-700);

        --abhi-color-success: var(--abhi-green-300);
        --abhi-color-success-subtle: var(--abhi-green-950);
        --abhi-color-on-success-subtle: var(--abhi-green-300);
        --abhi-color-danger: var(--abhi-red-300);
        --abhi-color-danger-subtle: var(--abhi-red-950);
        --abhi-color-on-danger-subtle: var(--abhi-red-300);
        --abhi-color-warning: var(--abhi-amber-300);
        --abhi-color-warning-border: var(--abhi-amber-500);
        --abhi-color-warning-subtle: var(--abhi-amber-950);
        --abhi-color-on-warning-subtle: var(--abhi-amber-300);
        --abhi-color-info: var(--abhi-sky-300);
        --abhi-color-info-border: var(--abhi-sky-300);
        --abhi-color-info-subtle: var(--abhi-sky-950);
        --abhi-color-on-info-subtle: var(--abhi-sky-300);
        --abhi-color-on-strong: var(--abhi-gray-850);

        --abhi-color-sidebar-bg: var(--abhi-gray-900);
        --abhi-color-sidebar-text: var(--abhi-gray-100-dark);
        --abhi-color-sidebar-text-muted: var(--abhi-gray-400);
        --abhi-color-sidebar-active-bg: var(--abhi-gray-750);
        --abhi-color-sidebar-active-text: var(--abhi-white);
        --abhi-color-sidebar-indicator: var(--abhi-lime-500);
        --abhi-color-sidebar-focus: var(--abhi-lime-500);

        --abhi-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --abhi-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.35);
        --abhi-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
        --abhi-color-backdrop: rgba(0, 0, 0, 0.6);
    }
}