/* Design tokens — vendored from PDL / the Framer rebuild.
   These are the single source of truth for color, type, and layout values.
   Change a value here and it applies everywhere. Do not hard-code these
   values in page HTML or in base.css — reference the variables instead. */

:root {
  /* Color */
  --color-text: #1d1d1f;            /* primary body + headings */
  --color-text-secondary: #5f5f66;  /* nav links, footer links */
  --color-text-muted: #3c3c43;      /* dense card copy */
  --color-meta: #747478;            /* "Last updated" line; darkened from the
                                       design's #8e8e93 (3.26:1) to pass WCAG
                                       AA on white (4.65:1) — 2026-08-14 */
  --color-brand: #5d5cde;           /* links, primary buttons */
  --color-link-hover: #4a49c4;      /* link + nav hover */
  --color-button-hover: #403fb0;    /* button hover */
  --color-bg: #ffffff;
  --color-surface-muted: #f7f7f8;   /* app cards on Get Poe */
  --border-hairline: rgba(0, 0, 0, 0.07);
  --border-card: rgba(0, 0, 0, 0.1);
  --border-soft: rgba(0, 0, 0, 0.05);

  /* Type */
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fs-h1: 34px;
  --fs-h2: 23px;
  --fs-h3: 17px;
  --fs-body: 16px;
  --fs-meta: 14px;
  --lh-body: 1.65;

  /* Layout */
  --maxw-doc: 720px;    /* legal / document column */
  --maxw-chrome: 1100px; /* header + footer container */
  --maxw-wide: 1240px;  /* Get Poe and other wide pages */
  --header-height: 60px;
}