/* Paul Lingenbrink brand tokens v3 (Oct 2026). Generated from tokens.json; keep the two in sync.
   Works in any HTML site (Cloudflare, Astro, Eleventy), Squarespace/Webflow custom CSS,
   or a Framer Embed. In Framer itself, enter the same values as Color Styles / Text Styles. */
:root {
  /* color */
  --c-phthalo: #0D3A33;
  --c-teal:    #12806F;
  --c-mint:    #9FE0C9;
  --c-paper:   #F2F0EA;
  --c-ink:     #0F1B18;
  --c-stone:   #5D6A65;
  --c-rule:    #D3D8D2;

  /* type */
  --f-display: "Archivo", system-ui, sans-serif;      /* use with font-stretch: 62.5%; weight 900 */
  --f-heading: "Archivo", system-ui, sans-serif;      /* font-stretch: 75%; weight 800 */
  --f-body:    "Archivo", system-ui, sans-serif;
  --f-label:   "IBM Plex Mono", ui-monospace, monospace;
  /* scale from the Personal Brand Guide */
  --s-display: clamp(64px, 10.4vw, 150px);   /* 150/120, tracking -0.01em, stretch 62.5%, 900, uppercase */
  --s-headline: clamp(36px, 3.9vw, 56px);    /* 56/54, tracking -0.005em, stretch 75%, 800 */
  --s-lede: clamp(24px, 2.5vw, 36px);        /* 36/42, stretch 87.5%, 600 */
  --s-body: 20px;                            /* 20/30, 400 */
  --s-label: 13px;                           /* 13/20, Plex Mono 500, uppercase, +0.1em */

  /* space */
  --sp: 8px;
  --gutter: 24px;
  --margin: 80px;
  --grid-gap: 64px;
  --row-gap: 120px;
  --section: 160px;

  /* shape */
  --r-none: 0;
  --r-quarter: 9999px 0 0 0;

  /* motion */
  --d-fast: 160ms;
  --d-base: 320ms;
  --d-slow: 640ms;
  --d-page: 720ms;
  --e-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --e-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --e-in:    cubic-bezier(0.55, 0, 1, 0.45);
  --rise: 24px;
  --stagger: 60ms;
}

@media (max-width: 809px) {
  :root { --margin: 20px; --grid-gap: 24px; --row-gap: 64px; --section: 96px; }
}

/* Respect people who ask their device for less motion: everything becomes an instant cut. */
@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; --d-page: 1ms; --rise: 0px; --stagger: 0ms; }
}