@layer config, resets, elements, custom;

@layer custom {
  body {
    display: grid;
    grid-template-rows: 1fr auto;
    min-block-size: 100svb;
    min-inline-size: 0;
  }

  main,
  footer {
    padding-inline: var(--page-padding-inline);
    color: canvastext;
    background-color: canvas;
  }

  main {
    display: grid;
    place-content: center;
    min-inline-size: 0;
    padding-block: calc(var(--stack) * 3);
  }

  footer {
    padding-block: var(--stack);
    color-scheme: dark;
    border-block-start: 1px solid;
  }
}

@layer config {
  :root {
    /* Spacing */
    --gutter: clamp(2.5ch, 2.5vmax, 3.25ch);
    --stack: clamp(1ex, 2.5vmax, 1.5ex);
    --line-length: 75ch;
    --page-max-inline-size: min(var(--line-length), 100dvi - var(--gutter) * 2);
    --page-padding-inline: calc((100dvi - var(--page-max-inline-size)) / 2);

    /* Typography */
    --font: "VT323", var(--font-mono);
    --font-heading: "Spicy Rice", "Georgia", serif;
    --font-variation-settings: "wdth" 100;
    --font-optical-sizing: auto;
    --font-italic: "Georgia", serif;
    --font-mono: ui-monospace, sfmono-regular, sf mono, menlo, consolas,
      liberation mono, monospace;
    --font-weight-regular: 400;
    --font-size-min: 105%;
    --font-size-max: 125%;
    --font-size-clamp: clamp(
      var(--font-size-min),
      var(--font-size-min) * 0.9 + 0.5dvi,
      var(--font-size-max)
    );
    --leading: 1.25;
    --underline-offset: 3px;

    /* Traditional point sizes */
    --pt-double-canon: 4.666em;
    --pt-canon: 3.999em;
    --pt-double-great-primer: 2.999em;
    --pt-double-english: 2.333em;
    --pt-double-pica: 2em;
    --pt-paragon: 1.666em;
    --pt-great-primer: 1.5em;
    --pt-english: 1.166em;
    --pt-pica: 1em;
    --pt-small-pica: 0.916em;
    --pt-long-primer: 0.833em;
    --pt-bourgeois: 0.75em;
    --pt-minion: 0.583em;

    font-size: var(--font-size-clamp);
    font: -apple-system-body;
    font-family: var(--font);
    font-weight: var(--font-weight-regular);
    line-height: var(--leading);
    text-wrap: pretty;
    accent-color: canvastext;
    color-scheme: dark light;

    :where(h1, h2, h3, h4) {
      font-family: var(--font-heading);
      font-weight: var(--font-weight-regular);
    }

    :where(em, i, cite, address, var) {
      font-family: var(--font-italic);
      font-size: 0.85em;
      text-transform: initial;
    }

    :where(code, samp, kbd) {
      font-family: var(--font);
    }
  }

  @supports (font: -apple-system-body) and
    (not (-webkit-touch-callout: default)) {
    :root {
      font-size: var(--font-size-clamp);
    }
  }
}

