:root {

  --font-family: "Plus Jakarta Sans", sans-serif;

  --color-alpha: #5046e5;
  /* Purple */
  --color-alpha-dark: #281eba;
  --color-alpha-text: #c7d2fe;
  --color-alpha-text-highlight: #fff;

  --link-color: var(--color-alpha);

  --gray-1: #f8fafc;
  --gray-2: #e6e6e6;
  --gray-3: #f9fafb;

  --border-radius-1: 5px;
  --border-radius-2: 10px;
  --border-radius-3: 15px;

  --border-width-default: 1px;
  --border-color-default: --var(color-alpha);

  --bold-font-weight: 600;


  /* These are for code highlighting and come from Tailwind */
  --color-gamma: #1e293b;
  /* Dark Navy Purple */
  --color-gamma-text: #fff;
  --color-zeta: #cbd5e1;
  /* Light Gray */
  --color-delta: #f471b5;
  /* Pink */
  --color-epsilon: #7dd3fc;
  /* Baby Blue */

  /* For form styling */

  --bg-primary: var(--color-alpha);
  --bg-primary-dark: var(--color-alpha-dark);
  --form-input-border-color-focus: var(--color-alpha);

  --form-input-border-color: #e5e7eb;
  --form-input-border-color-invalid: rgba(239, 68, 68);

  --form-input-border-width: 2px;
  --form-input-border-width-small-screens: 0 0 1px 0;

  --form-input-border-radius: .3rem;
  --form-input-border-radius-small-screens: 0;

  --form-input-padding-small-screens: 0.5rem 0rem;
  --form-input-padding: 0.7rem;

  --form-input-height: 3rem;
  --form-select-line-height: 1.2rem;
  --form-input-width: 100%;

  --form-label-font-size: 1rem;
  --form-bold-font-weight: 600;

  --font-family-serif: "Lora", serif;

}

body {
  font-family: var(--font-family);
}

a {
  color: var(--link-color);
}

/* Color Classes */
.bg-alpha {
  background-color: var(--color-alpha);
}

a.bg-alpha:hover {
  background-color: var(--color-alpha-dark);
}

.bg-gray-1 {
  background-color: var(--gray-1);
}

/* Color Groups */

.color-group-zeus>.active,
.color-group-zeus>*:hover {
  background: var(--color-gamma);
  color: var(--color-gamma-text);
  transition: background-color 0.3s ease;
}

.group-odin {
  &>* {
    color: rgba(0, 0, 0, 0.4);
  }

  &>*:hover,
  &>*.active {
    color: var(--color-gamma);
  }
}

.group-odin {
  ul {
    padding-left: 20px;
  }

  a {
    color: rgba(0, 0, 0, 0.5);
  }

  a:hover,
  a.active {
    color: rgba(0, 0, 0, 0.9);
  }

  a.active {
    font-weight: bold;
  }
}





/* Accordion  */
.accordion section {
  grid-template-rows: 0fr;
}

.accordion section.active {
  grid-template-rows: 1fr;
}


.group-odin {
  &>* {
    color: rgba(0, 0, 0, 0.4);
  }

  &>*:hover,
  &>*.active {
    color: var(--color-gamma);
  }
}

.shown-while-loading {
  display: none;
}

.htmx-request .shown-while-loading {
  display: block;
}

.htmx-request .hidden-while-loading {
  display: none;
}

.htmx-indicator {
  opacity: 0;
}

.group-joint-brew { /* Multi-Pane Layout */
  display: flex;
  width: 100vw;
  > div {
    max-width: 100vw;
    background-color: white;
    border-right: 2px solid #efefef;
    height: 100vh;
    overflow: scroll;
  }
  .--left {
    width: 400px;
    max-width: 100vw;
  }
  .--main {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    & > div {
      max-width: 800px;
      flex: 1 1 200px;
      border-right: 2px solid #efefef;
      overflow: scroll;
      height: 100vh;
    }
  }
}

.group-chill-vice { /* Collapsible Menu Panels */
  .--folder {
    display: grid;
    grid-template-rows: 0fr 0fr;
    transition: grid-template-rows 0.3s ease-out;
    font-size: 0.9rem;
    &.--open {
      grid-template-rows: 0fr 1fr;
    }
    .--title {
      font-weight: bold;
      cursor: pointer;
      padding: 8px 15px;
    }
    .--items {
      overflow: hidden;
      li {
        margin-top: 3px;
      }
      a {
        padding: 4px 15px;
        transition: all 0.3s;
      }
    }
    .--items.--open {
      grid-template-rows: 1fr;
    }
    a {
      color: #191919;
    }
    a:hover,
    a.active,
    &.--open .--title,
    .--title:hover {
      background-color: #efefef;
    }
  }
}

