@layer reset, tokens, base, composition, components, pages, utilities;

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

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  img,
  picture,
  video,
  canvas {
    display: block;
    max-width: 100%;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  button {
    background: none;
    border: 0;
    cursor: pointer;
  }

  ul,
  ol {
    list-style: none;
  }

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

  table {
    border-collapse: collapse;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer tokens {
  :root {
    --hue-concrete: 30 4% 82%;
    --color-concrete: #d3d0cc;
    --color-ink: #0b0b0c;
    --color-magenta: #ff0877;
    --color-lime: #c7f400;
    --color-paper: #f7f5f0;
    --color-cyan: #00d8e8;

    --color-ink-soft: #1c1c1e;
    --color-line: #b9b5ae;
    --color-line-dark: #333335;

    --surface-page: var(--color-paper);
    --surface-raised: #ffffff;
    --surface-dark: var(--color-ink);
    --surface-concrete: var(--color-concrete);

    --text-primary: var(--color-ink);
    --text-inverse: var(--color-paper);
    --text-muted: #5b5850;
    --text-muted-inverse: #b7b4ac;

    --brand-accent: var(--color-magenta);
    --brand-accent-2: var(--color-lime);
    --brand-accent-3: var(--color-cyan);

    --focus-ring: var(--color-magenta);

    --font-display: "Archivo Black", "Helvetica Neue", Arial, sans-serif;
    --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;

    --step-1: clamp(0.8125rem, 0.78rem + 0.14vw, 0.9375rem);
    --step0: clamp(0.9375rem, 0.9rem + 0.18vw, 1.0625rem);
    --step1: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
    --step2: clamp(1.25rem, 1.15rem + 0.5vw, 1.625rem);
    --step3: clamp(1.6rem, 1.4rem + 1vw, 2.25rem);
    --step4: clamp(2.1rem, 1.7rem + 2vw, 3.25rem);
    --step5: clamp(2.6rem, 1.9rem + 3.4vw, 4.75rem);
    --step6: clamp(3.2rem, 2.1rem + 5vw, 6.5rem);

    --space-3xs: clamp(0.25rem, 0.23rem + 0.1vw, 0.3125rem);
    --space-2xs: clamp(0.5rem, 0.46rem + 0.2vw, 0.625rem);
    --space-xs: clamp(0.75rem, 0.69rem + 0.3vw, 0.9375rem);
    --space-s: clamp(1rem, 0.92rem + 0.4vw, 1.25rem);
    --space-m: clamp(1.5rem, 1.38rem + 0.6vw, 1.875rem);
    --space-l: clamp(2rem, 1.7rem + 1.5vw, 3rem);
    --space-xl: clamp(3rem, 2.4rem + 3vw, 4.75rem);
    --space-2xl: clamp(4rem, 3rem + 5vw, 7rem);
    --space-3xl: clamp(5rem, 3.6rem + 7vw, 9.5rem);

    --content-max: 82.5rem;
    --content-narrow: 42rem;

    --radius-s: 0.25rem;
    --radius-m: 0.5rem;

    --border-thin: 0.09375rem;
    --border-thick: 0.1875rem;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 160ms;
    --duration-med: 260ms;

    color-scheme: light;
  }

  [data-theme="dark"] {
    --color-paper: #121214;
    --color-ink: #f7f5f0;
    --color-concrete: #242428;
    --surface-page: #121214;
    --surface-raised: #1c1c20;
    --surface-dark: #09090b;
    --surface-concrete: #222226;
    --text-primary: #f7f5f0;
    --text-inverse: #121214;
    --text-muted: #a3a099;
    --text-muted-inverse: #4a4843;
    --color-line: #38383c;
    --color-line-dark: #d4d4d8;
    color-scheme: dark;
  }
}

@layer base {
  html {
    background: var(--surface-page);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.55;
    scroll-behavior: smooth;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }

  body {
    background: var(--surface-page);
    color: var(--text-primary);
    font-size: var(--step0);
    min-height: 100dvh;
    overflow-x: hidden;
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-transform: uppercase;
  }

  h1 {
    font-size: var(--step6);
  }

  h2 {
    font-size: var(--step4);
  }

  h3 {
    font-size: var(--step2);
  }

  h4 {
    font-size: var(--step1);
    text-transform: none;
    letter-spacing: 0;
  }

  p {
    max-width: 38ch;
  }

  p.measure-wide {
    max-width: 60ch;
  }

  small {
    font-size: var(--step-1);
  }

  strong {
    font-weight: 700;
  }

  :focus {
    outline: none;
  }

  :focus-visible {
    outline: var(--border-thick) solid var(--focus-ring);
    outline-offset: 0.1875rem;
  }

  ::selection {
    background: var(--color-lime);
    color: var(--color-ink);
  }
}

@layer utilities {
  .u-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .u-skip-link {
    position: absolute;
    left: var(--space-s);
    top: -4rem;
    background: var(--color-lime);
    color: var(--color-ink);
    padding: var(--space-2xs) var(--space-s);
    font-weight: 700;
    z-index: 200;
    transition: top var(--duration-fast) var(--ease-out);
  }

  .u-skip-link:focus-visible {
    top: var(--space-s);
  }

  .u-text-center {
    text-align: center;
  }

  .u-balance {
    text-wrap: balance;
  }

  .u-pretty {
    text-wrap: pretty;
  }

  .u-no-wrap {
    white-space: nowrap;
  }

  .u-mt-l {
    margin-top: var(--space-l);
  }

  .u-mt-m {
    margin-top: var(--space-m);
  }

  .u-mt-s {
    margin-top: var(--space-s);
  }

  .u-border-top-none {
    border-top: none;
  }

  .u-text-inverse {
    color: var(--text-inverse);
  }

  .u-center-inline {
    margin-inline: auto;
  }
}