/* === Custom AI Glossary Color Palette === */
:root {
	
--primary: #6a4f8a;	
  --orange:    #e87127;
  --orangetext:    #bc4c07;
  --navy:    #232e43;
  --navy2:   #4a6bad;
  --navy3:   #232e42;
  --purple:  #4b0082;
--dark-purple: #402c59;
  --slate:   #524b59;
  --brown:   #4b3d35;
  --ash:     #bfbfbf;
  --ash2:     #afafaf;
  --sand:    #8e7962;
  --dust:    #6f6355;
  --offwhite: #f3f3f3;
   --hovercolor:  #f1f1f1;
   --hovercolordark:  #1c2438;
	--dark: #403c46;
		 --bs-list-group-active-bg: #6a4f8a;
--bs-list-group-active-border-color: #6a4f8a;
--bs-btn-bg: #6a4f8a;
  --bs-btn-border-color: #6a4f8a;
  --bs-blue: #284077;
  --bs-indigo: #502189;
  --bs-purple: #472077;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #8AB839;
  --bs-teal: #3E6372;
  --bs-cyan: #0dcaf0;
  --bs-black: #2e2e2e;
  --bs-white: #fff;
  --bs-body-color: #4F4F4F;
  --bs-body-color-rgb: 77,77,77;
}
/* ,#3f4d61,,#140f1a,#e5dced,#CACBD0,#5c4065*/
body ::selection {
  color: #e87127;
  background-color: var(--primary);
}
/* === Backgrounds === */
.bg-primary     { background-color: var(--primary) !important; }
.bg-navy     { background-color: var(--navy) !important; }
.bg-orange     { background-color: var(--orange) !important; }
.bg-green     { background-color: var(--green) !important; }
.bg-navy2    { background-color: var(--navy2) !important; }
.bg-navy3    { background-color: var(--navy3) !important; }
.bg-purple   { background-color: var(--dark-purple) !important; }
.bg-slate    { background-color: var(--slate) !important; }
.bg-brown    { background-color: var(--brown) !important; }
.bg-ash      { background-color: var(--ash) !important; }
.bg-sand     { background-color: var(--sand) !important; }
.bg-dust     { background-color: var(--dust) !important; }
.bg-offwhite { background-color: var(--offwhite) !important; }

/* === Text Colors === */
.text-navy     { color: var(--navy) !important; }
.text-orange     { color: var(--orange) !important; }
.text-green     { color: var(--green) !important; }
.text-navy2    { color: var(--navy2) !important; }
.text-navy3    { color: var(--navy3) !important; }
.text-purple   { color: var(--purple) !important; }
.text-slate    { color: var(--slate) !important; }
.text-brown    { color: var(--brown) !important; }
.text-ash      { color: var(--ash) !important; }
.text-sand     { color: var(--sand) !important; }
.text-dust     { color: var(--dust) !important; }
.text-offwhite { color: var(--offwhite) !important; }

/* === Borders === */
.border-navy     { border-color: var(--navy) !important; }
.border-orange     { border-color: var(--orange) !important; }
.border-green    { border-color: var(--green) !important; }
.border-navy2    { border-color: var(--navy2) !important; }
.border-navy3    { border-color: var(--navy3) !important; }
.border-purple   { border-color: var(--purple) !important; }
.border-slate    { border-color: var(--slate) !important; }
.border-brown    { border-color: var(--brown) !important; }
.border-ash      { border-color: var(--ash) !important; }
.border-sand     { border-color: var(--sand) !important; }
.border-dust     { border-color: var(--dust) !important; }
.border-offwhite { border-color: var(--offwhite) !important; }

