body,
body.theme-light,
body.theme-dark {
  --font-interface-theme: Inter;
  --font-text-theme: Inter;
  --font-print-theme: Inter;

  --titlebar-background: transparent;
  --titlebar-background-focused: transparent;
  --workspace-background-translucent: rgba(var(--mono-rgb-0), 0.5);

  --text-normal: var(--color-base-90);
  --divider-color-hover: var(--color-base-50);

  --bold-modifier: 300;

  --icon-opacity: 1;

  --shadow-s: rgba(0, 0, 0, 0.08) 0px 12px 24px -4px, rgba(0, 0, 0, 0.04) 0px 8px 16px -4px;
  --shadow-l: 0 14px 62px 0 #00000040;
  --shadow-tactile: rgba(0, 0, 0, 0.04) 0px 2px 8px -2px, rgba(var(--mono-rgb-100), 0.04) 0px 2px 4px -2px;

  --anim-speed-modifier: 1;
  --anim-motion-baseline: cubic-bezier(0.1, 0, 0.1, 1.25);
  --anim-duration-superfast: calc(80ms * var(--anim-speed-modifier));
  --anim-duration-fast: calc(160ms * var(--anim-speed-modifier));
  --anim-duration-moderate: calc(320ms * var(--anim-speed-modifier));
  --anim-duration-slow: calc(640ms * var(--anim-speed-modifier));

  --icon-stroke-modifier: 1;
  --icon-xs-stroke-width: calc(2px * var(--icon-stroke-modifier));
  --icon-s-stroke-width: calc(2px * var(--icon-stroke-modifier));
  --icon-m-stroke-width: calc(1.75px * var(--icon-stroke-modifier));
  --icon-l-stroke-width: calc(1.75px * var(--icon-stroke-modifier));
  --icon-xl-stroke-width: calc(1.25px * var(--icon-stroke-modifier));

  --density-modifier: 1;
}

.theme-light {
  --color-base-80: #494949;
  --color-base-90: #363636;

  --color-red-rgb: 255, 56, 60;
  --color-red: #ff383c;
  --color-orange-rgb: 255, 141, 40;
  --color-orange: #ff8d28;
  --color-yellow-rgb: 255, 204, 0;
  --color-yellow: #ffcc00;
  --color-green-rgb: 52, 199, 89;
  --color-green: #34c759;
  --color-cyan-rgb: 0, 192, 232;
  --color-cyan: #00c0e8;
  --color-blue-rgb: 0, 136, 255;
  --color-blue: #0088ff;
  --color-purple-rgb: 203, 48, 224;
  --color-purple: #cb30e0;
  --color-pink-rgb: 255, 45, 85;
  --color-pink: #ff2d55;

  --code-normal: #383a42;
  --code-comment: #b6b9c5;
  --code-function: #b76b02;
  --code-important: #b76b02;
  --code-keyword: #e45749;
  --code-property: #62afef;
  --code-punctuation: #383a42;
  --code-string: #0d97b3;
  --code-tag: #e45749;
  --code-value: #a626a4;
}
.theme-dark {
  --color-base-80: #c0c0c0;
  --color-base-90: #cdcdcd;

  --color-red-rgb: 255, 66, 69;
  --color-red: #ff4245;
  --color-orange-rgb: 255, 146, 48;
  --color-orange: #ff9230;
  --color-yellow-rgb: 255, 214, 0;
  --color-yellow: #ffd600;
  --color-green-rgb: 48, 209, 88;
  --color-green: #30d158;
  --color-cyan-rgb: 60, 211, 254;
  --color-cyan: #3cd3fe;
  --color-blue-rgb: 0, 145, 255;
  --color-blue: #0091ff;
  --color-purple-rgb: 107, 52, 242;
  --color-purple: #6b34f2;
  --color-pink-rgb: 255, 55, 95;
  --color-pink: #ff375f;

  --code-normal: #abb2bf;
  --code-comment: #5c6370;
  --code-function: #d19a66;
  --code-important: #d19a66;
  --code-keyword: #e16d76;
  --code-property: #62afef;
  --code-punctuation: #abb2bf;
  --code-string: #58b6c2;
  --code-tag: #e16d76;
  --code-value: #c678de;
}

