/* VARIABLES */
:root {
    --primary-color-900: #78350f;
    --primary-color-800: #92400e;
    --primary-color-700: #b45309;
    --primary-color-600: #d97706;
    --primary-color-500: #f59e0b;
    --primary-color-400: #fbbf24;
    --primary-color-300: #fcd34d;
    --primary-color-200: #fde68a;
    --primary-color-100: #fef3c7;
    --primary-color-50: #fffbeb;

    --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: #b45309;
    --nav-active-gradient-end: #d97706;

    --bg-sidebar-gradient-start: #000;
    --bg-sidebar-gradient-end: #1c1917;
    --bg-sidebar-fallback: var(--bg-sidebar-gradient-start);

    --bg-auth-gradient-start: #44403c;
    --bg-auth-gradient-end: #292524;
    --bg-auth-fallback: var(--bg-auth-gradient-start);

    --bg-main-gradient-start: #292524;
    --bg-main-gradient-end: #36322f;
    --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: #d6d3d1;
    --bg-box: #1c1917;
    --bg-box-light: #44403c;
    --border-main: #78716c;
    --divide-main: #57534e;
    --bg-input: #292524;
    --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: #d6d3d1;
    --dark-bg-box: #1c1917;
    --dark-bg-box-light: #44403c;
    --dark-border-main: #78716c;
    --dark-divide-main: #57534e;
    --dark-bg-input: #292524;
    --dark-bg-main-gradient-start: #292524;
    --dark-bg-main-gradient-end: #36322f;
    --dark-text-primary: var(--primary-color-500);
    --dark-text-primary-hover: var(--primary-color-600);
}