@layer hnst.reset {
  *, :before, :after, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    -webkit-tap-highlight-color: transparent;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  ol, ul, menu {
    list-style: none;
  }

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

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: var(--border-width-default);
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  code, kbd, samp, pre {
    font-family: var(--code-font-family);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  summary {
    display: list-item;
  }

  textarea {
    resize: vertical;
  }

  ::placeholder {
    opacity: 1;
    color: var(--text-subtle);
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }
}

@layer hnst.tokens {
  @font-face {
    font-family: Geist;
    src: url("fonts/Geist-Variable.woff2") format("woff2");
    font-weight: 240 540;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: Geist;
    src: url("fonts/Geist-VariableItalic.woff2") format("woff2");
    font-weight: 240 540;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: Geist Fallback;
    src: local(Arial);
    size-adjust: 102.32%;
    ascent-override: 98.22%;
    descent-override: 28.83%;
    line-gap-override: 0%;
  }

  @font-face {
    font-family: Geist Mono;
    src: url("fonts/GeistMono-Variable.woff2") format("woff2");
    font-weight: 240 540;
    font-style: normal;
    font-display: swap;
  }

  :root {
    font-synthesis: none;
    --border-width-1: .0625rem;
    --border-width-2: .125rem;
    --gray-150: oklch(15% 0 0);
    --gray-190: oklch(19% 0 0);
    --gray-240: oklch(24% 0 0);
    --gray-270: oklch(27% 0 0);
    --gray-300: oklch(30% 0 0);
    --gray-310: oklch(31% 0 0);
    --gray-370: oklch(37% 0 0);
    --gray-440: oklch(44% 0 0);
    --gray-550: oklch(55% 0 0);
    --gray-640: oklch(64% 0 0);
    --gray-660: oklch(66% 0 0);
    --gray-680: oklch(68% 0 0);
    --gray-720: oklch(72% 0 0);
    --gray-800: oklch(80% 0 0);
    --gray-870: oklch(87% 0 0);
    --gray-920: oklch(92% 0 0);
    --gray-961: oklch(96.1% 0 0);
    --gray-985: oklch(98.5% 0 0);
    --gray-1000: oklch(100% 0 0);
    --black-alpha-5: oklch(0% 0 0 / .05);
    --black-alpha-15: oklch(0% 0 0 / .15);
    --black-alpha-43: oklch(0% 0 0 / .43);
    --black-alpha-57: oklch(0% 0 0 / .57);
    --black-alpha-90: oklch(0% 0 0 / .9);
    --white-alpha-9: oklch(100% 0 0 / .09);
    --white-alpha-38: oklch(100% 0 0 / .38);
    --white-alpha-54: oklch(100% 0 0 / .54);
    --purple-320: oklch(32% .17 299);
    --purple-550: oklch(55% .28 295);
    --purple-590: oklch(59% .255 299);
    --purple-630: oklch(63% .233 299);
    --purple-710: oklch(71% .178 300);
    --purple-910: oklch(91% .054 305);
    --blue-620: oklch(62% .163 247);
    --blue-650: oklch(65% .151 241);
    --yellow-300: oklch(30% .065 110);
    --yellow-968: oklch(96.8% .211 109.77);
    --red-300: oklch(30% .08 30);
    --red-560: oklch(56% .224 30);
    --red-720: oklch(72% .15 30);
    --red-960: oklch(96% .019 30);
    --size-640: 40rem;
    --size-960: 60rem;
    --size-1280: 80rem;
    --duration-100: .1s;
    --duration-200: .2s;
    --duration-400: .4s;
    --duration-800: .8s;
    --duration-reduced: .01ms;
    --easing-out-medium: cubic-bezier(.2, .2, .2, 1);
    --easing-out-strong: cubic-bezier(.1, .2, 0, 1);
    --radius-6: .375rem;
    --radius-10: .625rem;
    --radius-12: .75rem;
    --shadow-offset-2: .125rem;
    --shadow-blur-4: .25rem;
    --space-2: .125rem;
    --space-4: .25rem;
    --space-8: .5rem;
    --space-12: .75rem;
    --space-16: 1rem;
    --space-20: 1.25rem;
    --space-24: 1.5rem;
    --space-32: 2rem;
    --space-48: 3rem;
    --space-64: 4rem;
    --space-96: 6rem;
    --space-24-32: clamp(1.5rem, 1.25rem + 1vw, 2rem);
    --space-32-48: clamp(2rem, 1.5rem + 2vw, 3rem);
    --space-48-64: clamp(3rem, 2.5rem + 2vw, 4rem);
    --space-64-96: clamp(4rem, 3rem + 4vw, 6rem);
    --font-size-14: .875rem;
    --font-size-16: 1rem;
    --font-size-20: 1.25rem;
    --font-size-30: 1.875rem;
    --font-size-40: 2.5rem;
    --font-size-24-30: clamp(1.5rem, 1.125rem + 1vw, 1.875rem);
    --font-size-32-40: clamp(2rem, 1.75rem + 1vw, 2.5rem);
    --line-height-20: 1.25rem;
    --line-height-24: 1.5rem;
    --line-height-28: 1.75rem;
    --line-height-ratio-120: round(up, 1.2em, .25rem);
    --font-weight-240: 240;
    --font-weight-360: 360;
    --font-weight-540: 540;
    --letter-spacing-40: .04em;
    --text-transform-uppercase: uppercase;
    --font-family-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
    --font-family-mono: "Geist Mono", ui-monospace, "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
    --z-index-100: 100;
    --z-index-200: 200;
    --border-width-default: var(--border-width-1);
    --focus-ring-width: var(--border-width-2);
    --focus-ring-offset: var(--border-width-2);
    --text-underline-thickness: var(--border-width-1);
    --text-underline-thickness-hover: var(--border-width-2);
    --text-underline-offset: var(--border-width-2);
    --background-page: light-dark(var(--gray-985), var(--gray-190));
    --background-surface: light-dark(var(--gray-1000), var(--gray-150));
    --background-surface-muted: light-dark(var(--gray-961), var(--gray-240));
    --background-surface-prominent: light-dark(var(--gray-920), var(--gray-300));
    --background-primary-subtle: light-dark(var(--purple-910), var(--purple-320));
    --background-negative: light-dark(var(--red-960), var(--red-300));
    --text-default: light-dark(var(--gray-270), var(--gray-720));
    --text-subtle: light-dark(var(--black-alpha-57), var(--white-alpha-54));
    --text-prominent: light-dark(var(--gray-150), var(--gray-920));
    --text-negative: light-dark(var(--red-560), var(--red-720));
    --text-underline-color: var(--border-color-prominent);
    --text-underline-color-hover: var(--color-primary);
    --color-primary: light-dark(var(--purple-590), var(--purple-630));
    --color-primary-hover: light-dark(var(--purple-550), var(--purple-710));
    --color-on-primary: light-dark(var(--gray-1000), var(--gray-150));
    --color-highlight: light-dark(var(--yellow-968), var(--yellow-300));
    --focus-ring-color: var(--color-primary);
    --border-color-subtle: light-dark(var(--black-alpha-5), var(--white-alpha-9));
    --border-color-default: light-dark(var(--gray-870), var(--gray-310));
    --border-color-prominent: light-dark(var(--black-alpha-43), var(--white-alpha-38));
    --border-color-prominent-hover: light-dark(var(--gray-150), var(--gray-920));
    --border-color-negative: light-dark(var(--red-560), var(--red-720));
    --shadow-color-hover: light-dark(var(--black-alpha-15), var(--black-alpha-90));
    --container-width-content: var(--size-640);
    --container-width-wide: var(--size-960);
    --container-width-full: var(--size-1280);
    --container-padding-inline: var(--space-16);
    --duration-feedback: var(--duration-200);
    --duration-transition: var(--duration-400);
    --duration-emphasis: var(--duration-800);
    --duration-stagger: var(--duration-100);
    --easing-standard: var(--easing-out-medium);
    --easing-smooth: var(--easing-out-strong);
    --radius-interactive-sm: var(--radius-6);
    --radius-interactive-md: var(--radius-10);
    --radius-interactive-lg: var(--radius-12);
    --radius-surface: var(--radius-12);
    --shadow-hover: 0rem var(--shadow-offset-2) var(--shadow-blur-4) 0rem var(--shadow-color-hover);
    --space-inset-block-2xs: var(--space-2);
    --space-inset-block-xs: var(--space-4);
    --space-inset-block-sm: var(--space-8);
    --space-inset-block-md: var(--space-12);
    --space-inset-block-lg: var(--space-16);
    --space-inset-block-xl: var(--space-24);
    --space-inset-inline-2xs: var(--space-8);
    --space-inset-inline-xs: var(--space-8);
    --space-inset-inline-sm: var(--space-12);
    --space-inset-inline-md: var(--space-16);
    --space-inset-inline-lg: var(--space-20);
    --space-inset-inline-xl: var(--space-24);
    --space-gap-block-xs: var(--space-8);
    --space-gap-block-sm: var(--space-12);
    --space-gap-block-md: var(--space-16);
    --space-gap-block-lg: var(--space-32);
    --space-gap-block-xl: var(--space-48);
    --space-gap-inline-sm: var(--space-8);
    --space-gap-inline-md: var(--space-24);
    --space-gap-inline-lg: var(--space-32);
    --space-section-sm: var(--space-24-32);
    --space-section-md: var(--space-32-48);
    --space-section-lg: var(--space-48-64);
    --space-section-xl: var(--space-64-96);
    --font-weight-delicate: var(--font-weight-240);
    --font-weight-default: var(--font-weight-360);
    --font-weight-robust: var(--font-weight-540);
    --heading-lg-font-family: var(--font-family-sans);
    --heading-lg-font-size: var(--font-size-32-40);
    --heading-lg-line-height: var(--line-height-ratio-120);
    --heading-lg-font-weight: var(--font-weight-robust);
    --heading-md-font-family: var(--font-family-sans);
    --heading-md-font-size: var(--font-size-24-30);
    --heading-md-line-height: var(--line-height-ratio-120);
    --heading-md-font-weight: var(--font-weight-robust);
    --heading-sm-font-family: var(--font-family-sans);
    --heading-sm-font-size: var(--font-size-20);
    --heading-sm-line-height: var(--line-height-24);
    --heading-sm-font-weight: var(--font-weight-robust);
    --heading-xs-font-family: var(--font-family-sans);
    --heading-xs-font-size: var(--font-size-16);
    --heading-xs-line-height: var(--line-height-20);
    --heading-xs-font-weight: var(--font-weight-robust);
    --body-lg-font-family: var(--font-family-sans);
    --body-lg-font-size: var(--font-size-20);
    --body-lg-line-height: var(--line-height-28);
    --body-lg-font-weight: var(--font-weight-default);
    --body-default-font-family: var(--font-family-sans);
    --body-default-font-size: var(--font-size-16);
    --body-default-line-height: var(--line-height-24);
    --body-default-font-weight: var(--font-weight-default);
    --ui-default-font-family: var(--font-family-sans);
    --ui-default-font-size: var(--font-size-16);
    --ui-default-line-height: var(--line-height-24);
    --ui-default-font-weight: var(--font-weight-default);
    --ui-sm-font-family: var(--font-family-sans);
    --ui-sm-font-size: var(--font-size-14);
    --ui-sm-line-height: var(--line-height-20);
    --ui-sm-font-weight: var(--font-weight-default);
    --eyebrow-font-family: var(--font-family-sans);
    --eyebrow-font-size: var(--font-size-14);
    --eyebrow-line-height: var(--line-height-20);
    --eyebrow-font-weight: var(--font-weight-robust);
    --eyebrow-letter-spacing: var(--letter-spacing-40);
    --eyebrow-text-transform: var(--text-transform-uppercase);
    --code-font-family: var(--font-family-mono);
    --code-font-size: var(--font-size-14);
    --code-line-height: var(--line-height-24);
    --code-font-weight: var(--font-weight-default);
    --z-index-overlay: var(--z-index-100);
    --z-index-skip-link: var(--z-index-200);
    --wp--preset--color--surface-muted: var(--background-surface-muted);
    --wp--preset--color--surface-prominent: var(--background-surface-prominent);
    --wp--preset--color--primary-subtle: var(--background-primary-subtle);
    --wp--preset--color--highlight: var(--color-highlight);
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --duration-feedback: var(--duration-reduced);
      --duration-transition: var(--duration-reduced);
      --duration-emphasis: var(--duration-reduced);
      --duration-stagger: var(--duration-reduced);
    }
  }

  @media (width >= 30rem) {
    :root {
      --container-padding-inline: var(--space-24);
    }
  }

  @media (width >= 48rem) {
    :root {
      --container-padding-inline: var(--space-32);
    }
  }
}

