/* ======================================================
   EMPLEO IA DESIGN SYSTEM v0.6
====================================================== */

:root{

    /* ==================================================
       COLORES
    ================================================== */

    --primary:#2563eb;
    --primary-hover:#1d4ed8;

    --background:#f5f7fb;
    --surface:#ffffff;

    --text:#1f2937;
    --text-light:#6b7280;

    --border:#e5e7eb;

    --success:#16a34a;
    --warning:#f59e0b;
    --danger:#dc2626;

    /* ==================================================
       TIPOGRAFÍA
    ================================================== */

    --font-family:
        "Segoe UI",
        Inter,
        Arial,
        sans-serif;

    --font-xs:12px;
    --font-sm:14px;
    --font-md:16px;
    --font-lg:18px;
    --font-xl:22px;
    --font-2xl:32px;
    --font-3xl:46px;

    /* ==================================================
       ESPACIADOS
    ================================================== */

    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:24px;
    --space-6:32px;
    --space-7:48px;
    --space-8:64px;

    /* ==================================================
       BORDES
    ================================================== */

    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:18px;
    --radius-xl:24px;

    /* ==================================================
       SOMBRAS
    ================================================== */

    --shadow-sm:
        0 2px 6px rgba(0,0,0,.05);

    --shadow-md:
        0 10px 25px rgba(0,0,0,.08);

    --shadow-lg:
        0 18px 45px rgba(0,0,0,.12);

    /* ==================================================
       CONTENEDORES
    ================================================== */

    --container:1400px;

    /* ==================================================
       TRANSICIONES
    ================================================== */

    --transition:.25s ease;

}