.theme-tokyo {
  --main-bg-color: #1e2336;

  --calc-color: #b8bfe8;
  --calc-bg-color: #23283d;
  --calc-row-number: #6a7193;
  --calc-row-selected-number: #67708e;
  --calc-result-color: #c55970;
  /* --calc-comment-color: #3e4d76; */
  /* --calc-comment-color: #5578b9; */
  --calc-comment-color: var(--calc-color);
  --calc-comment-hover-bg-color: #23283d;
  --calc-row-input-bg-color: #282e44;

  /* var(--calc-row-number); */
  --calc-row-selected-input-bg-color: #6a719360;

  --calc-row-type-color: #db8152;
  --calc-row-type-custom-color: #a783da;
  /* --calc-row-log-color: #05859b; */
  --calc-row-log-color: hsla(189, 94%, 50%, 1);
  --calc-row-log-bg-color: #23283d;
  --calc-row-log-border-color: rgba(var(--calc-row-log-bg-color), 0.8);

  --calc-shadow-color: #5578b948;
  --calc-border-color: var(--calc-shadow-color);

  --nav-hover-bg-color: var(--calc-comment-color);

  --tab-active-color: #ee6e73;

  /*  --link-color: hsla(189, 94%, 40%, 1); */
  --link-color: #5cb0ec;
  --link-hover-color: var(--tab-active-color);

  --nav-link-active-color: var(--logo-color);
  --nav-link-active-bg-color: #0006;

  --soft-border-color: #67708e66;
  /*var(--calc-row-selected-number); */
  --secondary-bg-color: var(--calc-row-input-bg-color);
  --highlight-bg-color: var(--calc-row-type-color);
  --button-bg-color-hover: var(--calc-shadow-color);
}

.theme calcwrap {
  _border-top: 1px solid var(--calc-border-color);
  _border-radius: 0;
  _box-shadow: 0 0 3em var(--calc-shadow-color);
}

@media(min-width: 1150px) {
  .theme calcwrap {
    xbox-shadow: 0 2px 5px 0 rgb(0 0 0/16%), 0 2px 10px 0 rgb(0 0 0/12%);
    xbox-shadow: 0 2px 5px 0 var(--calc-bg-color), 0 2px 10px 0 var(--calc-comment-color);
    box-shadow: 0 0 3em var(--calc-shadow-color);
    border: 5px double var(--calc-border-color);
    border-radius: 14px;
  }
}

@media(min-width: 1150px) {
  body.theme {
    background: var(--main-bg-color);
  }
}

/* monospace */
.font-system {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  xfont-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.font-classy calc {
  /* font-family: "Charter", Georgia, Times, 'Times New Roman', serif; */
  font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
}

/* TODO: fonts should be in rem relative to body font, vs px */

@font-face {
  font-family: InstaCalc;
  src: url("/img/ui/InstaCalc_v2.otf?v=112622") format("opentype");
}

.font-hand {
  --calc-row-input-bg-color: none;
  --calc-row-selected-input-bg-color: none;
}

.font-hand calc {
  /* want backup characters for emoji */
  font-family: "InstaCalc", Inter;
}

.font-hand calc c2 {
  font-size: 160%;
}

.font-hand calc c1 {
  font-size: 160%;
}

.font-hand calc row input,
.font-hand calc row textarea {
  border: none !important;
}

.font-hand calc row.selected input,
.font-hand calc row.selected textarea {
  background: transparent;
  border-bottom: 1px solid #dadada !important;
}

.font-hand #app-area calc,
.font-hand #app-area calcmeta {
  background: url(/img/ui/fabric_light.webp);
}

.font-hand.theme-tokyo #app-area calc,
.font-hand.theme-tokyo #app-area calcmeta {
  background: url(/img/ui/fabric_dark.webp);
  box-shadow: inset 0 0 0 1000px #000000db;
}

.font-hand calc {
  background: inherit;
}

.font-hand calc number {
  font-size: 110%;
}

.font-hand #app-area calc h2 span {
  font-size: 32px;
}

