/* PretzelPort brand tokens */
:root {
  --pp-ink: #23272a;        /* primary text, dark surfaces */
  --pp-ink-soft: #5c6163;   /* secondary text */
  --pp-ink-faint: #74787a;  /* captions, labels */
  --pp-paper: #f6f6f4;      /* card / content background */
  --pp-canvas: #e6e7e4;     /* page background */
  --pp-border: #d3d5d2;     /* hairlines, dividers */
  --pp-teal: #2e7d74;       /* accent: links, "Port", mark */
  --pp-teal-deep: #1f5952;  /* accent hover / active */
  --pp-teal-bright: #5eb0a6;/* accent on dark surfaces only */
  --pp-terracotta: #C8563E;        /* mark's second link, graphic accents */
  --pp-terracotta-deep: #B94A33;   /* small text / fine graphics on paper (AA) */
  --pp-terracotta-bright: #E58A70; /* on ink or darker surfaces only */
  --pp-terracotta-tint: #FBEEEA;   /* background tint */
}
/* Usage: teal is a dose, not a theme — links, the mark, one highlight
   per view. Body text is always ink on paper. Large fills use ink or
   paper, never teal. Minimum lockup width 120px; below that use the
   mark alone. Clearspace: one ring-width on all sides. */
a { color: var(--pp-teal); }
a:hover { color: var(--pp-teal-deep); }
/* Terracotta is identity and outcomes. Teal is the system and every action.
   MAY: the mark's second link; eyebrow / section labels (deep only); the
   "after" side of a comparison; background tints; a highlight rule under one
   or two words of a headline, at most once per page.
   MUST NOT: buttons or links, ever (warm reds read as error/destructive);
   body copy at any value; large fills; anything blended or gradiented with
   teal. One warm moment per view. Never terracotta on teal, or teal on
   terracotta. */