@import url("../css/extra-fonts.css");

/* Variables */
:root,
::backdrop {
  --void-bg: lightgray;
  --main-color-nav-text: oklab(25.197% 0 -0.00003);
  --main-color-nav-bg: oklab(80% 0.04519 0.13908);
  --main-color-nav-shadow: oklab(50% 0 -0.00008 / 59%);
  --main-color-nav-button-bg: oklab(73.188% 0.11186 0.1483);
  --main-color-nav-border: oklab(28.178% 0.04961 0.04633);
  --main-color-nav-button-border: oklab(86.52% -0.01555 0.07669);
  --main-color-bg: oklab(89.755% 0 -0.0001);
  --main-color-text: oklab(25.197% 0 -0.00003);
  --shadow-color-text: #aaa;
  --dialog-color-backdrop: oklab(49.97% 0 -0.00006 / 70%);
  --main-a-link-color: oklab(48.313% -0.00894 -0.07426);
  --main-a-hover-color: oklab(44.37% -0.0144 -0.10953);
  --main-a-active-color: oklab(39.332% -0.00856 -0.07235);
  --main-a-visited-color: oklab(48.286% 0.04689 -0.06792);
  --high-readability-font: "Lexend", sans-serif;
  --print-readability-font: "Gentium Book Basic", serif;
  --handwritten-font: "Sam Handwritten A", sans-serif;
  --nav-title-font: "Marcellus", serif;
  --main-font-headers: "Geologica", sans-serif;
  --main-font-body: var(--high-readability-font);
  --main-font-size: 11pt;
  --top-nav-height: 0;
  --emoji-font: 'Noto Emoji', monospace;
}

@media screen and (prefers-contrast: more) {
  :root,
  ::backdrop {
    --main-color-bg: oklab(100% 0 0);
    --main-color-text: oklab(0% 0 0);
    --shadow-color-text: transparent;
    --dialog-color-backdrop: hsl(0deg 0% 100% / 90%);
  }
}

@media print {
  :root,
  ::backdrop {
    --void-bg: transparent;
    --shadow-color-text: transparent;
    --main-color-bg: oklab(100% 0 0);
    --main-font-body: var(--print-readability-font);
  }

  #open-about-dialog {
    display: none !important;
  }

  [print-hidden] {
    display: none;
  }
}

@media screen and (prefers-color-scheme: dark) {
  :root,
  ::backdrop {
    --void-bg: oklab(21.779% 0 -0.00002);
    --main-color-nav-text: oklab(89.755% 0 -0.0001);
    --main-color-nav-bg: oklab(31.05% 0.07166 -0.08054);
    --main-color-nav-shadow: oklab(0% 0 0 / 59%);
    --main-color-nav-button-bg: oklab(22.613% 0.04055 -0.03146);
    --main-color-nav-button-border: oklab(34.691% -0.00976 0.03423);
    --main-color-bg: oklab(25.197% 0 -0.00003);
    --main-color-text: oklab(89.755% 0 -0.0001);
    --shadow-color-text: oklab(35.061% -0.0307 -0.00872);
    --dialog-color-backdrop: oklab(0% 0 0 / 70%);
  }
}

@media screen and (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root,
  ::backdrop {
    --main-color-bg: oklab(0% 0 0);
    --main-color-text: oklab(100% 0 0);
    --dialog-color-backdrop: oklab(0% 0 0 / 90%);
  }
}

/* Animations */
@media screen and (prefers-reduced-motion: no-preference) {
  @keyframes fade-in {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes fade-out {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

  @keyframes slide-in {
    0% {
      transform: translateY(-30px);
      opacity: 0;
    }

    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes slide-out {
    0% {
      transform: translateY(0);
      opacity: 1;
    }

    100% {
      transform: translateY(30px);
      opacity: 0;
    }
  }

  @keyframes wiggle {
    0% {
      transform: rotate(0deg);
    }

    25% {
      transform: rotate(0deg);
    }

    50% {
      transform: rotate(6deg);
    }

    75% {
      transform: rotate(-6deg);
    }

    100% {
      transform: rotate(0deg);
    }
  }

  @keyframes pop {
    0% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.05);
    }

    100% {
      transform: scale(1);
    }
  }

  @keyframes tony-pop {
    0% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.005);
    }

    100% {
      transform: scale(1);
    }
  }

  @keyframes bouncing {
    0% { transform: translateY(0);}
    50% { transform: translateY(5px); }
    100% { transform: translateY(0); }
  }
}

/* Cross-page transition */

@view-transition {
  navigation: auto;
}

/* Styles */
html {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  overflow: hidden auto;
  height: fit-content;
  height: -webkit-fill-available;
  font-size: 14pt;
  background-color: var(--main-color-bg);
}

html:focus-within {
  scroll-behavior: auto;
}

@media (prefers-reduced-motion: no-preference) {
  html:focus-within {
    scroll-behavior: smooth;
  }
}

body {
  position: initial;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  padding-top: var(--top-nav-height);
  overflow: auto;
  overflow-wrap: anywhere;
  word-break: auto-phrase;
  hyphens: auto;
  color: var(--main-color-text);
  background-color: var(--main-color-bg);
  width: 100%; /* using [d]vw causes issues not seen with % */
  min-height: 100dvh;
  text-rendering: optimizelegibility;
  font-family: var(--main-font-body);
  font-size: var(--main-font-size);

  &:has(nav-header) {
    --top-nav-height: 36px;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--main-font-headers);
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.2rem;
}

h4 {
  font-size: 1.1rem;
}

small {
  font-size: 0.5em;
}

input,
button,
textarea,
select {
  font: inherit;
}

a,
a:any-link {
  color: var(--main-a-link-color);
}

a:any-link:hover {
  color: var(--main-a-hover-color);
}

a:any-link:active {
  color: var(--main-a-active-color);
}

a:visited {
  color: var(--main-a-visited-color);
}

#main {
  max-width: 100%;
}

dialog::backdrop {
  background-color: var(--dialog-color-backdrop);
}

button:not(:disabled) {
    cursor: pointer;
}

together {
  display: inline;
  white-space: nowrap;
}

.emoji,
symbol {
    font-family: var(--emoji-font);
}