@font-face {
  font-family: 'Martian Mono VF';
  font-display: swap;
  font-style: normal;
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  src: url('/fonts/MartianMonoVF.woff2') format(woff2) tech(variations);
}

@font-face {
  font-family: 'Martian Grotesk VF';
  font-display: swap;
  font-weight: 100 1000;
  font-stretch: 75% 200%;
  src: url('/fonts/MartianGroteskVF.woff2') format(woff2) tech(variations);
}

@font-face {
  font-family: 'Lora Variable';
  font-display: swap;
  font-style: normal;
  font-weight: 400 700;
  src: url('/fonts/Lora.woff2') format(woff2) tech(variations);
}

@font-face {
  font-family: 'Lora Variable';
  font-display: swap;
  font-style: italic;
  font-weight: 400 700;
  src: url('/fonts/Lora-Italic.woff2') format(woff2) tech(variations);
}

:root {
  color-scheme: light dark;

  /*
   * Color Palette Generation and Definition
   */

  --hue-pri: 69deg;
  --hue-sec: 135deg;
  --hue-hil: 310deg;

  --lightness-light: 95%;
  --lightness-light-mid: 85%;
  --lightness-mid: 70%;
  --lightness-dark-mid: 50%;
  --lightness-dark: 25%;

  --chroma-light: 0.02;
  --chroma-light-mid: 0.07;
  --chroma-mid: 0.12;
  --chroma-dark-mid: 0.1;
  --chroma-dark: 0.03;

  --col-white: oklch(1 0 0);
  --col-black: oklch(0 0 0);

  --col-pri-light: oklch(var(--lightness-light) var(--chroma-light) var(--hue-pri));
  --col-pri-light-mid: oklch(var(--lightness-light-mid) var(--chroma-light-mid) var(--hue-pri));
  --col-pri-mid: oklch(var(--lightness-mid) var(--chroma-mid) var(--hue-pri));
  --col-pri-dark-mid: oklch(var(--lightness-dark-mid) var(--chroma-dark-mid) var(--hue-pri));
  --col-pri-dark: oklch(var(--lightness-dark) var(--chroma-dark) var(--hue-pri));

  --col-sec-light: oklch(var(--lightness-light) var(--chroma-light) var(--hue-sec));
  --col-sec-light-mid: oklch(var(--lightness-light-mid) var(--chroma-light-mid) var(--hue-sec));
  --col-sec-mid: oklch(var(--lightness-mid) var(--chroma-mid) var(--hue-sec));
  --col-sec-dark-mid: oklch(var(--lightness-dark-mid) var(--chroma-dark-mid) var(--hue-sec));
  --col-sec-dark: oklch(var(--lightness-dark) var(--chroma-dark) var(--hue-sec));

  --col-hil-light: oklch(var(--lightness-light) var(--chroma-light) var(--hue-hil));
  --col-hil-light-mid: oklch(var(--lightness-light-mid) var(--chroma-light-mid) var(--hue-hil));
  --col-hil-mid: oklch(var(--lightness-mid) var(--chroma-mid) var(--hue-hil));
  --col-hil-dark-mid: oklch(var(--lightness-dark-mid) var(--chroma-dark-mid) var(--hue-hil));
  --col-hil-dark: oklch(var(--lightness-dark) var(--chroma-dark) var(--hue-hil));

  /*
   * Semantic Color Definitions
   */

  --col-page-fg: light-dark(var(--col-black), var(--col-white));
  --col-page-bg: light-dark(var(--col-pri-light), var(--col-pri-dark));
  --col-content-fg: light-dark(var(--col-black), var(--col-white));
  --col-content-bg: light-dark(var(--col-white), var(--col-black));
  --col-primary-fg: light-dark(var(--col-pri-dark-mid), var(--col-pri-light-mid));
  --col-primary-hl: light-dark(var(--col-pri-light-mid), var(--col-pri-dark-mid));
  --col-primary-bg: light-dark(var(--col-pri-light), var(--col-pri-dark));
  --col-secondary-fg: light-dark(var(--col-sec-dark-mid), var(--col-sec-light-mid));
  --col-secondary-bg: light-dark(var(--col-secondary-light), var(--col-secondary-dark));
  --col-highlight-fg: light-dark(var(--col-hil-dark-mid), var(--col-hil-light-mid));
  --col-highlight-bg: light-dark(var(--col-hil-light-mid), var(--col-hil-dark-mid));

  --col-text: var(--col-content-fg);
  --col-muted: color-mix(in oklab, currentColor, var(--col-page-bg));
  --col-link: var(--col-primary-fg);
  --col-link-hover: var(--col-primary-hl);

  --border-solid: 2px solid currentColor;

  --col-shadow: oklch(from currentColor l c h / 65%);
  --shadow-overlay: 0.5rem 0.5rem var(--col-shadow);
  --shadow-hover: 0.15rem 0.15rem var(--col-shadow);
  --shadow-inset: inset 0.1rem 0.1rem var(--col-shadow);
  --shadow-inset-heavy: inset 0.15rem 0.15rem var(--col-shadow);

  --font-family-head: 'Lora Variable', serif;
  --font-family-body: 'Martian Grotesk VF', sans-serif;
  --font-family-mono: 'Martian Mono VF', monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  line-height: calc(1em + 0.5rem);

  &:not(dialog) {
    margin: 0;
  }
}

img {
  display: block;
  max-width: 100%;
  object-fit: contain;

  p & {
    display: inline flow-root;
    max-block-size: 1cap;
    vertical-align: middle;
  }
}

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

:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}

:where(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
  font-family: var(--font-family-head);
}

pre:has(code) {
  overflow: scroll;
}

body {
  font-family: var(--font-family-body);
  color: var(--col-text);
  background: var(--col-page-bg);
}

a {
  text-decoration: none;
  color: var(--col-link);

  &.secret:not(:hover) {
    color: inherit;
  }

  &:hover {
    background: var(--col-link-hover);
    text-decoration: underline;
  }
}

.alert {
  color: var(--col-highlight-fg);
  background: var(--col-highlight-bg);
}