a { color: var(--navy2); }
/* === Buttons === */
.btn-primary {
  background-color: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color:  var(--purple);
  color: #fff;
  border-color:  var(--primary);
}
.btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--primary);
  color: #fff;
  border-color: var(--purple);
}
a.btn-primary {
  background-color: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
a.btn-primary:hover,
a.btn-primary:focus {
  background-color:  var(--purple);
  color: #fff;
  border-color:  var(--primary);
}
a.btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary);
}
a.btn-outline-primary:hover,
a.btn-outline-primary:focus {
  background-color: var(--primary);
  color: #fff;
  border-color: var(--purple);
}
/* orange */
.btn-orange {
  background-color: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
.btn-orange:hover,
.btn-orange:focus {
  background-color: var(--hovercolor);
  border-color:  var(--hovercolor);
  color: var(--orangetext);
}
.btn-outline-orange {
  color: var(--orange);
  border-color: var(--orange);
}
.btn-outline-orange:hover,
.btn-outline-orange:focus {
  background-color: var(--orange);
  color: #fff;
  border-color: var(--purple);
}

a.btn-orange {
  background-color: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
a.btn-orange:hover,
a.btn-orange:focus {
  background-color: var(--hovercolor);
  border-color:  var(--hovercolor);
  color: var(--orangetext);
}
a.btn-outline-orange {
  color: var(--orange);
  border-color: var(--orange);
}
a.btn-outline-orange:hover,
a.btn-outline-orange:focus {
  background-color: var(--orange);
  color: #fff;
  border-color: var(--purple);
}

/* Navy */
.btn-navy {
  background-color: var(--navy);
  color: #efefef;
  border-color: var(--navy);
}
.btn-navy:hover,
.btn-navy:focus {
  background-color: var(--hovercolor);
  border-color:  var(--hovercolor);
  color:  var(--orangetext);
}
.btn-outline-navy {
  color: var(--navy);
  border-color: var(--navy);
}
.btn-outline-navy:hover,
.btn-outline-navy:focus {
  background-color: var(--navy);
  color: #fff;
}

/* Repeat button styles for each color */
.btn-purple {
  background-color: var(--purple);
  color: #fff;
  border-color: var(--purple);
}
.btn-purple:hover,
.btn-purple:focus {
  background-color: #8f78a2;
  border-color: #8f78a2;
}
.btn-outline-purple {
  color: var(--purple);
  border-color: var(--purple);
}
.btn-outline-purple:hover,
.btn-outline-purple:focus {
  background-color: var(--purple);
  color: #fff;
}

.btn-slate {
  background-color: var(--slate);
  color: #efefef;
  border-color: var(--slate);
}
.btn-slate:hover,
.btn-slate:focus {
  background-color: var(--hovercolor);
  border-color:  var(--hovercolor);
  color:  var(--orangetext);
}
.btn-outline-slate {
  color: var(--slate);
  border-color: var(--slate);
}
.btn-outline-slate:hover,
.btn-outline-slate:focus {
  background-color: var(--slate);
  color: #fff;
}

/* === Navy2 === */
.btn-navy2 {
  background-color: var(--navy2);
  color: #fff;
  border-color: var(--navy2);
}
.btn-navy2:hover,
.btn-navy2:focus {
  background-color: var(--hovercolor);
  border-color:  var(--hovercolor);
  color:  var(--orangetext);
}
.btn-outline-navy2 {
  color: var(--navy2);
  border-color: var(--navy2);
}
.btn-outline-navy2:hover,
.btn-outline-navy2:focus {
  background-color: var(--navy2);
  color: #fff;
}

/* === Navy3 === */
.btn-navy3 {
  background-color: var(--navy3);
  color: #fff;
  border-color: var(--navy3);
}
.btn-navy3:hover,
.btn-navy3:focus {
  background-color: var(--hovercolor);
  border-color:  var(--hovercolor);
  color:  var(--orangetext);
}
.btn-outline-navy3 {
  color: var(--navy3);
  border-color: var(--navy3);
}
.btn-outline-navy3:hover,
.btn-outline-navy3:focus {
  background-color: var(--navy3);
  color: #fff;
}

/* === Brown === */
.btn-brown {
  background-color: var(--brown);
  color: #fff;
  border-color: var(--brown);
}
.btn-brown:hover,
.btn-brown:focus {
  background-color: var(--hovercolor);
  border-color:  var(--hovercolor);
  color:  var(--orangetext);
}
.btn-outline-brown {
  color: var(--brown);
  border-color: var(--brown);
}
.btn-outline-brown:hover,
.btn-outline-brown:focus {
  background-color: var(--brown);
  color: #fff;
}

/* === Ash === */
.btn-ash {
  background-color: var(--ash);
  color: #000;
  border-color: var(--ash);
}
.btn-ash:hover,
.btn-ash:focus {
  background-color: var(--hovercolor);
  border-color:  var(--hovercolor);
  color:  var(--orangetext);
}
.btn-outline-ash {
  color: var(--ash);
  border-color: var(--ash);
}
.btn-outline-ash:hover,
.btn-outline-ash:focus {
  background-color: var(--offwhite);
  color: #000;
}

/* === Sand === */
.btn-sand {
  background-color: var(--sand);
  color: #fff;
  border-color: var(--sand);
}
.btn-sand:hover,
.btn-sand:focus {
  background-color: #786654;
  border-color: #786654;
}
.btn-outline-sand {
  color: var(--sand);
  border-color: var(--sand);
}
.btn-outline-sand:hover,
.btn-outline-sand:focus {
  background-color: var(--sand);
  color: #fff;
}

/* === Dust === */
.btn-dust {
  background-color: var(--dust);
  color: #fff;
  border-color: var(--dust);
}
.btn-dust:hover,
.btn-dust:focus {
  background-color: #5c5146;
  border-color: #5c5146;
}
.btn-outline-dust {
  color: var(--dust);
  border-color: var(--dust);
}
.btn-outline-dust:hover,
.btn-outline-dust:focus {
  background-color: var(--dust);
  color: #fff;
}

/* === Offwhite === */
.btn-offwhite {
  background-color: var(--offwhite);
  color: #000;
  border-color: var(--offwhite);
}
.btn-offwhite:hover,
.btn-offwhite:focus {
  background-color: #e1e1e1;
  border-color: #e1e1e1;
}
.btn-outline-offwhite {
  color: #444;
  border-color: var(--offwhite);
}
.btn-outline-offwhite:hover,
.btn-outline-offwhite:focus {
  background-color: var(--offwhite);
  color: #000;
}
/* ===== Fonts ===*/

.cabin {
  font-family: "Cabin", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.cabin-narrow {
  font-family: "Cabin", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 75;
}
.cabin-bold {
  font-family: "Cabin", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.cabin-bolder {
  font-family: "Cabin", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
/* ===== Custom Scrollbar: purple space theme ===== */
:root{
  /* tweak these to match your bottom bar color */
  --scrollbar-bg: #f8f8f8;          /* track */
  --scrollbar-thumb: #8460ad;        /* thumb */
  --scrollbar-thumb-hover: #6a4f8a;  /* thumb on hover */
  --scrollbar-corner: #6a4f8a;
  --scrollbar-size: 12px;            /* thickness of both axes */
}

/* Always reserve room for vertical scrollbar to avoid layout shift */
html{ scrollbar-gutter: stable both-edges; }

/* ---------- WebKit (Chrome, Edge, Safari) ---------- */
*::-webkit-scrollbar{
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}
*::-webkit-scrollbar-track{
  background: var(--scrollbar-bg);
}
*::-webkit-scrollbar-thumb{
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 3px solid var(--scrollbar-bg); /* creates “pill” thumb */
}
*::-webkit-scrollbar-thumb:hover{
  background: var(--scrollbar-thumb-hover);
}
*::-webkit-scrollbar-corner{
  background: var(--scrollbar-corner);
}

/* ---------- Firefox ---------- */
*{
  scrollbar-width: auto; /* auto | thin | none */
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
}

/* ---------- Optional: target just a container ---------- */
/* Give any element a custom scrollbar without affecting the whole page */
.scroll-purple{
  overflow: auto;              /* or overflow-y: auto */
  scrollbar-gutter: stable;
}
.scroll-purple::-webkit-scrollbar{ width: var(--scrollbar-size); height: var(--scrollbar-size); }
.scroll-purple::-webkit-scrollbar-track{ background: var(--scrollbar-bg); }
.scroll-purple::-webkit-scrollbar-thumb{ background: var(--scrollbar-thumb); border-radius: 999px; border: 3px solid var(--scrollbar-bg); }
.scroll-purple::-webkit-scrollbar-thumb:hover{ background: var(--scrollbar-thumb-hover); }
.scroll-purple::-webkit-scrollbar-corner{ background: var(--scrollbar-corner); }
.scroll-purple{ scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg); }