:root {
  --color-parchment: #f3e9d2;
  --color-ivory: #fffaf0;
  --color-burgundy: #781f35;
  --color-burgundy-dark: #5e1727;
  --color-olive: #6b6b2e;
  --color-olive-muted: #8a9463;
  --color-wood-dark: #2b1b12;
  --color-wood-mid: #4a2f1d;
  --color-ink: #2f241f;
  --color-border: #c9bda7;

  /* Italian flag colors -- reserved for the genealogy tree's connector
     lines (parent/descendant/context roles), not for general UI chrome.
     More saturated than --color-burgundy/--color-olive on purpose: this is
     the one place in the app meant to pop rather than stay archival-muted. */
  --color-italy-green: #009246;
  --color-italy-white: #f5f2ea;
  --color-italy-red: #ce2b37;
  --color-line-outline: #1a1108;

  /* Marriage/partnership bonds always render this color regardless of
     lineage role -- a wedding-ring gold, kept visually distinct from the
     parent/descendant relationship colors above so the two relationship
     *types* (who married whom vs. who descends from whom) never collide. */
  --color-marriage-gold: #ffc300;

  --font-serif: Georgia, "Times New Roman", serif;
  --font-ui: system-ui, -apple-system, sans-serif;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  --radius-sm: 0.35rem;
  --radius-md: 0.75rem;

  --focus-ring: 3px solid var(--color-olive);

  /* Breakpoints (referenced by @media rules across stylesheets):
     mobile: <640px, tablet: 640-959px, desktop: >=960px */
  --breakpoint-tablet: 40rem;   /* 640px */
  --breakpoint-desktop: 60rem; /* 960px */
}