/* VARIABLES */
:root {
    --primary-color-900: #064e3b;
    --primary-color-800: #065f46;
    --primary-color-700: #047857;
    --primary-color-600: #059669;
    --primary-color-500: #10b981;
    --primary-color-400: #34d399;
    --primary-color-300: #6ee7b7;
    --primary-color-200: #a7f3d0;
    --primary-color-100: #d1fae5;
    --primary-color-50: #ecfdf5;

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

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

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

    --text-on-primary: #fff;

    --nav-active-gradient-start: #065f46;
    --nav-active-gradient-end: #059669;

    --bg-sidebar-gradient-start: #0f172a;
    --bg-sidebar-gradient-end: #1e293b;
    --bg-sidebar-fallback: var(--bg-sidebar-gradient-start);

    --bg-auth-gradient-start: #334155;
    --bg-auth-gradient-end: #1e293b;
    --bg-auth-fallback: var(--bg-auth-gradient-start);

    --bg-main-gradient-start: #0f232a;
    --bg-main-gradient-end: #334155;
    --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;
    --warning-color: #d97706;

    --text-copy-main: #fff;
    --text-copy-light: #cbd5e1;
    --bg-box: #0f172a;
    --bg-box-light: #1e293b;
    --border-main: #64748b;
    --divide-main: #475569;
    --bg-input: #475569;
    --bg-selection: var(--primary-color-900);
    --text-selection: var(--primary-color-100);

    /* a dark theme: the dark mode token swap in base.css keeps these values */
    --dark-text-copy-main: #fff;
    --dark-text-copy-light: #cbd5e1;
    --dark-bg-box: #0f172a;
    --dark-bg-box-light: #1e293b;
    --dark-border-main: #64748b;
    --dark-divide-main: #475569;
    --dark-bg-input: #475569;
    --dark-bg-main-gradient-start: #0f232a;
    --dark-bg-main-gradient-end: #334155;
    --dark-text-primary: var(--primary-color-500);
    --dark-text-primary-hover: var(--primary-color-600);
}