/* ==========================================================================
   Design tokens — colours lifted from flat, painterly pines:
   deep / sage / pale greens and two barks, on plain white.
   ========================================================================== */

:root {
  color-scheme: light;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --bg: #ffffff;
  --ink: #26332b;
  --ink-soft: #5b675f;
  --ink-faint: #97a29a;
  --line: #dfe5df;

  --pine-dark: #2f4235;
  --pine-mid: #6c8a6a;
  --pine-light: #a3bb97;
  /* The tree itself */
  --tree: #3d7046;
  --tree-mid: #6fa067;
  --tree-light: #a6c997;

  /* One warm note, used sparingly: robin, mushrooms, stamps */
  --accent: #c9674f;
  --accent-soft: #f6e4de;
  --sun: #d9a441;

  --bark: #4b302d;
  --bark-soft: #6a4541;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.5, 0.64, 1);

  --container: 1180px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --tree-w: min(440px, 36vw);
  --branch-gap: clamp(1.5rem, 4vw, 3.5rem);
}

@media (max-width: 720px) {
  :root {
    --tree-w: 34vw;
    --branch-gap: 1.1rem;
  }
}