/* fonts */
@font-face {
  font-family: dank;
  src: url('../fonts/DankMono-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: dank;
  src: url('../fonts/DankMono-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: dank;
  src: url('../fonts/DankMono-Italic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
}

/* reset */
@layer reset {
  * { box-sizing: border-box; }
  body { margin: unset; }

  input,
  textarea,
  button {
    font: inherit;
  }

  img {
    block-size: auto;
    max-inline-size: 100%;
    vertical-align: middle;
  }
}

@layer config {
  html {
    /* scale */
    --gap: clamp(12px, 5vi, 24px);
    --spacer: calc(var(--gap) * 2);
    --shim: calc(var(--gap) / 2);

    /* colors */
    --blue: 180 4%;

    --dark: hsl(var(--blue) 10%);
    --light: hsl(var(--blue) 90%);

    --bg: var(--light);
    --text: var(--dark);
    --action: mediumvioletred;
    --full: white;
  }

  @media (prefers-color-scheme: dark) {
    html {
      --bg: var(--dark);
      --text: var(--light);
      --action: hotpink;
      --full: black;
    }
  }

  [data-mode=light] {
    --bg: var(--light);
    --text: var(--dark);
    --action: mediumvioletred;
    --full: white;
  }

  [data-mode=dark] {
    --bg: var(--dark);
    --text: var(--light);
    --action: hotpink;
    --full: black;
  }
}

@layer base {
  /* base */
  html {
    background: var(--bg);
    color: var(--text);
    font-family: dank, 'Courier New', Courier, monospace;
    line-height: 1.4;
    block-size: 100%;
  }

  body {
    --bem: clamp(1.125rem, 1rem + 0.75vi, 1.625rem);
    font-size: var(--bem, 1em);
    min-block-size: 100%;
  }

  /* links */
  a:link,
  a:visited {
    color: inherit;
  }

  a:hover,
  a:focus,
  a:active {
    --gray: 0;
    color: var(--action);
  }

  a:has(emo-ji) {
    text-decoration: none;

    link-text {
      text-decoration: underline;
    }
  }

  /* type */
  h1,
  h2 {
    color: CanvasText;
    font-size: larger;
    margin: unset;
    text-wrap: balance;
  }

  b,
  strong {
    font-style: normal;
    font-weight: var(--b, bold);
  }

  i,
  em {
    font-style: var(--i, italic);
    font-weight: normal;
  }

  ul,
  ol {
    padding: unset;
    padding-inline-start: var(--list-padding);

    dialog &,
    ul &,
    ol & {
      --list-padding: 1em;
    }
  }

  p,
  li {
    text-wrap: pretty;
  }

  li {
    margin-block: 0.25lh;
  }

  emo-ji {
    filter: drop-shadow(0 1px Canvas);
    font-family: "Twemoji Mozilla", Apple Color Emoji, "Segoe UI Emoji", "Noto Color Emoji", "EmojiOne Color";
    font-style: normal !important;
    font-variant-caps: initial !important;
  }

  :is(button, a) emo-ji {
    pointer-events: none;
  }

  /* buttons */
  button,
  monkey-write::part(hint-close) {
    background: Canvas;
    border: medium solid currentColor;
    border-radius: 4px;
    color: inherit;
    padding-inline: var(--shim);
  }

  button:hover,
  button:focus-visible {
    box-shadow: 3px 3px 0 var(--full);
    color: var(--action);
  }

  button:focus-visible {
    outline: medium dashed var(--action);
    outline-offset: 0.25em;
  }

  button:active {
    box-shadow: 0 0 0.25em black inset;
  }

  [aria-pressed=true] {
    --gray: 0%;
    border-color: var(--action);
    box-shadow: 0 0 0.25em black inset;
  }
}

/* layout */
@layer layout {
  header emo-ji {
    filter: grayscale(var(--gray, 100%));
  }

  body {
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  footer {
    align-items: center;
    display: flex;
    font-size: smaller;
    flex-flow: wrap;
    gap: var(--gap);
    justify-content: space-between;
  }
}

@layer utility {
  visually-hidden:not(:focus-within):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  [hidden] { display: none !important; }
}