/* BOUT plate. MOLT green and white, accent means the side you hold, ink means the other side.
   Accent is the side you hold. Ink is the other side. */
@font-face {
  font-family: "Bodoni Moda";
  src: url("fonts/bodoni-moda.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("fonts/bodoni-moda-italic.ttf") format("truetype");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("fonts/jost.ttf") format("truetype");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
:root {
  --ground: #f4f8f6;
  --ink: #0f1419;
  --ink-soft: #4c5a63;
  --accent: #16bf86;
  --accent-deep: #067a56; /* the only green that carries text */
  --tint: #e9f8f1;
  --glow: #16bf86; /* glow only, never text */
  --hairline: color-mix(in srgb, var(--ink) 10%, transparent);

  --forest: var(--ink);
  --lime: var(--accent);
  --card: #ffffff;
  --paper: var(--card);
  --line: color-mix(in srgb, var(--ink) 18%, transparent);
  --mute: var(--ink-soft);
  --signal: var(--ink);
  --pg-accent: var(--accent);
  --band: #eaf3ee;

  --font-display: "Bodoni Moda", "Times New Roman", serif;
  --font-body: "Jost", "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 fluid type */
  --step-0: clamp(.75rem, .75rem + 0.12vw, 0.75rem);
  --step-1: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-2: clamp(1.25rem, 1.08rem + 0.7vw, 1.75rem);
  --step-3: clamp(1.75rem, 1.2rem + 1.6vw, 3.25rem);
  --step-4: clamp(2.375rem, 1.35rem + 3.2vw, 5.25rem);

  --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); }
}