/* ============================================================
   Design tokens
   ------------------------------------------------------------
   Single source of truth for colour, type, and layout values.
   Every component reads from these custom properties — changing
   a token here updates the entire site.
   ============================================================ */

:root {
  /* Surfaces & ink */
  --paper:    #faf9f6;   /* page background */
  --paper-2:  #f1efe9;   /* recessed surfaces (project cards) */
  --ink:      #0a0a0a;   /* primary text, borders */
  --ink-2:    #2a2a2a;   /* body copy, secondary text */
  --muted:    #8a8884;   /* labels, eyebrows, meta */
  --hair:     #d8d4ca;   /* hairline dividers */

  /* Typography */
  --serif:    "Times New Roman", Times, serif;

  /* Layout */
  --maxw:     480px;     /* content max-width (mobile-first) */
  --gutter:   24px;      /* horizontal page padding */

  /* Motion */
  --ease:     cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 720px) {
  :root {
    --maxw: 640px;
  }
}