.font-lora {
  font-family: 'Lora', serif;
}

.font-spectral {
  font-family: 'Spectral', serif;
}

.styled-text >  h1, 
.styled-text >  h2, 
.styled-text >  h3, 
.styled-text >  h4, 
.styled-text >  h5, 
.styled-text >  h6 {
    font-family: var(--font-family-serif);
    font-weight: 500;
  }
}

.cm-s-easymde .CodeMirror-line {
  .cm-header-1,
  .cm-header-2,
  .cm-header-3,
  .cm-header-4 {
    font-family: var(--font-family-serif);
    color:        var(--styled-text-heading-color, #191919);
    font-weight:  var(--styled-text-heading-font-weight, 800);
  }
  .cm-header-1 {
    margin:         var(--styled-text-h1-margin, 0 0 20px 0);
    padding:        var(--styled-text-h1-padding, 0 0 10px 0);
    font-size:      var(--styled-text-h1-font-size, 32px);
    line-height:    var(--styled-text-h1-line-height, 1.2);
    border-bottom:  var(--styled-text-h1-bottom-border, 1px solid #d0d7deb3);
  }
  .cm-header-2 {
    margin:         var(--styled-text-h2-margin, 12px 0);
    padding:        var(--styled-text-h2-padding, 0 0 10px 0);
    font-size:      var(--styled-text-h2-font-size, 24px);
    line-height:    var(--styled-text-h2-line-height, 1.2);
    border-bottom:  var(--styled-text-h2-bottom-border, 1px solid #d0d7deb3);
  }
  .cm-header-3 {
    margin:         var(--styled-text-h3-margin, 12px 0);
    font-size:      var(--styled-text-h3-font-size, 20px);
    line-height:    var(--styled-text-h3-line-height, 1.2);
  }
  .cm-header-4 {
    font-size: 1.25rem;
    font-weight: var(--bold-font-weight);
    line-height: 1.2;
    margin-bottom: 1rem;
  }
}

.TinyMDE {
  .TMMark_TMH1, .TMMark_TMH2, .TMMark_TMOL, .TMMark_TMUL {
    color: var(--styled-text-heading-color);
  }
  .TMH1,
  .TMH2,
  .TMH3,
  .TMH4 {
    font-family: var(--font-family-serif);
    color:        var(--styled-text-heading-color, #191919);
    font-weight:  var(--styled-text-heading-font-weight, 800);
  }

  .TMH1 {
    margin:         var(--styled-text-h1-margin, 0 0 20px 0);
    padding:        var(--styled-text-h1-padding, 0 0 10px 0);
    font-size:      var(--styled-text-h1-font-size, 32px);
    line-height:    var(--styled-text-h1-line-height, 1.2);
    border-bottom:  var(--styled-text-h1-bottom-border, 1px solid #d0d7deb3);
  }


  .TMH2 {
    margin:         var(--styled-text-h2-margin, 12px 0);
    padding:        var(--styled-text-h2-padding, 0 0 10px 0);
    font-size:      var(--styled-text-h2-font-size, 24px);
    line-height:    var(--styled-text-h2-line-height, 1.2);
    border-bottom:  var(--styled-text-h2-bottom-border, 1px solid #d0d7deb3);
  }
  .TMH3 {
    margin:         var(--styled-text-h3-margin, 12px 0);
    font-size:      var(--styled-text-h3-font-size, 20px);
    line-height:    var(--styled-text-h3-line-height, 1.2);
  }
  .TMH4 {
    font-size: 1.25rem;
    font-weight: var(--bold-font-weight);
    line-height: 1.2;
    margin-bottom: 1rem;
  }

  .TMCode, .TMFencedCodeBacktick, .TMFencedCodeTilde, .TMIndentedCode {
    background-color: var(--color-gamma) !important;
    color: #fff;
  }

  code.TMCode {
    border-radius: 5px;
    border: none !important; 
    padding: 2px 4px;
    font-size: .85em;
  }

  .TMUL {
  }
}