/* Landmark PM — design tokens
   Single source of truth for colors, type scale, spacing, layout, and motion.
   Linked from every page except index.html (which inlines its own :root).
   See .claude/type-color.md for the rules.
*/

:root{
  /* ---- Color — 3 colors only: black, white, gray (60% opacity) ---- */
  --bg:#fff;
  --ink:#0a0a0a;
  --ink-60:rgba(10,10,10,.6);
  --ink-15:rgba(10,10,10,.15);   /* hairline on light */
  --ink-08:rgba(10,10,10,.08);   /* hairline on light, fainter */

  --inv-bg:#0a0a0a;
  --inv-ink:#fff;
  --inv-60:rgba(255,255,255,.6);
  --inv-15:rgba(255,255,255,.15); /* hairline on dark */

  /* Retired tiers — kept as aliases to --*-60 so legacy usages still resolve. */
  --ink-40:var(--ink-60);
  --inv-40:var(--inv-60);
  --inv-08:var(--inv-15);

  --placeholder:#111;
  --warn:#a64a28;                /* contact.html form error state only */

  /* ---- Typography ---- */
  --sans:'Plus Jakarta Sans','Helvetica Neue',Helvetica,Arial,sans-serif;

  /* Type scale. See .claude/type-color.md. */
  --t1:clamp(40px,5.5vw,88px);         /* Headline — hero + section H2 */
  --t-lede:clamp(28px,3.2vw,52px);     /* Lede — big landing paragraphs (home manifesto, company hero) */
  --t2:clamp(20px,1.7vw,28px);         /* Title — card/item titles */
  --t3:clamp(16px,1.1vw,18px);         /* Body — every paragraph */
  --t4:13px;                           /* Label — eyebrows, nav, meta */

  /* Legacy aliases — all collapse onto the 4-tier scale. */
  --h-display:var(--t1);
  --h-section:var(--t1);
  --h-section-m:var(--t1);
  --h-sub:var(--t2);
  --h-subsm:var(--t2);
  --t-body-lg:var(--t3);
  --t-body:var(--t3);
  --t-body-sm:var(--t3);
  --t-micro:var(--t4);

  /* ---- Layout ---- */
  --nav-h:84px;
  --nav-h-sm:60px;
  --jump-h:36px;
  --pad:max(28px,4vw);
  --pad-lg:max(44px,6vw,calc((100vw - 2000px) / 2));

  /* ---- Spacing scale — 5 tiers. See .claude/type-color.md §3 ---- */
  --s1:clamp(32px,3.2vw,56px);    /* Section padding (top = bottom) */
  --s2:clamp(20px,2.4vw,36px);    /* Block separator / section-head -> content */
  --s3:clamp(16px,1.8vw,28px);    /* List or grid item gap */
  --s4:12px;                       /* Text-to-text: every adjacent text pair */
  --s5:6px;                        /* Caption couple: label tight-attached to its primary */
  /* Legacy aliases — prefer --s1/--s2/--s3 directly in new code. */
  --sec-y:var(--s1);
  --sec-head-mb:var(--s2);
  --list-item-y:var(--s3);

  /* ---- Motion ---- */
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* Skip-to-content link — visible only on keyboard focus */
.skip-link{position:absolute;top:-100%;left:var(--pad-lg);padding:8px 16px;background:var(--ink);color:var(--inv-ink);font-size:var(--t4);z-index:200;border-radius:0 0 4px 4px;transition:top .2s}
.skip-link:focus-visible{top:0}