@layer hnst.base {
  html {
    color-scheme: light dark;
  }

  html[data-theme="light"] {
    color-scheme: light;
  }

  html[data-theme="dark"] {
    color-scheme: dark;
  }

  body {
    background-color: var(--background-page);
    color: var(--text-default);
    font-family: var(--body-default-font-family);
    font-size: var(--body-default-font-size);
    line-height: var(--body-default-line-height);
    font-weight: var(--body-default-font-weight);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  a {
    text-decoration-line: underline;
    text-decoration-thickness: var(--text-underline-thickness);
    -webkit-text-decoration-color: var(--text-underline-color);
    text-decoration-color: var(--text-underline-color);
    text-underline-offset: var(--text-underline-offset);
    transition: text-decoration-thickness var(--duration-transition) var(--easing-standard),
    text-decoration-color var(--duration-transition) var(--easing-standard);
  }

  a:hover {
    text-decoration-thickness: var(--text-underline-thickness-hover);
    -webkit-text-decoration-color: var(--text-underline-color-hover);
    text-decoration-color: var(--text-underline-color-hover);
  }

  :where(a, button, input, select, textarea, summary, [role="button"], [role="link"], [role="checkbox"], [role="radio"], [role="switch"], [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-interactive-sm);
  }

  :where(a, button, input, select, textarea, summary, [role="button"], [role="link"], [role="checkbox"], [role="radio"], [role="switch"], [tabindex]:not([tabindex="-1"])):focus:not(:focus-visible) {
    outline: none;
  }

  @media (forced-colors: active) {
    :where(a, button, input, select, textarea, summary, [role="button"], [role="link"], [role="checkbox"], [role="radio"], [role="switch"], [tabindex]:not([tabindex="-1"])):focus-visible {
      outline: var(--focus-ring-width) solid var(--focus-ring-color);
    }
  }
}

@layer hnst.layout, hnst.components, hnst.utilities;