.font-hand log,
.font-hand parsed {
  font-family: 'Inter';
}

/* default */
html {
  font-family: 'Inter', system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.font-inter {
  font-family: 'Inter', sans-serif;
  font-feature-settings: "ccmp" 1, "kern" 1;
  letter-spacing: -.30px;
}

.font-inter calc input,
.font-inter calc textarea {
  font-feature-settings: "case" 0,
    "cpsp" 0,
    "dlig" 0,
    "frac" 0,
    "dnom" 0,
    "numr" 0,
    "salt" 0,
    "subs" 0,
    "sups" 0,
    "tnum" 0,
    "zero" 0,
    "ss01" 0,
    "ss02" 0,
    "ss03" 0,
    "ss04" 0,
    "cv01" 0,
    "cv02" 0,
    "cv03" 0,
    "cv04" 0,
    "cv05" 0,
    "cv06" 0,
    "cv07" 0,
    "cv08" 0,
    "cv09" 0,
    "cv10" 0,
    "cv11" 0,
    "calt" 1,
    "ccmp" 1,
    "kern" 1,
    "ss01" 0,
    "ss02" 0,
    "zero" 0,
    "case" 0,
    "tnum" 0
}

.font-inter calc result {
  xfont-feature-settings: "ccmp", "kern", "frac", "case", "tnum", "calt" 0;
  font-feature-settings: "calt" 0;
}

@supports (font-variation-settings: normal) {
  .font-inter {
    font-family: 'Inter var', sans-serif;
  }
}

/**** inter stuff ***/

.font-monospace calc {
  font-family: 'Fira Mono', monospace;
  xfont-size: 16px;
}

.font-monospace .tooltipster-content {
  xfont-family: monospace;
}

/* default UI stuff */
.theme select {
  background-color: var(--calc-bg-color) !important;
  color: var(--calc-color) !important;
}

.theme #command-list input {
  background-color: var(--calc-bg-color) !important;
  color: var(--calc-color) !important;
}

.theme calc row input,
.theme calc row textarea,
.theme sharedcalc row input {
  border: 1px solid var(--calc-row-input-bg-color) !important;
}

.theme .reference-result {
  color: var(--calc-result-color);
}

.theme .reference-example {
  color: var(--calc-color);
}

.theme .reference-comment {
  color: var(--calc-comment-color);
}

/* zen mode */

.size-zen #app-placeholder {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  width: 60%;
  min-width: 480px;
  overflow: auto;
  max-height: 75%;
}

.size-zen #app-placeholder {
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
  scrollbar-width: none;
  /* Firefox */
}

.size-zen #app-placeholder::-webkit-scrollbar {
  display: none;
  /* Safari and Chrome */
}

.size-zen calc row number {
  visibility: hidden;
}

.size-zen calc row.selected number {
  visibility: visible;
}

/* external libs */

a.upgrade {
  font-weight: bold;
  color: red;
  background: #fff;
  border: 1px solid red;
  padding: 5px;
  margin-right: 1rem;
}

body.theme-morning {
  background: linear-gradient(90deg, hsl(238deg 100% 94%), hsl(0deg 100% 88%), #ff9f9f);
}

body.theme-morning {
  --calc-bg-color: #f6dde1;
  --secondary-bg-color: #f1f5f9aa;
  /* has opacity */
  --secondary-bg-color: #f6dde1;
  /* no opacity */

  --logo-color: #598cb1;
  --button-bg-color-create: #cb678f78;
}

body.theme-morning nav {
  background: none;
}

body.theme-morning #sidebar-contents {
  background: var(--calc-bg-color);
  border-radius: 8px;
}

@media screen and (max-width: 1150px) {

  /* fade the background */
  body.theme-morning calcwrap::after {
    content: '';
    width: 100%;
    height: 20vh;
    display: inline-block;
    background: linear-gradient(var(--calc-bg-color) 0%, #ffffff00 100%);
  }
}


/*
input[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: none;
}
*/

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 16px;
  width: 16px;
  margin-left: .4em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
  cursor: pointer;
}