/* -----------------------------------------------------------------------------
   Light / dark modes
------------------------------------------------------------------------------*/

[data-bs-theme="light"] {
    color-scheme: light;
    
    /* -- body -- */
    --bs-body-color: #2d3037;
    --bs-body-bg: #FBF8F6;
    
    /* -- link -- */
    --bs-link-color: #ba9677;
    --bs-link-color-rgb: 186,150,119;
    --bs-link-hover-color: #986e56;
    --bs-link-hover-color-rgb: 152,110,86;
    
    /* -- selectize input item background -- */
    --bs-tertiary-bg: #DECAB7;
}

[data-bs-theme="dark"] {
    color-scheme: dark;
    
    /* -- body -- */
    --bs-body-color: #fff;
    --bs-body-bg: #2d3037;
    
    /* -- link -- */
    --bs-link-color: #ba9677;
    --bs-link-color-rgb: 186,150,119;
    --bs-link-hover-color: #986e56;
    --bs-link-hover-color-rgb: 152,110,86;
    
    /* -- selectize input item background -- */
    --bs-tertiary-bg: #A27A64;
}


/* -----------------------------------------------------------------------------
   Variables
------------------------------------------------------------------------------*/

:root {
  
  /* -- colors -- */
  --tkf-color-dark: #2d3037;
  --tkf-color-light: #ececec;
  --tkf-color-accent: #c09f7f;
  
}


/* -----------------------------------------------------------------------------
   Backgrounds
------------------------------------------------------------------------------*/

.tkf-bg-dark {
  background-color: var(--tkf-color-dark);
}

 
.tkf-bg-accent {
  background-color: var(--tkf-color-accent);
}


.tkf-bg-camel {
  background: #c09f7f;
  background: linear-gradient(
    to bottom right,
    #c09f7f,#ba9677,#986e56
  );
}


/* -----------------------------------------------------------------------------
   Colors
------------------------------------------------------------------------------*/

.color-dark {
  color: var(--tkf-color-dark);
}


.color-light {
  color: var(--tkf-color-light);
}


.color-accent {
  color: var(--tkf-color-accent);
}