/* ==========================================================
   HSI CONTROL CENTER
   Design System Variables
   ========================================================== */

:root {

    /* ======================================================
       BRAND
       ====================================================== */

    --primary: #7CB300;
    --primary-hover: #689F38;
    --primary-light: #E8F5E9;

    --navy: #1E3A5F;
    --navy-dark: #162A45;

    --success: #16A34A;
    --warning: #F59E0B;
    --danger: #DC2626;
    --info: #0EA5E9;

    /* ======================================================
       LIGHT MODE
       ====================================================== */

    --bg: #F5F7FA;
    --surface: #FFFFFF;
    --surface-hover: #F8FAFC;

    --text: #1F2937;
    --text-muted: #6B7280;

    --border: #E5E7EB;

    /* ======================================================
       SIDEBAR
       ====================================================== */

    --sidebar-bg: var(--navy);
    --sidebar-hover: rgba(255,255,255,.08);
    --sidebar-active: var(--primary);

    --sidebar-text: rgba(255,255,255,.85);
    --sidebar-text-active: #FFFFFF;

    /* ======================================================
       TOPBAR
       ====================================================== */

    --topbar-bg: #FFFFFF;

    /* ======================================================
       SHADOW
       ====================================================== */

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

    --shadow:
        0 2px 6px rgba(0,0,0,.05),
        0 8px 24px rgba(0,0,0,.04);

    --shadow-lg:
        0 10px 40px rgba(0,0,0,.08);

    /* ======================================================
       RADIUS
       ====================================================== */

    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;

    /* ======================================================
       SPACING
       ====================================================== */

    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;

    /* ======================================================
       COMPONENT SIZE
       ====================================================== */

    --sidebar-width: 220px;
    --sidebar-collapse: 68px;

    --topbar-height: 60px;

    --input-height: 40px;
    --button-height: 38px;

    --table-row-height: 40px;

    --transition: .20s ease;
}

/* ==========================================================
   DARK MODE
   ========================================================== */

[data-theme="dark"]{

    --bg:#0F172A;

    --surface:#1E293B;
    --surface-hover:#273449;

    --text:#F8FAFC;
    --text-muted:#94A3B8;

    --border:#334155;

    --sidebar-bg:#0B1220;
    --sidebar-hover:rgba(255,255,255,.06);

    --topbar-bg:#1E293B;

    --shadow-sm:none;
    --shadow:none;
    --shadow-lg:none;

}


/* ======================================================
   BUTTON DEFAULT
   ====================================================== */

--btn-bg: var(--primary);
--btn-color: #FFFFFF;
--btn-border: var(--primary);

--btn-hover-bg: var(--primary-hover);
--btn-hover-color: #FFFFFF;
--btn-hover-border: var(--primary-hover);