/* VARIABLES */
:root {
    --primary-color-900: #1e3a8a;
    --primary-color-800: #1e40af;
    --primary-color-700: #1d4ed8;
    --primary-color-600: #2563eb;
    --primary-color-500: #3b82f6;
    --primary-color-400: #60a5fa;
    --primary-color-300: #93c5fd;
    --primary-color-200: #bfdbfe;
    --primary-color-100: #dbeafe;
    --primary-color-50: #eff6ff;

    --primary-color: var(--primary-color-600);
    --primary-hover-color: var(--primary-color-700);

    --text-primary: var(--primary-color);
    --text-primary-hover: var(--primary-hover-color);

    --bg-primary: var(--primary-color);
    --bg-primary-hover: var(--primary-hover-color);

    --text-on-primary: #fff;

    --nav-active-gradient-start: rgba(32, 131, 249, 0.15);
    --nav-active-gradient-end: rgba(32, 131, 249, 0.5);

    --bg-sidebar-gradient-start: #0a1223;
    --bg-sidebar-gradient-end: #1B2335;
    --bg-sidebar-fallback: var(--bg-sidebar-gradient-start);

    --bg-auth-gradient-start: #0a1223;
    --bg-auth-gradient-end: #46a2ff;
    --bg-auth-fallback: var(--bg-auth-gradient-start);

    --bg-main-gradient-start: rgba(216,225,236,1);
    --bg-main-gradient-end: rgba(229,235,241,1);
    --bg-main-fallback: var(--bg-main-gradient-start);

    --popper-theme-background-color: #0f172a;
    --popper-theme-background-color-hover: #0f172a;
    --popper-theme-text-color: #ffffff;

    --success-color: #16a34a;
    --info-color: #3b82f6;
    --error-color: #dc2626;

    --text-copy-main: rgb(17 24 39);
    --text-copy-light: rgb(107 114 128);
    --bg-box: #fff;
    --bg-box-light: #f9fafb;
    --border-main: #d1d5db;
    --divide-main: #e5e7eb;
    --bg-input: #ffffff;
    --bg-selection: var(--primary-color-50);
    --text-selection: var(--primary-color-900);
}