/* ==========================================================================
   Fern & Fable, Design Tokens (single source of truth)
   Direction: editorial "herbarium", bone paper, pressed-leaf green,
   one burnt-terracotta accent. All reading pairs verified WCAG AA+.
   ========================================================================== */

:root {
  /* ---- Color ---------------------------------------------------------- */
  --color-bg: #F7F3EA;          /* bone / warm paper, page background        */
  --color-surface: #FFFFFF;     /* cards, panels                              */
  --color-surface-alt: #ECE6D6; /* muted-paper alternating band              */
  --color-ink: #232A22;         /* primary text (>12:1 on bg, AAA)           */
  --color-ink-muted: #4E5A48;   /* captions / labels / meta (6.6:1 on bg)    */
  --color-green: #2E4230;       /* deep pressed-leaf green, dark sections    */
  --color-sage: #8CA07E;        /* decorative rules, line art, hover tints    */
  --color-terracotta: #9E4A2A;  /* single accent, links, CTAs (5.47:1 bg)    */
  --color-terracotta-dark: #843C22; /* pressed accent, button :hover          */
  --color-clay: #C98A5E;        /* large decorative fills / illustration only */
  --color-border: #D8CFBC;      /* hairline paper border                      */
  --color-cream: #FBF6EC;       /* text on green / terracotta (5.63:1+)       */
  --color-field-border: #8A8168;/* form inputs, 3:1+ non-text contrast        */

  /* Semantic status (not the accent: these only ever signal form state)      */
  --color-error: #A32E1C;       /* 6.4:1 on bone, AA                          */
  --color-ok: #2F6B44;          /* 5.9:1 on bone, AA                          */

  /* ---- Typography ----------------------------------------------------- */
  --font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, Segoe UI, sans-serif;

  --step-eyebrow: 0.75rem;
  --step-small: 0.9375rem;
  --step-body: 1.125rem;
  --step-lead: clamp(1.2rem, 1.6vw, 1.3125rem);
  --step-h4: 1.5rem;
  --step-h3: clamp(1.75rem, 2.4vw, 2rem);
  --step-h2: clamp(2.25rem, 4vw, 3rem);
  --step-h1: clamp(2.75rem, 5vw, 4rem);
  --step-hero: clamp(2.75rem, 7.5vw, 5.5rem);

  --leading-body: 1.6;
  --leading-tight: 1.02;
  --measure: 66ch;
  --tracking-eyebrow: 0.16em;

  /* ---- Spacing (8px base grid) --------------------------------------- */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;
  --space-5xl: 160px;

  --section-pad: clamp(96px, 12vw, 160px);
  --container: 1200px;
  --gutter: clamp(24px, 5vw, 80px);

  /* ---- Radius --------------------------------------------------------- */
  --radius-sm: 4px;   /* inputs, chips        */
  --radius-md: 8px;   /* cards, mounted plates */
  --radius-lg: 16px;  /* feature panels        */
  --radius-torn: 18px 26px 16px 30px; /* hand-wrapped images */

  /* ---- Shadow (soft, paper-like) ------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(35, 42, 34, 0.05);
  --shadow-md: 0 8px 24px -12px rgba(35, 42, 34, 0.14);
  --shadow-lg: 0 24px 60px -28px rgba(35, 42, 34, 0.20);

  /* ---- Motion --------------------------------------------------------- */
  --dur-reveal: 0.7s;
  --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-hover: 160ms;
  --ease-hover: ease-out;
}