@layer resets {
  *,
  ::before,
  ::after {
    font-feature-settings: "kern";
    font-kerning: normal;
    box-sizing: border-box;
  }

  * {
    margin: 0;
    padding: 0;
  }

  :focus-visible {
    outline: 2px solid;
    outline-offset: 2px;
  }

  :disabled,
  [aria-disabled="true"] {
    opacity: 0.8;
    cursor: not-allowed;
    border-style: groove;
  }

  [readonly] {
    border-style: dashed;
    background: transparent;
  }

  :where(input:is([type="checkbox"], [type="radio"], [type="file"]), select, label, button, summary) {
    cursor: pointer;
  }

  :where(input, select, textarea, button, summary > *) {
    font: inherit;
  }

  :where(img, svg, video) {
    max-inline-size: 100%;
    block-size: auto;
  }

  :where(svg) {
    fill: currentcolor;
  }

  :where(a) {
    color: inherit;
  }

  :where(a, abbr, acronym, code, ins, samp, dt) {
    text-decoration: underline;
    text-underline-offset: var(--underline-offset);
  }

  :where(code, samp) {
    text-decoration-style: dashed;
  }

  :where(ins) {
    text-decoration-style: wavy;
  }

  :where(abbr, acronym) {
    text-decoration-style: dotted;
  }

  @media (forced-colors: active) {
    button {
      border: 1px solid;
    }
  }

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

@layer elements {
  :where(input:not([type="radio"], [type="checkbox"], [type="file"]), textarea, select) {
    background: color-mix(in oklch, canvasText 5%, transparent);
    border: 1px inset;
    border-radius: 0;
  }

  :where(fieldset, figure
      img, dd, kbd, select, input:not([type="radio"], [type="checkbox"]), textarea, button) {
    border: 1px solid;
  }

  :where(th, td) {
    border-block-end: 1px solid;
  }

  :where(pre) {
    border-inline-start: 4px solid;
  }

  :where(kbd, button) {
    border-block-end: 2px solid;
    border-start-start-radius: 3px;
    border-start-end-radius: 3px;
    border-end-start-radius: 4px;
    border-end-end-radius: 4px;
  }

  /* Spacing */

  :where(button, select, input:not([type="radio"], [type="checkbox"], [type="file"]), textarea) {
    min-block-size: 2lh;
    min-inline-size: 2lh;
  }

  :where(button, dd, th, td, kbd, select, input:not([type="radio"], [type="checkbox"], [type="file"]), textarea) {
    padding-block: calc(var(--stack) / 6);
    padding-inline: calc(var(--gutter) / 3);
  }

  :where(th, td, caption, figcaption, pre code) {
    padding-inline: calc(var(--gutter) / 2);
  }

  :where(th, td, caption, figcaption) {
    padding-block: calc(var(--stack) / 2);
  }

  :where(pre code) {
    padding-block: var(--stack);
  }

  :where(figure, dl, blockquote) {
    padding-block-start: calc(var(--stack) / 2.5);
  }

  :where(details[open]) {
    padding-block-end: var(--stack);
  }

  :where(fieldset) {
    padding-block: 0 var(--stack);
    padding-inline: calc(var(--gutter) / 2);
  }

  :where(legend) {
    margin-inline: -0.5ch;
    padding-inline: 0.5ch;
  }

  :where(button) {
    padding-inline: var(--gutter);
  }

  :where(p, figure, table, form, fieldset, pre, blockquote, ul, ol, dl, details):not(:first-child) {
    margin-block-start: var(--stack);
  }

  :where(main h1, h2, h3, h4, h5, h6):not(:first-child) {
    margin-block-start: calc(var(--stack) * 1.375);
  }

  :where(main h1, h2, h3, h4, h5, h6) + *:not(main h1, h2, h3, h4, h5, h6) {
    margin-block-start: calc(var(--stack) / 1.5);
  }

  :where(form li + li) {
    margin-block-start: calc(var(--stack) / 2);
  }

  :where(li li) {
    margin-inline-start: 2ch;
  }

  /* TODO: solve specficity issue */
  li > :is(ol, ul):first-of-type {
    margin-block-start: 0;
  }

  :where(input, textarea, select) ~ mark {
    margin-block-start: calc(var(--stack) / 2);
    padding-block: calc(var(--stack) / 2);
    padding-inline: calc(var(--gutter) / 2);
  }

  :where(figure img) {
    display: block;
    margin-inline: auto;
  }

  /* Typography */

  :where(form ol, form ul) {
    list-style: none;
  }

  :where(h1, h2, h3, h4, h5, h6) {
    line-height: 1.05;
    text-wrap: balance;
  }

  :where(h1, h2, h3, h4) {
    overflow-wrap: break-word;
    hyphens: auto;
  }

  :where(main h1) {
    font-size: var(--pt-canon);
  }

  :where(h2) {
    font-size: var(--pt-double-great-primer);
  }

  :where(h3) {
    font-size: var(--pt-double-english);
  }

  :where(h4) {
    font-size: var(--pt-paragon);
  }

  :where(h5, blockquote p, big) {
    font-size: var(--pt-english);
  }

  :where(h6, legend) {
    font-size: var(--pt-pica);
  }

  :where(label, th, td) {
    font-size: var(--pt-long-primer);
  }

  :where(small, kbd, figcaption, caption, sup, sub, input ~ mark, textarea
      ~ mark, select ~ mark) {
    font-size: var(--pt-bourgeois);
  }

  :where(code, samp) {
    font-size: var(--pt-small-pica);
  }

  :where(blockquote p, big) {
    line-height: 1.3;
  }

  :where(summary > *) {
    display: inline;
  }

  :where(legend, button, th, label) {
    font-weight: var(--font-weight-regular);
  }

  :where(sup, sub) {
    line-height: 1;
  }

  :where(figcaption, caption) {
    text-align: center;
  }

  :where(th) {
    text-align: start;
  }

  :where(th, td) {
    vertical-align: baseline;
  }

  :where(figure) {
    overflow-x: auto;
  }

  :where(table) {
    border-spacing: 0;
    caption-side: bottom;
  }

  :where(tr > *:first-child) {
    white-space: nowrap;
  }

  :where(kbd) {
    letter-spacing: 0.1ch;
    text-transform: uppercase;
  }

  :where(code, samp) {
    text-decoration-style: dashed;
  }

  :where(big) {
    display: inline;
  }

  :where(button) {
    appearance: none;
    color: canvasText;
    background: canvas;
  }

  :where(hr) {
    block-size: 0;
    margin-block: calc(var(--stack) * 2);
    border: 0;
    border-block-end: 1px solid;

    & + * {
      margin-block-start: 0;
    }
  }

  :where(pre) {
    --_pre-background: color-mix(in oklch, canvasText 5%, canvas);
    display: block;
    position: relative;
    word-spacing: normal;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: normal;
    background: var(--_pre-background);
  }

  :where(pre)::after {
    position: absolute;
    inset-inline: 0;
    z-index: 0;
    background: linear-gradient(to bottom, transparent, var(--_pre-background));
    pointer-events: none;
    content: "";
    inset-block-end: 0;
    block-size: var(--stack);
  }

  :where(pre code) {
    display: block;
    text-decoration: none;
    overflow: auto;
    max-block-size: 60vh;
  }

  :where(dl) {
    display: grid;
    align-items: baseline;
    grid-template-columns: auto minmax(75%, 1fr);
    gap: calc(var(--gutter) / 2);
  }

  :where(dd) {
    block-size: 100%;
  }

  :where(label:has(input[type="radio"], input[type="checkbox"])) {
    display: inline-grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: calc(var(--gutter) / 4);

    input[type="radio"],
    input[type="checkbox"] {
      inline-size: 0.75lh;
      block-size: 0.75lh;
      margin-block: 0.125lh;
    }
  }

  :where(input:not([type="checkbox"], [type="radio"]), select, textarea) {
    display: block;
    inline-size: 100%;
  }

  :where(input[type="file"]) {
    padding-inline: 0;
    border: 0;
  }

  ::-webkit-file-upload-button {
    font: inherit;
    cursor: pointer;
    appearance: auto;
  }

  :where(select) {
    appearance: none;
    text-indent: 0.01px;
    text-overflow: "";
  }

  :where(abbr) {
    cursor: help;
  }

  :where(abbr, dt) {
    text-decoration: underline;
    text-decoration-style: dotted;
  }

  :where(blockquote q)::before {
    position: absolute;
    margin-inline-start: -1ex;
  }

  :where(blockquote q q)::before {
    position: static;
    margin-inline-start: unset;
  }

  :where(blockquote footer) {
    padding-inline: 0;
  }

  :where(input[aria-required="true"][aria-invalid="false"] + mark) {
    display: none;
  }

  :where(input[aria-required="true"][aria-invalid="true"] + mark) {
    display: block;
  }

  [role="region"][tabindex="0"] {
    overflow: auto;
  }

  @media (any-hover: hover) {
    :where(summary:hover) {
      text-decoration: underline;
      text-underline-offset: var(--underline-offset);
    }

    :where(button:hover) {
      background: color-mix(in oklch, canvasText 5%, transparent);
    }
  }
}