/* VARIABLES */
:root {
    --primary-color-900: #0a313e;
    --primary-color-800: #155e75;
    --primary-color-700: #0e7490;
    --primary-color-600: #0891b2;
    --primary-color-500: #06b6d4;
    --primary-color-400: #22d3ee;
    --primary-color-300: #67e8f9;
    --primary-color-200: #a5f3fc;
    --primary-color-100: #cffafe;
    --primary-color-50: #ecfeff;

    --primary-color: var(--primary-color-500);
    --primary-hover-color: var(--primary-color-400);

    /* a shade darker than the button color: links and labels read at 4.5:1 on white */
    --text-primary: var(--primary-color-700);
    --text-primary-hover: var(--primary-color-800);

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

    --text-on-primary: #fff;

    --nav-active-gradient-start: rgba(40, 147, 204, 0.7);
    --nav-active-gradient-end: rgba(101, 184, 194, 0.76);

    --bg-sidebar-gradient-start: #0e7490;
    --bg-sidebar-gradient-end: #105064;
    --bg-sidebar-fallback: var(--bg-sidebar-gradient-start);

    --bg-auth-gradient-start: #0a333d;
    --bg-auth-gradient-end: #000;
    --bg-auth-fallback: var(--bg-auth-gradient-start);

    --bg-main-gradient-start: rgb(226, 236, 241);
    --bg-main-gradient-end: rgb(233, 240, 243);
    --bg-main-fallback: var(--bg-main-gradient-start);

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

    --success-color: #0dd0b3;
    --info-color: #0e7490;
    --error-color: #dc2626;
    --warning-color: #d97706;

    --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);
}