/*
  style.css — how your page looks.
  CSS works by "selecting" things in the HTML (by tag, by class, by id)
  and giving them rules. A class in HTML is written class="title";
  here you target it with a dot: .title. An id="output" is targeted
  with a hash: #output.
*/

/* A "variable" block. Define a value once here, reuse it below with var().
   Change these four lines and the whole page shifts. */
:root {
  --ink: #1a1a1a;          /* main text color */
  --muted: #5a5a5a;        /* softer text color */
  --accent: #2f6f4f;       /* buttons / highlights — swap to your brand color */
  --paper: #ffffff;        /* background */
  --max-width: 40rem;      /* how wide the content column gets */
}

/* Reset a couple of browser defaults so spacing is predictable. */
* {
  box-sizing: border-box;
  margin: 0;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
}

/* The centered content column. margin: auto centers it horizontally;
   padding keeps text off the screen edges on small phones. */
.page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 4rem 1.5rem;
}

.title {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.lede {
  color: var(--muted);
  margin-bottom: 2rem;
}

/* The button. :hover and :focus-visible handle mouse and keyboard states. */
.button {
  font: inherit;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 6px;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
}

.button:hover {
  opacity: 0.9;
}

.button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.output {
  margin-top: 1.5rem;
  color: var(--accent);
  min-height: 1.6rem;   /* reserves space so the page doesn't jump when text appears */
}

/* Respect visitors who've asked their system to reduce motion. */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}