:root {
    /* =========================================================
       INTA - COLORES DE MARCA
       ========================================================= */

    --brand-navy: #04306F;
    --brand-sky: #2CA0DA;


    /* =========================================================
       INTA - TEMA CLARO
       ========================================================= */

    color-scheme: light;

    --bg: #eef0f4;

    --surface: #ffffff;
    --surface-2: #f8f9fb;
    --surface-sunken: #f2f3f6;
    --surface-hover: #edf1f5;

    --border: #e1e4ea;
    --border-strong: #cdd2db;

    --text: #1b1f27;
    --text-dim: #636b78;
    --text-faint: #98a0ab;

    --accent: #1C7FB8;
    --accent-strong: #0A5386;
    --accent-soft: #E8F4FB;
    --accent-contrast: #ffffff;

    --danger: #e34850;
    --danger-soft: #fdecec;
    --danger-strong: #c22630;

    --success: #1f9d63;
    --success-soft: #e7f6ef;
    --success-strong: #167849;


    /* =========================================================
       INTA - COMPATIBILIDAD TRANSITORIA

       Estos alias permiten que pantallas antiguas todavía no migradas
       al sistema actual de tokens funcionen correctamente en ambos temas.
       Deben desaparecer progresivamente al adaptar cada pantalla.
       ========================================================= */

    --surface-color: var(--surface);
    --surface-strong: var(--surface-2);
    --border-color: var(--border);

    --text-color: var(--text);
    --text-muted: var(--text-dim);

    --accent-color: var(--accent);
    --danger-color: var(--danger);

    --success-color: var(--success);
    --success-surface: var(--success-soft);

    --muted-surface: var(--surface-sunken);


    /* =========================================================
       INTA - FORMA
       ========================================================= */

    --radius-small: 5px;
    --radius-medium: 8px;
    --radius-large: 12px;


    /* =========================================================
       INTA - MOVIMIENTO
       ========================================================= */

    --motion-easing: cubic-bezier(.4, 0, .2, 1);

    --motion-micro: 150ms;
    --motion-short: 200ms;
    --motion-medium: 300ms;


    /* =========================================================
       INTA - TIPOGRAFÍA
       ========================================================= */

    --font-family:
        "Segoe UI",
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}


/* =========================================================
   INTA - TEMA OSCURO

   themeSystem.js aplica data-theme="dark" antes de cargar
   la interfaz, evitando que cada componente conozca el tema.
   ========================================================= */

html[data-theme="dark"] {
    color-scheme: dark;

    --bg: #0f141b;

    --surface: #171d26;
    --surface-2: #121821;
    --surface-sunken: #0c1118;
    --surface-hover: #202936;

    --border: #2b3441;
    --border-strong: #3d495a;

    --text: #eef3f8;
    --text-dim: #adb7c4;
    --text-faint: #748092;

    --accent: #48a9df;
    --accent-strong: #72c3ed;
    --accent-soft: #153247;
    --accent-contrast: #07131a;

    --danger: #ff737b;
    --danger-soft: #3b1d23;
    --danger-strong: #ff9298;

    --success: #4bc990;
    --success-soft: #153528;
    --success-strong: #73daa8;
}


/* =========================================================
   RESET GLOBAL
   ========================================================= */

html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    min-height: 100%;

    color: var(--text);
    background: var(--bg);

    font-family: var(--font-family);
}


/* Evita colores nativos inconsistentes entre claro y oscuro. */
body,
input,
select,
textarea,
button,
dialog {
    color-scheme: inherit;
}


*,
*::before,
*::after {
    box-sizing: border-box;
}


/* =========================================================
   SELECCIÓN
   ========================================================= */

::selection {
    color: var(--accent-contrast);
    background: var(--accent);
}


/* =========================================================
   SCROLLBAR GLOBAL

   Los componentes que necesiten una geometría específica pueden
   seguir definiendo su propio scrollbar de forma aislada.
   ========================================================= */

html {
    scrollbar-color: var(--border-strong) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-faint);
    border: 2px solid transparent;
    background-clip: padding-box;
}


/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}


@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0ms !important;
        animation-duration: 0ms !important;
    }
}