@import "brand.css";

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

* {
  background-origin: border-box;
  background-repeat: no-repeat;
  margin: 0;

  &:where(:not(fieldset)) {
    border-width: 0;
    border-style: solid;
  }
}

:where(html) {
  block-size: 100%;
  font-family: var(--font-sans);
  line-height: var(--font-lineheight-3);

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

@media (--motionOK) {
  :focus-visible {
    transition: outline-offset .25s var(--ease-2);
    outline-offset: 5px;
  }
}

:where(body) { 
  min-block-size: 100%;
  scrollbar-gutter: stable both-edges;
}

:where(h1, h2, h3, h4, h5, h6) {
  line-height: var(--font-relative-lineheight-2);
  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;
}

:where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]) {
  cursor: pointer;
  touch-action: manipulation;
}

: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(button) {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

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

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

:where(input, button, textarea, select) {
  font: inherit;
  font-size: inherit;
  color: inherit;
  letter-spacing: inherit;
}

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

:where(select) {
  padding-inline: var(--size-2);
  padding-block: var(--size-1);
}

: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);
}

: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);
}