:root{

    /* Backgrounds */
    --bg:#071225;
    --topbar:#01091f;
    --sidebar:#0d162d;

    --surface:#121d36;
    --surface-hover:#172542;

    /* Brand */
    --primary:#3b82f6;
    --primary-hover:#2563eb;
    --primary-rgb:59,130,246;

    /* Status */
    --success:#22c55e;
    --success-text:#bbf7d0;
    --warning:#f59e0b;
    --danger:#ef4444;

    /* Text */
    --text:#ffffff;
    --text-muted:#94a3b8;

    /* Borders */
    --border:rgba(255,255,255,.06);
    --calendar-border:rgba(255,255,255,.07);
    --calendar-header:rgba(18,29,54,.98);
    --soft-hover:rgba(255,255,255,.05);
    --scrollbar-track:transparent;
    --scrollbar-thumb:#1f2c4b;
    --scrollbar-thumb-hover:#30426b;

    /* Radius */
    --radius-xs:8px;
    --radius-sm:12px;
    --radius-md:16px;
    --radius-lg:20px;
    --radius-xl:24px;

    /* Shadows */
    --shadow-sm:
        0 4px 12px rgba(0,0,0,.15);

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

    --shadow-primary:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 10px 24px rgba(var(--primary-rgb), .22);

    --shadow-primary-hover:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 14px 32px rgba(var(--primary-rgb), .30);

    /* Sizes */
    --topbar-height:78px;
    /* --sidebar-width:250px; */

    /* Animation */
    --transition:.25s ease;

}

:root[data-theme="light"]{

    --bg:#eef3fb;
    --topbar:#ffffff;
    --sidebar:#f8fbff;

    --surface:#ffffff;
    --surface-hover:#f1f6ff;

    --text:#0f172a;
    --text-muted:#64748b;
    --success-text:#166534;

    --border:rgba(15,23,42,.09);
    --calendar-border:rgba(15,23,42,.12);
    --calendar-header:#f8fbff;
    --soft-hover:rgba(15,23,42,.045);
    --scrollbar-thumb:rgba(100,116,139,.46);
    --scrollbar-thumb-hover:rgba(71,85,105,.68);

    --shadow-sm:
        0 4px 12px rgba(15,23,42,.08);

    --shadow:
        0 18px 45px rgba(15,23,42,.13);

}

:root[data-color-theme="emerald"]{

    --primary:#10b981;
    --primary-hover:#059669;
    --primary-rgb:16,185,129;

}

:root[data-color-theme="violet"]{

    --primary:#8b5cf6;
    --primary-hover:#7c3aed;
    --primary-rgb:139,92,246;

}

:root[data-color-theme="amber"]{

    --primary:#f59e0b;
    --primary-hover:#d97706;
    --primary-rgb:245,158,11;

}