/*
  Digital Seeds tokens
  Source of truth for color, type, and spacing across all pages.
  Do not introduce ad-hoc values. If a value is needed and missing, add it here first.
  Reviewed: 2026-04-25
*/

:root {
  /* Color system, matches BRANDBOOK.html */
  --ink: #0A0A0A;
  --ink-soft: #1A1A1A;
  --paper: #FAFAF5;
  --paper-pure: #FFFFFF;
  --rule: #E4E2D8;
  --rule-strong: #C9C6B7;
  --muted: #6B7066;
  --muted-soft: #8E938A;
  --seed: #1FA968;
  --seed-deep: #157A4B;

  /* Color aliases by intent */
  --bg-page: var(--paper);
  --bg-card: var(--paper-pure);
  --bg-dark: var(--ink);
  --fg-primary: var(--ink);
  --fg-secondary: var(--muted);
  --fg-on-dark: var(--paper);
  --fg-secondary-on-dark: #A8A89E;
  --accent: var(--seed);
  --border: var(--rule);

  /* Typography stacks */
  --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale */
  --text-xs: 12px;
  --text-sm: 13.5px;
  --text-base: 16px;
  --text-md: 17px;
  --text-lg: 19px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 48px;
  --text-5xl: 64px;
  --text-6xl: 80px;

  /* Line heights */
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.55;
  --lh-relaxed: 1.65;

  /* Letter spacing */
  --ls-tightest: -2.5px;
  --ls-tighter: -1.5px;
  --ls-tight: -0.5px;
  --ls-normal: 0;
  --ls-wide: 1px;
  --ls-widest: 1.5px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* Layout */
  --wrap-max: 1180px;
  --wrap-narrow: 760px;
  --gutter: 32px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
}

/* Base reset and typography */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--seed); color: var(--ink); }

/* Layout primitives */
.wrap { max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 var(--gutter); }

/* Typographic atoms */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-secondary);
  display: inline-block;
}
.eyebrow .accent { color: var(--accent); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  margin: 0;
}
h1 { font-size: clamp(40px, 6vw, 72px); letter-spacing: var(--ls-tightest); }
h2 { font-size: clamp(28px, 3.6vw, 44px); }
h3 { font-size: var(--text-xl); font-weight: 600; letter-spacing: var(--ls-tight); }
h4 { font-size: var(--text-md); font-weight: 600; letter-spacing: var(--ls-tight); }

p { margin: 0; }
.lede {
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
  max-width: 60ch;
}
.prose p + p { margin-top: var(--space-5); }
.prose p { font-size: var(--text-md); line-height: var(--lh-relaxed); max-width: 64ch; }