/* ============================================================
   Your/Agency — Design tokens (from the Artha deck)
   Single source of truth for colour, type, spacing, motion.
   ============================================================ */

:root {
  /* ---- Colour ---- */
  --paper:      #F4EEE3; /* primary background */
  --paper-2:    #ECE3D4; /* cards / alt surfaces */
  --ink:        #241F1A; /* text + dark sections */
  --ink-2:      #332C25;
  --ink-soft:   #6F6457; /* muted body text */
  --cream-soft: #C9BEAD; /* muted text on dark */
  --clay:       #D4682F; /* accent: kickers/rules/emphasis, esp. on dark (brighter, less rusty) */
  --clay-deep:  #A8481F; /* small text + links on paper, button fill (AA on paper) */
  --clay-press: #8C3B17; /* button hover / pressed */
  --sage:       #6E7A5C; /* green — secondary accent (now used throughout) */
  --sage-lt:    #8C9778; /* green on dark surfaces */
  --sage-deep:  #4F5A40; /* green small text on paper (AA) */
  --line-d:     rgba(36, 31, 26, .13);  /* hairline on light */
  --line-l:     rgba(244, 238, 227, .15); /* hairline on dark */

  /* ---- Type ---- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --title:  clamp(2.2rem, 5.4vw, 4.4rem);
  --h2:     clamp(1.5rem, 3.5vw, 2.6rem);
  --h3:     clamp(1.15rem, 1.8vw, 1.375rem);
  --body:   clamp(1rem, 1.4vw, 1.125rem);
  --small:  clamp(.72rem, 1vw, .875rem);

  /* ---- Layout ---- */
  --container: 1200px;
  --measure:   68ch;      /* reading column */
  --measure-n: 40ch;      /* narrow reading column */
  --radius:    7px;
  --radius-lg: 12px;

  /* ---- Spacing ---- */
  --gap:        clamp(1rem, 2vw, 1.5rem);
  --section-y:  clamp(4.5rem, 9vw, 8rem);
  --pad-x:      clamp(1.25rem, 5vw, 3rem);
  --header-h:   72px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur:  .5s;

  /* ---- Elevation ---- */
  --shadow:    0 1px 2px rgba(36, 31, 26, .06), 0 8px 24px rgba(36, 31, 26, .06);
  --shadow-sm: 0 1px 2px rgba(36, 31, 26, .06), 0 2px 8px rgba(36, 31, 26, .05);
}