:root {
  /* Color Palette */
  --neutral-0: rgba(255, 255, 255, 1);
  /* White */
  --neutral-10: rgba(240, 240, 240, 1);
  /* Light Gray */
  --neutral-20: rgba(220, 220, 220, 1);
  /* Medium Gray */
  --neutral-70: rgba(100, 100, 100, 1);
  /* Dark Gray */
  --neutral-90: rgba(20, 20, 20, 1);
  /* Very Dark Gray */
  --primary-40: rgba(80, 100, 255, 1);
  /* Cornflower Blue */


  /* Spacing Scale (in rem) */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.25rem;
  --spacing-xl: 1.75rem;


  /* Typography */
  --base-font-size: 1rem;
  /* 18px - Good for body text */
  --base-line-height: 1;
  --font-family: sans-serif;
  --heading-font-family: sans-serif;
}


html {
  font-size: var(--base-font-size);
  /* Set base font size */
  box-sizing: border-box;
  overflow-y: scroll;
  /* Always show scrollbar to prevent layout shifts */
}


*,
*::before,
*::after {
  box-sizing: inherit;
}


body {
  font-family: var(--font-family);
  line-height: var(--base-line-height);
  color: var(--neutral-90);
  background-color: var(--neutral-0);
  margin: 0;
  /* Reset default margin */
  min-width: 320px;
  /* Minimum width for mobile */
  /* Maximum width for larger screens */
  padding: 2rem;
}


/* Headings */
h1,
h2,
h3 {
  font-family: var(--heading-font-family);
  font-weight: bold;
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-sm);
  line-height: 1.2;
}

h2,
h3 {
  color: var(--neutral-70);
}

h1 {
  font-size: 1.75rem;
}


h2 {
  font-size: 1.25rem;
}


h3 {
  font-size: 1.05rem;
}


/* Paragraphs */
p {
  margin-bottom: var(--spacing-md);
  color: var(--neutral-90);
}


/* Lists */
ol,
ul {
  margin-top: 0;
  margin-bottom: var(--spacing-md);
  padding-left: var(--spacing-xl);
  /* Indent lists */
}


li {
  margin-bottom: var(--spacing-sm);
}


/* Links */
a {
    text-decoration: underline;
    color: var(--primary-40)
}

a:hover {
  color: var(--primary-90);
}

a:focus {
  outline: 2px solid var(--primary-40);
  outline-offset: 2px;
}