@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto+Slab:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");@layer theme {
  
  html[data-theme=cubscout] {
    --cblue: #003F87;
    --cgold: #FCD116;
    --font-p: 1em/1.6 "Roboto",Arial,sans-serif;
    --font-h: 1em/1.6 "Roboto Slab","Trebuchet MS",sans-serif;
    --font-c: 86%/1.4 monospace;
    --ornament: "";
    /* foreground   | background color */
    --cfg: black;
    --cbg: white;
    --cdark: var(--cblue);
    --clight: white;
    --cmed: var(--cblue);
    --clink: var(--cblue);
    --cemph: var(--cblue);
    --cemphbg: var(--cgold);
    --border: 1px solid var(--cmed);
  }
  html[data-theme=cubscout] h1,
  html[data-theme=cubscout] h2,
  html[data-theme=cubscout] h3,
  html[data-theme=cubscout] h4,
  html[data-theme=cubscout] h5,
  html[data-theme=cubscout] h6 {
    --cfg: var(--cdark);
    color: var(--cfg);
  }
  html[data-theme=cubscout] .tc-main-menu {
    /* foreground   | background color */
    --cfg: white;
    --cbg: var(--cblue);
    --cdark: white;
    --clight: var(--cblue);
    --cmed: white;
    --clink: white;
    --cemph: white;
    --cemphbg: var(--cblue);
    box-shadow: 0vw -50vw 0 50vw var(--cblue);
  }
  html[data-theme=cubscout] .dark {
    --cfg: white;
    --cbg: var(--cblue);
    --cdark: white;
    --clight: var(--cblue);
    --cmed: var(--cgold);
    --clink: var(--cgold);
    --cemph: white;
    --cemphbg: var(--cblue);
    background-color: var(--cbg);
    color: var(--cfg);
    --border: 1px solid var(--cmed);
  }
  html[data-theme=cubscout] .bright {
    --cfg: black;
    --cbg: var(--cgold);
    --cdark: var(--cblue);
    --clight: var(--cgold);
    --cmed: var(--cblue);
    --clink: var(--cblue);
    --cemph: var(--cblue);
    --cemphbg: var(--cblue);
    background-color: var(--cbg);
    color: var(--cfg);
    --border: 1px solid var(--cmed);
  }
}