@import "brand.css";

*, ::before, ::after { box-sizing: border-box; }

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

:where(:not(fieldset, progress, meter)) {
  border-width: 0;
  border-style: solid;
  background-origin: border-box;
  background-repeat: no-repeat;
}

:where(html) {
  block-size: 100%;
  font-family: var(--font-sans);
  line-height: var(--font-lineheight-3);
  -webkit-text-size-adjust: none; /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */

  @media (--motionOK) {
    scroll-behavior: smooth;
  }
}

@media (--motionOK) {
  :where(:focus-visible) {
    transition: outline-offset 145ms var(--ease-2);
  }
  :where(:not(:active):focus-visible) {
    transition-duration: .25s;
  }
}

:where(:not(:active):focus-visible) {
  outline-offset: 5px;
}

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

:where(h1, h2, h3, h4, h5, h6) {
  line-height: var(--font-lineheight-1);
  font-weight: var(--font-weight-9);
}

:where(h1) { 
  font-size: var(--font-size-8); 
  max-inline-size: var(--size-header-1); 
}

:where(h2) { 
  font-size: var(--font-size-6); 
  max-inline-size: var(--size-header-2);
}

:where(h3) { font-size: var(--font-size-5) }
:where(h4) { font-size: var(--font-size-4) }
:where(h5) { font-size: var(--font-size-3) }

:where(h3, h4, h5, h6, dt) {
  max-inline-size: var(--size-header-3);
}

:where(p, ul, ol, dl, h6) {
  font-size: var(--font-size-2);
}

:where(a, u, ins, abbr) {
  text-underline-offset: 1px;

  @supports (-moz-appearance: none) {
    text-underline-offset: 2px;
  }
}

:where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

:where(a) {
  padding-inline: var(--size-1);
  margin-inline: calc(var(--size-1) * -1);
  padding-block: var(--size-1);
  margin-block: calc(var(--size-1) * -1);

  &:where([href]) {
    text-decoration-color: var(--indigo-2);

    &:where(:visited) {
      text-decoration-color: var(--grape-2);
    }
  }

  &:where(:not(:hover)) {
    text-decoration: inherit;
  }
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
}

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

:where(input, button, textarea, select),
:where(input[type="file"])::-webkit-file-upload-button {
  font: inherit;
  font-size: inherit;
  color: inherit;
  letter-spacing: inherit;
}

:where(input, textarea) {
  padding-inline: var(--size-2);
  padding-block: var(--size-1);
}

:where(select) {
  padding-inline: 1.25ch 0;
  padding-block: .75ch;
}

:where(textarea, select, input:not(button,button[type],input[type="button"],input[type="submit"],input[type="reset"])) {
  background-color: var(--surface-2);
  border-radius: var(--radius-2);

  @media (--OSdark) {
    background-color: hsl(210deg 11% 10%);
  }
}

:where(textarea) { resize: block }

:where(input[type="checkbox"], input[type="radio"]) {
  block-size: var(--size-3);
  inline-size: var(--size-3);
}

:where(svg) {
  stroke: none;
  fill: currentColor;

  &:where(:not([fill])) {
    stroke: currentColor;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  &:where(:not([width])) {
    inline-size: var(--size-10);
  }
}

:where(code, kbd, samp, pre) { font-family: var(--font-mono) }
:where(:not(pre) > code, kbd) { white-space: nowrap }

:where(pre) { 
  white-space: pre;
  min-inline-size: 0;
  max-inline-size: max-content; 
}

:where(:not(pre) > code) {
  padding: var(--size-1) var(--size-2);
  background: var(--surface-2);
  border-radius: var(--radius-2);
}

:where(kbd, var) {
  padding: var(--size-1) var(--size-2);
  border-width: var(--border-size-1);
  border-color: var(--surface-4);
  border-radius: var(--radius-2);
}

:where(mark) {
  border-radius: var(--radius-2);
  padding-inline: var(--size-1);
}

:where(ol, ul) { padding-inline-start: var(--size-8) }
:where(li) { padding-inline-start: var(--size-2) }
:where(li, dd, figcaption) { max-inline-size: var(--size-content-2) }
:where(p) { max-inline-size: var(--size-content-3) }
:where(dt, summary) { font-weight: var(--font-weight-7) }

:where(dt:not(:first-of-type)) {
  margin-block-start: var(--size-5);
}

:where(small) { 
  font-size: max(.5em, var(--font-size-0)); 
  max-inline-size: var(--size-content-1);
}

:where(hr) {
  margin-block: var(--size-fluid-5);
  height: var(--border-size-2);
  background-color: var(--surface-3);
}

:where(figure) {
  display: grid;
  gap: var(--size-2);
  place-items: center;

  & > :where(figcaption) {
    font-size: var(--font-size-1);
  }
}

:where(blockquote, :not(blockquote) > cite) {
  border-inline-start-width: var(--border-size-3);
}

:where(blockquote) {
  display: grid;
  gap: var(--size-3);
  padding-block: var(--size-3);
  padding-inline: var(--size-4);
  max-inline-size: var(--size-content-2);
}

:where(:not(blockquote) > cite) {
  padding-inline-start: var(--size-2);
}

:where(summary) {
  background: var(--surface-3);
  padding: var(--size-2) var(--size-3);
  margin: calc(var(--size-2) * -1) calc(var(--size-3) * -1);
  border-radius: var(--radius-2);
}

:where(details) {
  padding-inline: var(--size-3);
  padding-block: var(--size-2);
  background: var(--surface-2);
  border-radius: var(--radius-2);
}

:where(details[open] > summary) {
  margin-bottom: var(--size-2);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

:where(fieldset) {
  border-radius: var(--radius-2);
  border: var(--border-size-1) solid var(--surface-4);
}

:where(del) {
  background: var(--red-9);
  color: var(--red-2);
}

:where(ins) {
  background: var(--green-9);
  color: var(--green-1);
}

:where(abbr) {
  text-decoration-color: var(--blue-5);
}

:where(dialog) {
  background-color: var(--surface-1);
  color: inherit;
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-6);

  @media (--OSdark) {
    background-color: var(--surface-2);
  }

  &::backdrop {
    backdrop-filter: blur(25px);
  }
}

:where(html:has(dialog[open])) {
  overflow: hidden;
}

:where(menu) {
  padding-inline-start: 0;
  display: flex;
  gap: var(--size-3);
}

:where(sup) {
  font-size: .5em;
}