/* base styling and resets */

/**
 * Tell the browser to include the element's borders and padding when you give it a height or width.
 * This means a 100px × 100px element with a 2px border and 4px of padding on all sides
 * will be rendered as 100px × 100px, with an internal content area of 88px × 88px
 */
*, *::before, *::after { box-sizing: border-box }

/**
 * Border styles are reset
 *
 * See https://tailwindcss.com/docs/preflight#border-styles-are-reset
 */
:not(input, button) { border: 0 solid }

html { scroll-behavior: smooth }

svg { fill: currentColor }

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-white);
  margin: 0;
  color: var(--color-neutral-900);
  line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
/* https://bugs.webkit.org/show_bug.cgi?id=170179 */
:is(ol, ul)[role='list'] { list-style: none }

/* Typography */
h1, h2, h3, h4 {
  margin: 0;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h1 { font-size: var(--text-6xl) }
h2 { font-size: var(--text-4xl) }
h3 { font-size: var(--text-2xl) }

@media (max-width: 768px) {
  h1 { font-size: var(--text-4xl) }
  h2 { font-size: var(--text-3xl) }
}

@media (max-width: 480px) {
  h1 { font-size: var(--text-3xl) }
}

p  { margin-bottom: 1rem }

a {
  text-decoration: none;
  transition: color 0.2s ease;

  color: var(--color-primary);
  &:hover { color: var(--color-neutral-900) }
}