@layer reset, base, pages, components, utilities, overrides;

:root {
  /* Color */
  color-scheme: light dark;
  --clr-primary: hsl(0, 100%, 70%);
  --clr-accent: hsl(235, 60%, 48%);
  --clr-neutral-dark: hsl(210, 20%, 4%);
  --clr-neutral-light: hsl(76, 35%, 94%);
  /* Spacing */
  /* @link https://utopia.fyi/space/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);
  --space-l-3xl: clamp(2.25rem, 0.1023rem + 9.5455vw, 7.5rem);
  /* Font Sizes */
  /* @link https://utopia.fyi/type/calculator?c=360,18,1.2,1240,20,1.25,7,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,l-3xl&g=s,l,xl,12 */
  --fs--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
  --fs--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
  --fs-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --fs-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
  --fs-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
  --fs-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
  --fs-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
  --fs-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);
  --fs-6: clamp(3.3592rem, 2.7828rem + 2.5621vw, 4.7684rem);
  --fs-7: clamp(4.0311rem, 3.2418rem + 3.508vw, 5.9605rem);
}

@layer reset {
  /* 1. Use a more intuitive box-sizing model */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  /* 2. Remove default margin */
  *:not(dialog) {
    margin: 0;
  }
  /* 3. Enable keyword animations */
  @media (prefers-reduced-motion: no-preference) {
    html {
      interpolate-size: allow-keywords;
      /* 3.1 Enables smooth scrolling between anchors */
      scroll-behavior: smooth;
    }
  }
  /* 4. Improve media defaults */
  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }

  /* 5. Inherit fonts for form controls */
  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  /* 6. Avoid text overflows */
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }

  /* 7. Improve line wrapping */
  p {
    text-wrap: pretty;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
  }

  /*
  9. Create a root stacking context
  */
  #root,
  #__next {
    isolation: isolate;
  }
}

@layer base {
  body {
    -webkit-font-smoothing: antialiased;
    counter-reset: section;
    font-family: var(--font-geist);
    font-size: var(--fs--1);
    font-weight: 400;
    line-height: 1.7;
    background-color: light-dark(
      var(--clr-neutral-light),
      var(--clr-neutral-dark)
    );
    color: light-dark(var(--clr-neutral-dark), var(--clr-neutral-light));
  }
  button {
    --button-spacing: var(--space-m);
    --button-fill: var(--clr-primary, hsl(0, 0, 0%));

    border-radius: 9999px;
    padding-inline: var(--button-spacing);
    padding-block: calc(var(--button-spacing) / 2);
    background-color: var(--button-fill);
    font-family: inherit;
    font-size: inherit;
    display: grid;
    place-items: center;
    border-style: hidden;
    cursor: pointer;
  }
  :is(p) {
    max-width: 65ch;
  }
  h1 {
    font-size: var(--fs-5);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.07ch;
  }
  h2 {
    font-size: var(--fs-4);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.07ch;
  }
  h3 {
    font-size: var(--fs-3);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.07ch;
  }
}

@layer utilities {
  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, var(--space-m));
  }
  .prose > * + * {
    margin-block-start: var(--prose-flow, 1em);
    max-width: 65ch;
  }
}