:root {
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
    Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";

  // Boolean-like utility variables for conditional CSS logic
  // Usage: property: var(--condition, var(--TRUE)) value;
  // --TRUE (initial) applies the value, --FALSE (empty) skips it
  --TRUE: initial;
  --FALSE: ;

  --fs-weight: 500;
  --min-w: 20rem;
  --border-radius: 0.25rem;
  --padding: 1.5rem;

  // Unified spacing scale (used by Box, Stack, Cluster, Grid)
  --spacing-0: 0;
  --spacing-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);   /* 4-8px */
  --spacing-sm: clamp(0.5rem, 0.45rem + 0.35vw, 0.75rem);  /* 8-12px */
  --spacing-md: clamp(0.75rem, 0.65rem + 0.45vw, 1.125rem); /* 12-18px */
  --spacing-lg: clamp(1rem, 0.85rem + 0.6vw, 1.5rem);      /* 16-24px */
  --spacing-xl: clamp(1.5rem, 1.25rem + 0.75vw, 2rem);     /* 24-32px */

  // Max width scale (for Box component)
  --box-max-width-xs: 30rem;    /* 480px */
  --box-max-width-sm: 40rem;    /* 640px */
  --box-max-width-md: 48rem;    /* 768px */
  --box-max-width-lg: 64rem;    /* 1024px */
  --box-max-width-xl: 80rem;    /* 1280px */
  --box-max-width-container: 75rem; /* 1200px */

  // Border radius scale (for Box component)
  --box-radius-xs: 0.125rem;    /* 2px */
  --box-radius-sm: 0.25rem;     /* 4px */
  --box-radius-md: 0.375rem;    /* 6px */
  --box-radius-lg: 0.5rem;      /* 8px */
  --box-radius-xl: 0.75rem;     /* 12px */
  --box-radius-full: 9999px;
}

html {
  font-family: var(--font-family);
  font-size: 100%;
}

body {
  display: var(--body-display, flex);
  min-height: 100%;
  flex-direction: var(--body-direction, column);
  min-width: 20.3125rem;
  font-size: var(--fs-0);

  main {
    flex-grow: 1;
  }

  > a[href^="#"] {
    position: absolute;
    top: -4rem;
    left: 0;
    width: 100%;
    display: block;
    justify-content: flex-start;
    padding: 1rem;
    z-index: 100;
    transition: top 0.3s;
    border-radius: 0;
    background-color: var(--color-skip-link-bg, var(--color-neutral-100));
    &:focus {
      top: 0;
    }
  }
}

main,
header,
footer,
section {
  font-size: var(--fs-0);
}

section {
  &:not(nav) {
    margin-inline: var(--sect-y, auto);
    padding-block: var(--sect-x, --spc-4);
  }
}

p {
  max-width: 75ch;
  font-size: var(--fs-0);
  line-height: 1.6;

  & + p {
    margin-block-start: 1rem;
  }
}

ul,
ol {
  display: var(--li-display, flex);
  flex-direction: var(--li-direction, column);
  gap: var(--li-gap, 0.2rem);
  flex-wrap: var(--li-wrap, nowrap);
  padding-inline-start: var(--li-ps, var(--spc-3));
  &[role="list"],
  &[data-list~="unstyled"] {
    list-style: var(--li-style, none);
    margin-block-end: var(--li-my, 0);
    margin-block-start: var(--li-mx, 0);
  }
  &[data-list~="inline"] {
    --li-direction: row;
    --li-gap: 1rem;
    --li-wrap: wrap;
    --li-px: 0;
    --li-pi: 0;
  }
}

sup {
  vertical-align: super;
  font-size: smaller;
}

blockquote {
  --blockquote-padding: 1rem;
  --blockquote-border-width: 0.3125rem;
  --blockquote-border-style: solid;
  --blockquote-border-color: var(--color-border);
  padding: var(--blockquote-padding);
  border-left: var(--blockquote-border-width) var(--blockquote-border-style) var(--blockquote-border-color);
}

strong {
  font-weight: var(--fs-weight);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--fs-weight);
  margin-block-start: 0;
  margin-block-end: 1rem;
  line-height: 1.2;
}

hr {
  --hr-border-width: 0.0625rem;
  --hr-border-color: var(--color-border-subtle);
  --hr-margin-block: 1.5rem;
  --hr-border-style: solid;
  border: none;
  border-bottom: var(--hr-border-width) var(--hr-border-style) var(--hr-border-color);
  margin-block: var(--hr-margin-block);
  display: block;
  min-width: 100%;
}