@media (prefers-color-scheme: light) {
  body.theme-dark {
    --workspace-background-translucent: var(--background-secondary);
  }
}
@media (prefers-color-scheme: dark) {
  body.theme-light {
    --workspace-background-translucent: var(--background-secondary);
  }
}

body.is-translucent {
  --divider-color: var(--background-modifier-border) !important;
}

body:not(.is-mobile) {
  .workspace,
  .app-container {
    transition: var(--anim-duration-moderate);
  }

  .app-container {
    align-items: center;
    background: var(--background-secondary);
  }
}

body:not(.accented-interface) {
  --interactive-accent: rgb(var(--mono-rgb-100));
  --interactive-accent-hover: rgba(var(--mono-rgb-100), 0.8);
  --text-on-accent: var(--color-base-00);
  --text-on-accent-inverted: var(--color-base-00);
}

body.is-frameless:not(.is-hidden-frameless, .is-fullscreen) .titlebar {
  background-color: var(--background-secondary);
}
body.window-title-off .titlebar-text {
  display: none;
}

body:not(.mod-macos):not(.is-mobile) {
  --frame-right-space: calc(var(--header-height) * 3);

  .titlebar {
    height: var(--header-height);
  }

  .titlebar .titlebar-button-container.mod-right {
    width: var(--frame-right-space);

    .titlebar-button {
      justify-content: center;
      flex: 1;

      path,
      rect,
      circle {
        visibility: hidden;
      }

      svg {
        -webkit-mask-size: 100% 100%;
        background-color: currentcolor;
        width: auto;
        height: 10px;
      }

      &.mod-minimize svg {
        -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' fill='none' viewBox='0 0 12 2'%3e%3cpath fill='black' d='M.598 1.201A.604.604 0 0 1 0 .604.61.61 0 0 1 .598 0h10.804c.324 0 .598.281.598.604a.605.605 0 0 1-.598.597H.598Z'/%3e%3c/svg%3e");
      }
      &.mod-maximize svg {
        -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 12 12'%3e%3cpath fill='black' d='M1.77 12C.825 12 0 11.175 0 10.23V1.77C0 .83.828 0 1.77 0h8.46C11.167 0 12 .833 12 1.77v8.46c0 .942-.83 1.77-1.77 1.77H1.77Zm8.431-1.201a.605.605 0 0 0 .598-.598V1.8a.606.606 0 0 0-.599-.6H1.8a.605.605 0 0 0-.6.6v8.4c0 .325.273.598.598.598H10.2Z'/%3e%3c/svg%3e");
      }
      &.mod-close svg {
        -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 12 12'%3e%3cpath fill='black' d='m6 6.848-4.975 4.974a.618.618 0 0 1-.856.006.618.618 0 0 1 .006-.855L5.15 5.998.175 1.024c-.226-.227-.24-.628 0-.85a.606.606 0 0 1 .85 0l4.974 4.975L10.974.174a.606.606 0 0 1 .85 0 .606.606 0 0 1 0 .85L6.848 5.998l4.974 4.975a.606.606 0 0 1 0 .85c-.222.239-.623.225-.85 0L6 6.847Z'/%3e%3c/svg%3e");
      }
    }

    &.is-maximized .titlebar .titlebar-button-container.mod-right .titlebar-button.mod-maximize svg {
      -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 12 12'%3e%3cpath fill='black' d='M10.799 3.557C10.799 2.27 9.67 1.2 8.396 1.2H2.502a1.808 1.808 0 0 1 1.7-1.2h4.194C10.352 0 12 1.641 12 3.598v4.2c0 .758-.484 1.45-1.201 1.7V3.557ZM1.769 12C.826 12 0 11.175 0 10.23V4.172c0-.941.828-1.77 1.77-1.77h6.058c.945 0 1.77.825 1.77 1.77v6.058c0 .942-.829 1.77-1.77 1.77H1.77Zm6.03-1.201a.61.61 0 0 0 .603-.598v-6a.607.607 0 0 0-.603-.603h-6A.61.61 0 0 0 1.2 4.2v6c0 .325.273.598.598.598h6Z'/%3e%3c/svg%3e");
    }
  }
}
