/* Public Margo theme tokens; keep layout and interactions owned by Margo. */
[data-theme="modern"] {
  --color-surface: #f7f6f0;
  --color-surface-alt: #eeeee5;
  --color-on-surface: #35454b;
  --color-on-surface-strong: #132d35;
  --color-on-surface-muted: #526469;
  --color-primary: #006b60;
  --color-on-primary: #fff;
  --color-outline: #718680;
  --color-surface-dark: #102c34;
  --color-surface-dark-alt: #193b42;
  --color-on-surface-dark: #e1ece7;
  --color-on-surface-dark-strong: #fffdf1;
  --color-on-surface-dark-muted: #b6cbc5;
  --color-primary-dark: #83d7c4;
  --color-on-primary-dark: #102c34;
  --color-outline-dark: #7f9c96;
  --font-body: ui-sans-serif, system-ui, sans-serif;
  --font-title: var(--font-body);
  --document-line-height: 1.7;
  --margo-surface: var(--color-surface);
  --margo-surface-alt: var(--color-surface-alt);
  --margo-text: var(--color-on-surface);
  --margo-text-strong: var(--color-on-surface-strong);
  --margo-accent: var(--color-primary);
  --margo-outline: var(--color-outline);
}
html .margo-landing-hero { gap: 3rem; padding-block: clamp(3rem, 7vw, 6rem); }
html .margo-landing-hero__copy h1 {
  max-inline-size: 12ch;
  font-size: clamp(2.8rem, 5.2vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
}
html .margo-landing-hero__copy .margo-document__lead { max-inline-size: 48ch; font-weight: 400; }
html .margo-landing-hero__visual img { aspect-ratio: auto; object-fit: contain; box-shadow: none; border-radius: 1.5rem; }
html .margo-landing-hero__copy > ul { display: flex; flex-wrap: wrap; gap: .75rem; }
html .margo-landing-hero__copy > ul a { min-block-size: 3rem; border-radius: .6rem; }
html .margo-landing-section { padding-block-start: clamp(2.5rem, 5vw, 4.5rem); }
html .margo-landing-section a { text-decoration: underline; text-underline-offset: .2em; }
html a:focus-visible { outline: 3px solid var(--margo-accent); outline-offset: 4px; }
@media (max-width: 48rem) {
  html .margo-landing-hero { flex-direction: column; align-items: stretch; }
  html .margo-landing-hero__visual { inline-size: 100%; }
}