/* base styles */
* {
  box-sizing: border-box;
}

html {
  --brand-blue: lch(38.953% 23.391 229.55deg);
  --brand-pink: lch(50.161% 77.603 3.8969deg);
  --brand-pink-light: lch(from var(--brand-pink) calc(l + 8) c h);
  --brand-pink-dark: lch(from var(--brand-pink) calc(l - 20) c h);
  --brand-orange: lch(70.149% 72.526 55.336deg);
  --brand-orange-dark: lch(from var(--brand-orange) calc(l - 20) c h);
  --gray-1: lch(from var(--brand-blue) calc(l + 53) calc(c - 19) h);
  --gray-2: lch(from var(--brand-blue) calc(l + 14) calc(c - 19) h);
  --gray-3: lch(from var(--brand-blue) calc(l + 4) calc(c - 13) h);
  --gray-4: lch(from var(--brand-blue) calc(l - 13) calc(c - 13) h);
  --gray-5: lch(from var(--brand-blue) calc(l - 26) calc(c - 13) h);
  --action: var(--brand-pink-dark);
  --anchor-color: var(--brand-pink);
  --bg: white;
  --border: var(--gray-3);
  --button-border: var(--text);
  --text: var(--gray-5);
  --callout: lch(89% 7 229deg);
  --disabled-bg: var(--gray-3);
  --disabled-text: white;
  --target: var(--brand-blue);
  --link-focus: var(--text);
  --outer-anchored: var(--brand-orange-dark);
  --note-color: var(--target);
  --page-margin: calc(1rem + 4vw);
  --pseudo-element: var(--action);
  --font-serif:
    freight-text-pro, baskerville, palatino, cambria, georgia, serif;
  --font-sans: freight-sans-pro, 'Helvetica Neue', helvetica, arial, sans-serif;
  --font-mono:
    'Dank Mono', 'Operator Mono', inconsolata, 'Fira Mono', ui-monospace,
    'SF Mono', monaco, 'Droid Sans Mono', 'Source Code Pro', 'Cascadia Code',
    menlo, consolas, 'DejaVu Sans Mono', monospace;

  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: calc(1em + 0.25vw);
}

@media (prefers-color-scheme: dark) {
  html {
    --action: var(--brand-pink-light);
    --bg: var(--gray-5);
    --border: var(--gray-2);
    --callout: var(--gray-4);
    --button-text: var(--text);
    --text: white;
  }
}

body {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--page-margin), 1fr)
    [main-start] minmax(0, 75ch) [main-end]
    minmax(var(--page-margin), 1fr) [full-end];
  margin: 0;
  overflow-x: hidden;
}

@media (width >= 30em) {
  body {
    --page-margin: calc(1.75rem + 4vw);
  }
}

/* layout */

header,
footer {
  grid-column: full;
}

header {
  background-color: var(--bg);
  border-block-end: thin dotted var(--text);
  display: grid;
  grid-column: full;
  grid-template:
    'title title' auto
    'nav nav' auto
    'button .' auto;
  padding: var(--header-padding, 1em);
  position: sticky;
  top: 0;
  z-index: 1;
}

@media (width >= 30em) {
  header {
    --header-padding: 1em 0;

    align-items: start;
    display: grid;
    gap: 0.5em;
    grid-template:
      '. title button .' auto
      '. nav button .' auto
      / var(--page-margin) minmax(min-content, 1fr) minmax(2rem, auto) var(
        --page-margin
      );
  }

  [data-button] {
    justify-self: end;
    margin-block-start: 0.25lh;
  }
}

:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-sans);
}

h1 {
  font-size: calc(1.75rem + 1vw);
  grid-area: title;
  margin: 0;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1ch;
  grid-area: nav;
}

section {
  grid-column: main;
  padding: 3em 1em;
}

footer {
  border-block-start: thin dotted var(--text);
  display: grid;
  grid-template-columns: minmax(0, 75ch);
  justify-content: center;
  padding: 2em 0;
}

footer p {
  padding-inline: 1em;
}

.demo-item {
  display: grid;
  gap: 3em;
  grid-template:
    'heading heading heading' min-content
    '. elements .' min-content
    'note note note' min-content
    'code code code' min-content/minmax(0, 5rem) minmax(0, 1fr) minmax(0, 5rem);
}

/* stylelint-disable no-descending-specificity */
.demo-item h2 {
  grid-area: heading;
}

.demo-elements {
  grid-area: elements;
  font-family: var(--font-sans);
}

.note {
  background-color: var(--callout);
  border-inline-start: 0.5em solid var(--note-color);
  grid-area: note;
  margin: 2em 0 0;
  padding: 1em;
}

/* links & buttons */

/* prettier-ignore */
[href*='://']::after {
  content: ' ↗';
  font-family: system-ui,-apple-system,'Segoe UI',Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif;
}

a:any-link {
  color: var(--action);
}

a:any-link:hover,
a:any-link:focus {
  color: var(--link-focus);
}

[data-button] {
  background-color: var(--button-bg-color, var(--action));
  border: medium solid var(--button-border, transparent);
  border-radius: 0.25em 0.5em;
  color: var(--button-text, var(--bg));
  cursor: pointer;
  font: inherit;
  font-weight: bold;
  grid-area: button;
  max-width: max-content;
  padding: 0.5em 1em;
}

[data-button]:hover,
[data-button]:focus,
[data-button]:active {
  --button-bg-color: var(--bg);
  --button-text: var(--action);
}

[data-button]:disabled {
  --button-bg-color: var(--disabled-bg);
  --button-border: transparent;

  cursor: not-allowed;
}

[data-button]:disabled,
[data-button]:disabled:hover {
  --button-text: var(--disabled-text);
}

/* heading links */

h2 {
  font-size: calc(1.5rem + 0.5vw);
  position: relative;
}

h2 [aria-hidden]:any-link {
  display: inline-block;
  filter: grayscale(var(--grayscale, 100%));
  margin-block-start: -0.4em;
  padding: 0.4em;
  text-decoration: none;
  transform: scale(var(--scale, 0.75));
  transition: all 200ms ease-in-out;
}

h2 [aria-hidden]:hover,
h2 [aria-hidden]:focus,
h2 [aria-hidden]:active {
  --grayscale: 0;
  --scale: 1;
}

@media (width >= 50em) {
  h2 [aria-hidden]:any-link {
    position: absolute;
    right: 100%;
  }
}

/* components */

.anchor,
.target {
  background: var(--element-color);
  border: thin solid var(--border);
  border-radius: var(--radius-1);
  color: white;
  font-weight: bold;
  padding: 0.5em;
  white-space: nowrap;
}

.anchor {
  --element-color: var(--anchor-color);

  text-align: center;
}

.target {
  --element-color: var(--target, var(--outer-anchored));
}

.outer-anchored {
  --element-color: var(--outer-anchored);
}

/* code samples */
pre {
  border: thin dotted var(--border);
  background-color: var(--callout);
  font-family: var(--font-mono);
  grid-area: code;
  overflow-x: auto;
  max-width: 100%;
  padding: 1em;
}

code {
  font-size: 90%;
}

code[class*='language-'],
pre[class*='language-'] {
  font-size: 0.9em;
}

:not(pre) > code[class*='language-'],
pre[class*='language-'] {
  background-color: lch(98% 2 269.6deg);
}