@layer tokens, base, components, utilities;

@layer tokens {
  :root {
    --boost-theme-color-canvas: var(--boost-cms-color-canvas);
    --boost-theme-color-text: var(--boost-cms-color-text);
    --boost-theme-color-accent: var(--boost-cms-color-accent);
    --boost-theme-space-1: 0.5rem;
    --boost-theme-space-2: 1rem;
    --boost-theme-space-3: 2rem;
    --boost-theme-measure: 72ch;
    --boost-theme-radius: 0.5rem;
  }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { color-scheme: light; font-family: system-ui, sans-serif; line-height: 1.5; }
  body { margin: 0; background: var(--boost-theme-color-canvas); color: var(--boost-theme-color-text); }
  img, video { max-width: 100%; height: auto; }
  a { color: var(--boost-theme-color-accent); }
  :focus-visible { outline: 0.2rem solid var(--boost-theme-color-accent); outline-offset: 0.2rem; }
}

@layer components {
  .boost-theme-skip-link { position: absolute; left: var(--boost-theme-space-1); top: -5rem; }
  .boost-theme-skip-link:focus { top: var(--boost-theme-space-1); background: var(--boost-theme-color-canvas); padding: var(--boost-theme-space-1); }
  .boost-theme-main { width: min(100% - 2rem, var(--boost-theme-measure)); margin-inline: auto; padding-block: var(--boost-theme-space-3); }
  .boost-theme-content h1 { line-height: 1.15; }
  .boost-theme-prose { overflow-wrap: anywhere; }
}

.boost-theme-navigation {
  margin: 0 auto;
  max-width: 72rem;
  padding: 1rem 1.25rem 0;
}

.boost-theme-navigation__list,
.boost-theme-navigation__sublist {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.boost-theme-navigation__item {
  position: relative;
}

.boost-theme-navigation__sublist {
  flex-direction: column;
  gap: .5rem;
  padding-top: .5rem;
}

@layer components {
  .boost-theme-site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--boost-theme-space-1);
    padding: var(--boost-theme-space-2) max(1rem, calc((100vw - 72rem) / 2));
    border-bottom: 1px solid currentColor;
  }
  .boost-theme-site-brand { font-weight: 700; letter-spacing: -.015em; }
  .boost-theme-site-header .boost-theme-navigation { margin: 0; padding: 0; }
  .boost-theme-site-header .boost-theme-navigation__list { flex-wrap: wrap; }
  .boost-theme-site-footer {
    margin-top: var(--boost-theme-space-3);
    padding: var(--boost-theme-space-3) max(1rem, calc((100vw - 72rem) / 2));
    border-top: 1px solid currentColor;
  }
}