/* Light mode color theme */
:root {
    --text-50: #f1eff6;
    --text-100: #e2deed;
    --text-200: #c5bddb;
    --text-300: #a89cc9;
    --text-400: #8b7bb7;
    --text-500: #6e5ba4;
    --text-600: #584884;
    --text-700: #423663;
    --text-800: #2c2442;
    --text-900: #161221;
    --text-950: #0b0910;
  
    --background-50: #ebebfa;
    --background-100: #d6d6f5;
    --background-200: #adadeb;
    --background-300: #8585e0;
    --background-400: #5c5cd6;
    --background-500: #3333cc;
    --background-600: #2929a3;
    --background-700: #1f1f7a;
    --background-800: #141452;
    --background-900: #0a0a29;
    --background-950: #050514;
  
    --primary-50: #e9f3fc;
    --primary-100: #d3e7f8;
    --primary-200: #a7d0f1;
    --primary-300: #7bb8ea;
    --primary-400: #4fa0e3;
    --primary-500: #2289dd;
    --primary-600: #1c6db0;
    --primary-700: #155284;
    --primary-800: #0e3758;
    --primary-900: #071b2c;
    --primary-950: #030e16;
  
    --secondary-50: #ebf2f9;
    --secondary-100: #d8e5f3;
    --secondary-200: #b0cae8;
    --secondary-300: #89b0dc;
    --secondary-400: #6295d0;
    --secondary-500: #3b7bc4;
    --secondary-600: #2f629d;
    --secondary-700: #234a76;
    --secondary-800: #17314f;
    --secondary-900: #0c1927;
    --secondary-950: #060c14;
  
    --accent-50: #eff2f5;
    --accent-100: #e0e5eb;
    --accent-200: #c0cbd8;
    --accent-300: #a1b1c4;
    --accent-400: #8297b0;
    --accent-500: #627e9d;
    --accent-600: #4f647d;
    --accent-700: #3b4b5e;
    --accent-800: #27323f;
    --accent-900: #14191f;
    --accent-950: #0a0d10;

    --text: #161221;
    --background: #fbfbfe;
    --primary: #124773;
    --secondary: #0d1b2b;
    --accent: #758da9;
   
    --btn-primary: var(--primary-400);
    --btn-primary-hover: var(--primary-500);
    --btn-primary-active: var(--primary-500);

    --highlight: rgba(255, 255, 0, 0.3);
}
/* Dark mode color theme */
.dark-mode {
    --text-50: #0b0910;
    --text-100: #161221;
    --text-200: #2c2442;
    --text-300: #423663;
    --text-400: #584884;
    --text-500: #6e5ba4;
    --text-600: #8b7bb7;
    --text-700: #a89cc9;
    --text-800: #c5bddb;
    --text-900: #e2deed;
    --text-950: #f1eff6;

    --background-50: #141a22;
    --background-100: #121821;
    --background-200: #253041;
    --background-300: #374862;
    --background-400: #496083;
    --background-500: #5c78a3;
    --background-600: #7c93b6;
    --background-700: #9daec8;
    --background-800: #bec9da;
    --background-900: #dee4ed;
    --background-950: #eff2f6;
  
    --primary-50: #030e16;
    --primary-100: #071b2c;
    --primary-200: #0e3758;
    --primary-300: #155284;
    --primary-400: #1c6db0;
    --primary-500: #2289dd;
    --primary-600: #4fa0e3;
    --primary-700: #7bb8ea;
    --primary-800: #a7d0f1;
    --primary-900: #d3e7f8;
    --primary-950: #e9f3fc;
  
    --secondary-50: #060c14;
    --secondary-100: #0c1927;
    --secondary-200: #17314f;
    --secondary-300: #234a76;
    --secondary-400: #2f629d;
    --secondary-500: #3b7bc4;
    --secondary-600: #6295d0;
    --secondary-700: #89b0dc;
    --secondary-800: #b0cae8;
    --secondary-900: #d8e5f3;
    --secondary-950: #ebf2f9;
  
    --accent-50: #0a0d10;
    --accent-100: #14191f;
    --accent-200: #27323f;
    --accent-200: #27323f;
    --accent-300: #3b4b5e;
    --accent-400: #4f647d;
    --accent-500: #627e9d;
    --accent-600: #8297b0;
    --accent-700: #a1b1c4;
    --accent-800: #c0cbd8;
    --accent-900: #e0e5eb;
    --accent-950: #eff2f5;
  
    --text: #e2deed;
    --background: #0d1117;
    --primary: #8cc2ed;
    --secondary: #d4e2f2;
    --accent: #566e8a;

    --btn-primary: var(--primary-400);
    --btn-primary-hover: var(--primary-300);
    --btn-primary-active: var(--primary-300);
}

body {
    background-color: var(--background);
    color: var(--text);
}

textarea {
    color: var(--text) !important;
    background-color: var(--background-50) !important;
    border: none !important;
}

textarea::placeholder {
    color: gray !important;
}

.textarea-container {
    position: relative;
    width: 100%;
    padding-left: 0rem;
    padding-right: 0rem;
}

.form-control {
  width: 100%;
  scrollbar-width: none;
}

.hidden {
    display: none;
}

/* Ensure all buttons are visible when tabbed over for accessibility */
button:focus-visible,
a:focus-visible {
    outline: 2px solid #007bff !important;
    outline-offset: 3px;
}

#dark-mode-toggle:not(:disabled):not(.disabled):active {
    border-color: transparent;
}

#dark-mode-toggle {
    color: var(--text);
}


.btn-primary {
    background-color: var(--btn-primary);
    border-color: var(--btn-primary);
}
.btn-primary:hover {
    background-color: var(--btn-primary-hover);
    border-color: var(--btn-primary-hover);
}

/* Replace bootstrap default button color with a color from our color theme */
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--btn-primary-active);
    border-color: var(--btn-primary-active);
}

#copyButtonIcon {
    color: var(--text);
}

.copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: var(--accent-200)!important;
    border: 1px solid var(--border, #ced4da);
    padding: 0.1rem 0.3rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
    z-index: 10;
    opacity: 0.9;
}
  
.copy-btn:hover {
    background-color: var(--hover, #f8f9fa);
}

/* Navbar stuff */
nav {
    background-color: var(--background);
}

.navbar-brand {
    color: var(--text);
}

.navbar-nav .nav-link.active {
    color: var(--text);
}

.navbar-nav .nav-link {
    color: gray;
}