/* Light tokens for the partner-facing page, 2026-10-06.
   Direction: research/design-research.md, section 3.
   Geist stays from assets/denim.css. Everything else is new. */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=Geist+Mono:wght@400..600&display=swap');

:root {
  /* Surface and ink */
  --ground: #FAFAF8;
  --ground-2: #F3F2EE;
  --card: #FFFFFF;
  --ink: #141413;
  --ink-2: #5F5E5A;
  --ink-3: #8C8A84;
  --line: rgba(20, 20, 19, 0.10);
  --line-2: rgba(20, 20, 19, 0.16);
  --img-outline: oklch(0 0 0 / 0.1);

  /* One accent, primary button and one link state only */
  --accent: #0E5E52;
  --accent-hover: #0B4D43;
  --accent-active: #093F37;
  --on-accent: #FFFFFF;

  /* Type */
  --font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
  --fs-display: clamp(44px, 6vw, 72px);
  --fs-h2: clamp(30px, 3.4vw, 40px);
  --fs-h3: 20px;
  --fs-metric: clamp(40px, 4.4vw, 56px);
  --fs-body-lg: 19px; --fs-body: 16px; --fs-body-sm: 15px;
  --fs-ui: 14px; --fs-caption: 13px; --fs-eyebrow: 12px;
  --lh-tight: 1.02; --lh-snug: 1.12; --lh-normal: 1.4; --lh-relaxed: 1.65;
  --ls-tight: -0.035em; --ls-snug: -0.02em; --ls-wide: 0.12em;

  /* Space, radius, motion */
  --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;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-fast: 150ms; --dur-press: 160ms;

  --container-max: 1160px; --container-px: 24px; --section-py: 112px;
}
@media (max-width: 640px) { :root { --section-py: 64px; } }

* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}
body {
  margin: 0; font-family: var(--font-sans); background: var(--ground); color: var(--ink);
  font-size: var(--fs-body); line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';
}
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: var(--ls-snug); text-wrap: balance; color: var(--ink); }
h1 { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-normal); }
p { margin: 0; text-wrap: pretty; }
p + p { margin-top: 1em; }
a { color: inherit; text-decoration: none; transition: color var(--dur-fast) ease; }
img { display: block; max-width: 100%; }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-px); }
.section { padding: var(--section-py) 0; }
.muted { color: var(--ink-2); }
.caption { color: var(--ink-3); font-size: var(--fs-caption); }
.lead { font-size: var(--fs-body-lg); line-height: var(--lh-normal); color: var(--ink-2); }
.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 var(--space-4);
}
.num { font-variant-numeric: tabular-nums lining-nums; }

/* Buttons. Press feedback scale(0.96), hover is a colour change under 150ms. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-md);
  font: 500 var(--fs-ui)/1 var(--font-sans); letter-spacing: 0; cursor: pointer;
  border: 1px solid transparent; white-space: nowrap;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
}
.btn:active { transform: scale(0.96); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
@media (hover: hover) and (pointer: fine) { .btn-primary:hover { background: var(--accent-hover); } }
.btn-primary:active { background: var(--accent-active); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
@media (hover: hover) and (pointer: fine) { .btn-ghost:hover { background: var(--ground-2); } }
.btn-lg { height: 52px; padding: 0 var(--space-6); font-size: var(--fs-body-sm); border-radius: var(--radius-lg); }

/* Placeholders. Brackets mark values Nathan supplies. */
.ph {
  display: grid; place-items: center; background: var(--ground-2); color: var(--ink-3);
  font: 400 var(--fs-caption)/1.3 var(--font-mono); text-align: center; padding: var(--space-4);
  outline: 1px solid var(--img-outline); outline-offset: -1px;
}
.wordmark-ph { font: 500 18px/1 var(--font-sans); letter-spacing: -0.01em; color: var(--ink-3); }

/* Nav */
.nav { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.nav .container { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.nav .brand { font-weight: 500; font-size: 16px; letter-spacing: -0.01em; }
.nav ul { display: flex; gap: var(--space-8); list-style: none; margin: 0; padding: 0; font-size: var(--fs-ui); color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .nav ul a:hover { color: var(--ink); } }
@media (max-width: 760px) { .nav ul { display: none; } }

/* Footer */
.footer { border-top: 1px solid var(--line); padding: var(--space-8) 0; font-size: var(--fs-caption); color: var(--ink-3); }
.footer .container { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.footer ul { display: flex; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
@media (hover: hover) and (pointer: fine) { .footer a:hover { color: var(--ink); } }