/* ==========================================================================
   BASE STYLES
   ==========================================================================
   This file does two jobs:
   1. THE RESET — browsers apply their own default styles to HTML elements
      (margins on <p>, weird list bullets, different default font sizes).
      Every browser's defaults are slightly different, which is why a page
      can look fine in Chrome and slightly off in Safari. We remove those
      inconsistent defaults here so we start from a predictable blank slate.
   2. BASE ELEMENT STYLING — once the slate is blank, we set our own
      defaults for plain HTML tags (body, h1, p, a) using the tokens from
      tokens.css. This means a plain <h2> anywhere on the site already
      looks correct without needing a class.
   ========================================================================== */

/* ---- 1. THE RESET ---- */

/* box-sizing: border-box means padding and border are INCLUDED in an
   element's declared width, not added on top of it. Without this, an
   element with "width: 300px; padding: 20px;" actually renders at 340px
   wide, which trips up beginners constantly. Setting it once here on
   every element (via the * selector) fixes this everywhere. */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Smooth scrolling for anchor links (e.g. clicking a "Features" nav
     link that jumps to a #features section on the same page) */
  scroll-behavior: smooth;
  /* Prevents the page from jumping horizontally if a tall page suddenly
     gets a vertical scrollbar */
  scrollbar-gutter: stable;
}

img, picture, video, svg {
  display: block;
  max-width: 100%; /* images never overflow their container */
}

a {
  color: inherit;         /* links don't get the default blue/underline... */
  text-decoration: none;  /* ...we'll style links deliberately per-context */
}

ul, ol {
  list-style: none;
}

button {
  font: inherit;    /* buttons don't inherit page font by default — fix that */
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea, select {
  font: inherit;
}


/* ---- 2. BASE ELEMENT STYLING ---- */

body {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--color-warm-white);
  /* Improves how text renders on Mac/iOS screens specifically */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}

h1 { font-size: var(--text-display-lg); }
h2 { font-size: var(--text-heading-lg); }
h3 { font-size: var(--text-heading-md); }
h4 { font-size: var(--text-heading-sm); }

p {
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* A reusable "container" class — centers content and caps its width so
   text and layouts don't stretch uncomfortably wide on large monitors.
   Every page section will nest its content inside one of these. */
.container {
  max-width: var(--container-max);
  margin-inline: auto; /* shorthand for margin-left + margin-right: auto */
  padding-inline: var(--container-padding);
}

@media (min-width: 1024px) {
  .container {
    padding-inline: var(--container-padding-lg);
  }
}

/* Visually hidden but still readable by screen readers — used for
   accessibility, e.g. labelling an icon-only button for someone using a
   screen reader without showing visible text to sighted users. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Respect users who've asked their OS to reduce motion (accessibility
   setting for motion sensitivity / vestibular disorders). This
   automatically shortens EVERY transition and animation on the site to
   near-zero, without us needing to check this condition in every
   individual animation we write. */
@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;
  }
}

/* Visible keyboard focus outline — critical for accessibility. Someone
   navigating by keyboard (Tab key) instead of a mouse needs to SEE which
   element is currently focused. We style it once here so it's consistent
   everywhere instead of relying on each browser's inconsistent default. */
:focus-visible {
  outline: 2px solid var(--color-brand-blue);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}