/* MOLT green and white, accent means held: the core and balance that stay, ink means liquid: the surrounding body and balance that thin. */
:root {
  --ground: #f4f8f6;
  --ink: #0f1419;
  --ink-soft: #4c5a63;
  --accent: #16bf86;
  --accent-deep: #067a56; /* the only green that carries text */
  --tint: #e9f8f1;
  --glow: #8ee303; /* glow only, never text */
  --hairline: rgba(15, 25, 20, 0.10);

  --forest: var(--ink);
  --lime: var(--accent);
  --card: #ffffff;
  --paper: var(--card);
  --line: rgba(15, 25, 20, 0.18);
  --mute: var(--ink-soft);
  --signal: var(--ink);
  --pg-accent: var(--accent);
  --band: #eaf3ee;

  --font-display: "Unbounded", "Segoe UI", system-ui, sans-serif;
  --font-body: "Commissioner", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* 4pt space scale */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;

  /* 5-step type, 12px floor, at least 1.25 between steps */
  --step-0: 0.75rem;
  --step-1: 1rem;
  --step-2: 1.25rem;
  --step-3: 1.75rem;
  --step-4: clamp(2.25rem, 1.4rem + 2.2vw, 3.25rem);
  --hero-copy-block: 16.5rem;
  --waterline-origin: calc(var(--nav-h) + var(--hero-copy-block) + var(--space-16));
  --object-fill: 68%;

  --fs-h1: var(--step-4);
  --fs-h2: var(--step-3);
  --fs-h3: var(--step-2);
  --fs-body: var(--step-1);
  --fs-label: var(--step-0);
  --fs-data: var(--step-0);

  --track-display: -0.035em;
  --track-label: 0.08em;
  --leading-body: 1.55;
  --leading-display: 1.02;

  --maxw: 1180px;
  --gutter: var(--space-24);
  --nav-h: 64px;
  --touch: 44px;
  --radius: 2px;
  --radius-sm: 2px;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease: var(--ease-out-expo);
  --ease-soft: var(--ease-out-quart);
  --fx-reveal: 720ms;
  --fx-stagger: 70ms;
  --fx-hover: 180ms;

  color-scheme: light;
}

@media (min-width: 768px) {
  :root { --gutter: var(--space-32); --nav-h: 72px; }
}

@media (min-width: 1440px) {
  :root { --gutter: var(--space-48); }
}