h1, h2{
    font-family: "Bree Serif", serif;
    font-weight: 400;
    font-style: normal;
}

body{
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.bree-serif-regular {
    font-family: "Bree Serif", serif;
    font-weight: 400;
    font-style: normal;
}
  
/*
<uniquifier>: Use a unique and descriptive class name
<weight>: Use a value from 100 to 700
*/

.roboto-mono{
    font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.roboto-thin {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.roboto-light {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.roboto-medium {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.roboto-black {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.roboto-thin-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: italic;
}

.roboto-light-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.roboto-regular-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.roboto-medium-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: italic;
}

.roboto-bold-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.roboto-black-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: italic;
}

/* ------- DUSTY NOTEBOOK — FULL CSS ------ */
/* Clean. Warm. Cozy. Editorial. */

:root {
  /* --------------------------
     SOFT / LIGHT NEUTRALS
  --------------------------- */
  --paper:        #F2EEEB;

  --fawn:         #FBB996;
  --sienna:       #E28361;
  --terracotta:   #C1674E;
  --mahogany:     #9B4C3F;
  --rustica:      #8d4238;
  
  /* --------------------------
     EARTHY DARK TONES
  --------------------------- */
  --hazel:        #C2885E;
  --oak:          #8c5b3f;
  --chestnut:     #733119;
  --mocha:        #401d10;
  --cinder:       #260e09;
  
  /* --------------------------
     PRIMARY AUTUMN ACCENTS
  --------------------------- */
  --flare:        #f2b705;
  --spice:        #f29f05;
  --rust:         #f27405;
  --ash:          #BF3604;

  /* --------------------------
     NEW RED TONES
  --------------------------- */
  --rose:         #BF4949;
  --brick:        #8C2020;
  --blood:        #400101;

  /* --------------------------
     NATURAL GREEN ACCENTS
  --------------------------- */
  --sage:         #7D9970;
  --moss:         #5f734c;
  --fern:         #445B3E;
  --pine:         #2C3832;
 
  /* --------------------------
     TEAL ACCENTS
  --------------------------- */
  --abyss:        #025159;
  --emerald:      #025959;
  --jungle:       #067373;
  --ocean:        #168C8C;
  --cypress:      #4B7C74;
}

/* ------------------------------------------
   BACKGROUND COLORS — BOOTSTRAP STYLE
------------------------------------------- */

/* Soft / Light Neutrals */
.bg-paper        { background-color: var(--paper) !important; }

/* Warm Neutrals */
.bg-fawn         { background-color: var(--fawn) !important; }
.bg-sienna       { background-color: var(--sienna) !important; }
.bg-terracotta   { background-color: var(--terracotta) !important; }
.bg-mahogany     { background-color: var(--mahogany) !important; }
.bg-rustica      { background-color: var(--rustica) !important; }

/* Earthy Dark Tones */
.bg-hazel        { background-color: var(--hazel) !important; }
.bg-oak          { background-color: var(--oak) !important; }
.bg-chestnut     { background-color: var(--chestnut) !important; }
.bg-mocha        { background-color: var(--mocha) !important; }
.bg-cinder       { background-color: var(--cinder) !important; }

/* Primary Autumn Accents */
.bg-flare        { background-color: var(--flare) !important; }
.bg-spice        { background-color: var(--spice) !important; }
.bg-rust         { background-color: var(--rust) !important; }
.bg-ash          { background-color: var(--ash) !important; }

/* Red Tones */
.bg-rose         { background-color: var(--rose) !important; }
.bg-brick        { background-color: var(--brick) !important; }
.bg-blood        { background-color: var(--blood) !important; }

/* Greens */
.bg-sage         { background-color: var(--sage) !important; }
.bg-moss         { background-color: var(--moss) !important; }
.bg-fern         { background-color: var(--fern) !important; }
.bg-pine         { background-color: var(--pine) !important; }

/* Teal Accents */
.bg-abyss        { background-color: var(--abyss) !important; }
.bg-emerald      { background-color: var(--emerald) !important; }
.bg-jungle       { background-color: var(--jungle) !important; }
.bg-ocean        { background-color: var(--ocean) !important; }
.bg-cypress      { background-color: var(--cypress) !important; }

/* ------------------------------------------
   TEXT COLORS — BOOTSTRAP STYLE
------------------------------------------- */

/* Soft / Light Neutrals */
.text-paper      { color: var(--paper) !important; }

/* Warm Neutrals */
.text-fawn       { color: var(--fawn) !important; }
.text-sienna     { color: var(--sienna) !important; }
.text-terracotta { color: var(--terracotta) !important; }
.text-mahogany   { color: var(--mahogany) !important; }
.text-rustica    { color: var(--rustica) !important; }

/* Earthy Dark Tones */
.text-hazel      { color: var(--hazel) !important; }
.text-oak        { color: var(--oak) !important; }
.text-chestnut   { color: var(--chestnut) !important; }
.text-mocha      { color: var(--mocha) !important; }
.text-cinder     { color: var(--cinder) !important; }

/* Primary Autumn Accents */
.text-flare      { color: var(--flare) !important; }
.text-spice      { color: var(--spice) !important; }
.text-rust       { color: var(--rust) !important; }
.text-ash        { color: var(--ash) !important; }

/* Red Tones */
.text-rose       { color: var(--rose) !important; }
.text-brick      { color: var(--brick) !important; }
.text-blood      { color: var(--blood) !important; }

/* Greens */
.text-sage       { color: var(--sage) !important; }
.text-moss       { color: var(--moss) !important; }
.text-fern       { color: var(--fern) !important; }
.text-pine       { color: var(--pine) !important; }

/* Teal Accents */
.text-abyss      { color: var(--abyss) !important; }
.text-emerald    { color: var(--emerald) !important; }
.text-jungle     { color: var(--jungle) !important; }
.text-ocean      { color: var(--ocean) !important; }
.text-cypress    { color: var(--cypress) !important; }

/* ------------------------------------------
   BORDER COLORS — BOOTSTRAP STYLE
------------------------------------------- */

/* Soft / Light Neutrals */
.border-paper        { border-color: var(--paper) !important; }

/* Warm Neutrals */
.border-fawn         { border-color: var(--fawn) !important; }
.border-sienna       { border-color: var(--sienna) !important; }
.border-terracotta   { border-color: var(--terracotta) !important; }
.border-mahogany     { border-color: var(--mahogany) !important; }
.border-rustica      { border-color: var(--rustica) !important; }

/* Earthy Dark Tones */
.border-hazel        { border-color: var(--hazel) !important; }
.border-oak          { border-color: var(--oak) !important; }
.border-chestnut     { border-color: var(--chestnut) !important; }
.border-mocha        { border-color: var(--mocha) !important; }
.border-cinder       { border-color: var(--cinder) !important; }

/* Primary Autumn Accents */
.border-flare        { border-color: var(--flare) !important; }
.border-spice        { border-color: var(--spice) !important; }
.border-rust         { border-color: var(--rust) !important; }
.border-ash          { border-color: var(--ash) !important; }

/* Red Tones */
.border-rose         { border-color: var(--rose) !important; }
.border-brick        { border-color: var(--brick) !important; }
.border-blood        { border-color: var(--blood) !important; }

/* Greens */
.border-sage         { border-color: var(--sage) !important; }
.border-moss         { border-color: var(--moss) !important; }
.border-fern         { border-color: var(--fern) !important; }
.border-pine         { border-color: var(--pine) !important; }

/* Teal Accents */
.border-abyss        { border-color: var(--abyss) !important; }
.border-emerald      { border-color: var(--emerald) !important; }
.border-jungle       { border-color: var(--jungle) !important; }
.border-ocean        { border-color: var(--ocean) !important; }
.border-cypress      { border-color: var(--cypress) !important; }

/* ============================================
   LINK COLOR UTILITIES — NO UNDERLINE
   Hover / Focus / Active Included
=============================================== */

/* Reset underline for all custom link classes */
[class^="link-"],
[class*=" link-"] {
  text-decoration: none !important;
}

/* --------------------------
   LIGHT NEUTRALS
--------------------------- */
.link-paper    { color: var(--paper); }
.link-paper:hover,
.link-paper:focus { color: var(--fawn); }
.link-paper:active { color: var(--sienna); }

.link-fawn     { color: var(--fawn); }
.link-fawn:hover,
.link-fawn:focus { color: var(--sienna); }
.link-fawn:active { color: var(--terracotta); }

.link-sienna   { color: var(--sienna); }
.link-sienna:hover,
.link-sienna:focus { color: var(--terracotta); }
.link-sienna:active { color: var(--mahogany); }

.link-terracotta { color: var(--terracotta); }
.link-terracotta:hover,
.link-terracotta:focus { color: var(--mahogany); }
.link-terracotta:active { color: var(--rustica); }

.link-mahogany { color: var(--mahogany); }
.link-mahogany:hover,
.link-mahogany:focus { color: var(--rustica); }
.link-mahogany:active { color: var(--oak); }

.link-rustica  { color: var(--rustica); }
.link-rustica:hover,
.link-rustica:focus { color: var(--oak); }
.link-rustica:active { color: var(--hazel); }


/* --------------------------
   EARTHY DARK TONES
--------------------------- */
.link-hazel    { color: var(--hazel); }
.link-hazel:hover,
.link-hazel:focus { color: var(--oak); }
.link-hazel:active { color: var(--chestnut); }

.link-oak      { color: var(--oak); }
.link-oak:hover,
.link-oak:focus { color: var(--chestnut); }
.link-oak:active { color: var(--mocha); }

.link-chestnut { color: var(--chestnut); }
.link-chestnut:hover,
.link-chestnut:focus { color: var(--oak); }
.link-chestnut:active { color: var(--oak); }

.link-mocha    { color: var(--mocha); }
.link-mocha:hover,
.link-mocha:focus { color: var(--cinder); }
.link-mocha:active { color: var(--chestnut); }

.link-cinder   { color: var(--cinder); }
.link-cinder:hover,
.link-cinder:focus { color: var(--mocha); }
.link-cinder:active { color: var(--oak); }


/* --------------------------
   PRIMARY AUTUMN ACCENTS
--------------------------- */
.link-flare    { color: var(--flare); }
.link-flare:hover,
.link-flare:focus { color: var(--spice); }
.link-flare:active { color: var(--rust); }

.link-spice    { color: var(--spice); }
.link-spice:hover,
.link-spice:focus { color: var(--rust); }
.link-spice:active { color: var(--ash); }

.link-rust     { color: var(--rust); }
.link-rust:hover,
.link-rust:focus { color: var(--ash); }
.link-rust:active { color: var(--brick); }

.link-ash      { color: var(--ash); }
.link-ash:hover,
.link-ash:focus { color: var(--brick); }
.link-ash:active { color: var(--blood); }


/* --------------------------
   NEW RED TONES
--------------------------- */
.link-rose     { color: var(--rose); }
.link-rose:hover,
.link-rose:focus { color: var(--brick); }
.link-rose:active { color: var(--blood); }

.link-brick    { color: var(--brick); }
.link-brick:hover,
.link-brick:focus { color: var(--blood); }
.link-brick:active { color: var(--rose); }

.link-blood    { color: var(--blood); }
.link-blood:hover,
.link-blood:focus { color: var(--brick); }
.link-blood:active { color: var(--rose); }


/* --------------------------
   NATURAL GREEN ACCENTS
--------------------------- */
.link-sage     { color: var(--sage); }
.link-sage:hover,
.link-sage:focus { color: var(--moss); }
.link-sage:active { color: var(--fern); }

.link-moss     { color: var(--moss); }
.link-moss:hover,
.link-moss:focus { color: var(--fern); }
.link-moss:active { color: var(--pine); }

.link-fern     { color: var(--fern); }
.link-fern:hover,
.link-fern:focus { color: var(--pine); }
.link-fern:active { color: var(--moss); }

.link-pine     { color: var(--pine); }
.link-pine:hover,
.link-pine:focus { color: var(--fern); }
.link-pine:active { color: var(--sage); }


/* --------------------------
   TEAL ACCENTS
--------------------------- */
.link-abyss    { color: var(--abyss); }
.link-abyss:hover,
.link-abyss:focus { color: var(--emerald); }
.link-abyss:active { color: var(--jungle); }

.link-emerald  { color: var(--emerald); }
.link-emerald:hover,
.link-emerald:focus { color: var(--jungle); }
.link-emerald:active { color: var(--ocean); }

.link-jungle   { color: var(--jungle); }
.link-jungle:hover,
.link-jungle:focus { color: var(--ocean); }
.link-jungle:active { color: var(--cypress); }

.link-ocean    { color: var(--ocean); }
.link-ocean:hover,
.link-ocean:focus { color: var(--cypress); }
.link-ocean:active { color: var(--abyss); }

.link-cypress  { color: var(--cypress); }
.link-cypress:hover,
.link-cypress:focus { color: var(--ocean); }
.link-cypress:active { color: var(--emerald); }

/* --------------------------
   CUSTOM ACTIVE NAV LINK COLORS
--------------------------- */

.nav-link.active {
    color: var(--fawn) !important; /* change --flare to any color you want */
}

/* optional: also keep hover/focus consistent */
.nav-link.active:hover,
.nav-link.active:focus {
    color: var(--sienna) !important; /* subtle shift on hover/focus */
}
/* --------------------------
   Dusty Notebook Custom Buttons
--------------------------- */

.btn {
  color: var(--paper);
  text-decoration: none;
  border: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-fawn { color: var(--paper); background-color: var(--fawn); }
.btn-fawn:hover, .btn-fawn:focus { color: var(--fawn); background-color: var(--sienna); }
.btn-fawn:active { color: var(--fawn)!important; background-color: var(--terracotta) !important; }

.btn-sienna { color: var(--paper); background-color: var(--sienna); }
.btn-sienna:hover, .btn-sienna:focus { color: var(--sienna); background-color: var(--terracotta); }
.btn-sienna:active { color: var(--sienna)!important; background-color: var(--mahogany) !important; }

.btn-terracotta { color: var(--paper); background-color: var(--terracotta); }
.btn-terracotta:hover, .btn-terracotta:focus { color: var(--fawn); background-color: var(--mahogany); }
.btn-terracotta:active { color: var(--fawn)!important; background-color: var(--rustica) !important; }


.btn-hazel { color: var(--paper); background-color: var(--hazel); }
.btn-hazel:hover, .btn-hazel:focus { color: var(--hazel); background-color: var(--oak); }
.btn-hazel:active { color: var(--hazel) !important; background-color: var(--oak) !important; }


.btn-chestnut { color: var(--paper); background-color: var(--chestnut); }
.btn-chestnut:hover, .btn-chestnut:focus { color: var(--hazel); background-color: var(--mocha); }
.btn-chestnut:active { color: var(--hazel) !important; background-color: var(--cinder) !important; }


.btn-flare { color: var(--paper); background-color: var(--flare); }
.btn-flare:hover, .btn-flare:focus { color: var(--paper); background-color: var(--spice); }
.btn-flare:active { color: var(--flare) !important; background-color: var(--rust) !important; }

.btn-spice { color: var(--paper); background-color: var(--spice); }
.btn-spice:hover, .btn-spice:focus { color: var(--flare); background-color: var(--rust); }
.btn-spice:active { color: var(--flare) !important; background-color: var(--ash) !important; }

.btn-rust { color: var(--paper); background-color: var(--rust); }
.btn-rust:hover, .btn-rust:focus { color: var(--paper); background-color: var(--ash); }
.btn-rust:active { color: var(--spice) !important; background-color: var(--ash) !important; }


.btn-rose { color: var(--paper); background-color: var(--rose); }
.btn-rose:hover, .btn-rose:focus { color: var(--rose); background-color: var(--brick); }
.btn-rose:active { color: var(--rose) !important; background-color: var(--blood) !important; }

.btn-brick { color: var(--paper); background-color: var(--brick); }
.btn-brick:hover, .btn-brick:focus { color: var(--paper); background-color: var(--blood); }
.btn-brick:active { color: var(--rose) !important; background-color: var(--blood) !important; }


.btn-sage { color: var(--paper); background-color: var(--sage); }
.btn-sage:hover, .btn-sage:focus { color: var(--paper); background-color: var(--moss); }
.btn-sage:active { color: var(--sage) !important; background-color: var(--fern) !important; }

.btn-moss { color: var(--paper); background-color: var(--moss); }
.btn-moss:hover, .btn-moss:focus { color: var(--paper); background-color: var(--fern); }
.btn-moss:active { color: var(--sage) !important; background-color: var(--pine) !important; }

.btn-fern { color: var(--paper); background-color: var(--fern); }
.btn-fern:hover, .btn-fern:focus { color: var(--paper); background-color: var(--pine); }
.btn-fern:active { color: var(--sage) !important; background-color: var(--pine) !important; }

.btn-cypress { color: var(--paper); background-color: var(--cypress); }
.btn-cypress:hover, .btn-cypress:focus { color: var(--cypress); background-color: var(--pine); }
.btn-cypress:active { color: var(--cypress) !important; background-color: var(--pine) !important; }


.btn-ocean { color: var(--paper); background-color: var(--ocean); }
.btn-ocean:hover, .btn-ocean:focus { color: var(--paper); background-color: var(--jungle); }
.btn-ocean:active { color: var(--ocean) !important; background-color: var(--emerald) !important; }

.btn-jungle { color: var(--paper); background-color: var(--jungle); }
.btn-jungle:hover, .btn-jungle:focus { color: var(--paper); background-color: var(--emerald); }
.btn-jungle:active { color: var(--ocean) !important; background-color: var(--abyss) !important; }

.btn-emerald { color: var(--paper); background-color: var(--emerald); }
.btn-emerald:hover, .btn-emerald:focus { color: var(--paper); background-color: var(--abyss); }
.btn-emerald:active { color: var(--ocean) !important; background-color: var(--abyss) !important; }

/* --------------------------
   SOFT / LIGHT NEUTRALS
--------------------------- */
/* ------------------------------------------
   DUSTY NOTEBOOK CUSTOM BADGES
   Additive, doesn't touch Bootstrap defaults
------------------------------------------- */
.badge-fawn        { background-color: var(--fawn); color: var(--paper); }
.badge-sienna      { background-color: var(--sienna); color: var(--paper); }
.badge-terracotta  { background-color: var(--terracotta); color: var(--paper); }
.badge-mahogany    { background-color: var(--mahogany); color: var(--paper); }
.badge-rustica     { background-color: var(--rustica); color: var(--paper); }

.badge-hazel       { background-color: var(--hazel); color: var(--paper); }
.badge-oak         { background-color: var(--oak); color: var(--paper); }
.badge-chestnut    { background-color: var(--chestnut); color: var(--paper); }
.badge-mocha       { background-color: var(--mocha); color: var(--paper); }
.badge-cinder      { background-color: var(--cinder); color: var(--paper); }

.badge-flare       { background-color: var(--flare); color: var(--paper); }
.badge-spice       { background-color: var(--spice); color: var(--paper); }
.badge-rust        { background-color: var(--rust); color: var(--paper); }
.badge-ash         { background-color: var(--ash); color: var(--paper); }

.badge-rose        { background-color: var(--rose); color: var(--paper); }
.badge-brick       { background-color: var(--brick); color: var(--paper); }
.badge-blood       { background-color: var(--blood); color: var(--paper); }

.badge-sage        { background-color: var(--sage); color: var(--paper); }
.badge-moss        { background-color: var(--moss); color: var(--paper); }
.badge-fern        { background-color: var(--fern); color: var(--paper); }
.badge-pine        { background-color: var(--pine); color: var(--paper); }

.badge-abyss       { background-color: var(--abyss); color: var(--paper); }
.badge-emerald     { background-color: var(--emerald); color: var(--paper); }
.badge-jungle      { background-color: var(--jungle); color: var(--paper); }
.badge-ocean       { background-color: var(--ocean); color: var(--paper); }
.badge-cypress     { background-color: var(--cypress); color: var(--paper); }

/* --------------------------
   LIST GROUPS
--------------------------- */
.list-group-item {
  color: var(--chestnut) !important; 
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover / Focus for actionable items */
.list-group-item-action:hover,
.list-group-item-action:focus {
  color: var(--terracotta) !important; /* hover text */
  background-color: var(--mocha) !important; /* hover bg */
  cursor: pointer;
}

/* Links inside items */
.list-group-item a {
  color: var(--oak) !important; /* hover link color */
  text-decoration: none;
  transition: color 0.3s ease;
}

.list-group-item a:hover,
.list-group-item a:focus {
  color: var(--terracotta) !important; /* hover link color */
  text-decoration: none;
}

/* Optional: active selected item */
.list-group-item.active {
  color: var(--terracotta) !important;
  background-color: var(--mocha) !important;
}


/* --------------------------
   Dropdown Menu Background
--------------------------- */
.dropdown-menu {
  color: var(--terracotta) !important;
  background-color: var(--cinder) !important;
  border: none !important;
  padding: 0.25rem 0;
}

/* Dropdown Items */
.dropdown-item {
  color: var(--mahogany) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover / Focus */
.dropdown-item:hover,
.dropdown-item:focus {
   color: var(--terracotta) !important;
   background-color: var(--mocha) !important;
}

/* Active Item */
.dropdown-item.active,
.dropdown-item:active {
   color: var(--paper) !important;
   background-color: var(--terracotta) !important;
}


/* Dropdown divider color */
.dropdown-divider {
    border-top: 1px solid var(--mahogany) !important; /* or any color you want */
}


/* Keep dropdown toggle text terracotta always */
.nav-link.link-terracotta {
    color: var(--terracotta) !important;
    transition: color 0.3s ease;
}

/* When dropdown is open */
.nav-item.dropdown.show > .nav-link.link-terracotta {
    color: var(--mahogany) !important;
}

/* Optional: hover/focus on toggle */
.nav-link.link-terracotta:hover,
.nav-link.link-terracotta:focus {
    color: var(--mahogany) !important;
}

.nav-link.active {
  color: var(--fawn) !important;
}

.nav-link.active:hover,
.nav-link.active:focus {
  color: var(--terracotta) !important;
}


.navbar-toggler {
    color: var(--terracotta) !important;
}

.navbar-toggler i {
    color: var(--terracotta) !important;
}

/* Hover effect (optional) */
.navbar-toggler:hover i {
    color: #E28361; /* slightly brighter terracotta */
}