/* ============================================================
   TFG* Tech for Good — Design Tokens
   Source of truth: Claude Design "TFG Website.dc.html"
   Every value here is taken verbatim from the design.
   ============================================================ */

:root {
  /* -- Color: light surfaces -- */
  --color-bg: #f5f1e8;            /* page background / cream */
  --color-bg-alt: #eee8da;        /* offerings section, slider control bar */
  --color-ink: #141210;           /* near-black ink, borders, dark sections */
  --color-body: #4b463d;          /* body copy on light */
  --color-muted: #6d675c;         /* mono labels, secondary text */

  /* -- Color: accent -- */
  --color-accent: #d15f12;        /* burnt orange */
  --color-accent-deep: #a34a0e;   /* person-card quotes */

  /* -- Color: on dark (manifesto / testimonials) -- */
  --color-dark-text: #f0ebe0;
  --color-dark-serif: #efe9db;
  --color-dark-muted: #b3ab99;
  --color-dark-muted-2: #9b937f;

  /* -- Color: on accent (contact) -- */
  --color-contact-text: #fdf6ec;
  --color-contact-soft: #fbe4cd;
  --color-contact-faint: #f7d9be;

  /* -- Color: translucent borders -- */
  --border-ink-30: rgba(20, 18, 16, .3);
  --border-ink-25: rgba(20, 18, 16, .25);
  --border-ink-20: rgba(20, 18, 16, .2);
  --border-accent-40: rgba(209, 95, 18, .4);
  --border-contact-50: rgba(253, 246, 236, .5);
  --border-contact-35: rgba(253, 246, 236, .35);

  /* -- Texture: image placeholder hatch -- */
  --hatch: repeating-linear-gradient(135deg, #e7e0d1 0 9px, #ded6c4 9px 18px);

  /* -- Typography -- */
  --font-sans: 'Space Grotesk', sans-serif;
  --font-serif: 'Spectral', serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* -- Structure -- */
  --container: 1160px;
  --container-narrow: 900px;
  --border-heavy: 2px solid var(--color-ink);

  /* -- Rhythm (section padding) -- */
  --pad-section: clamp(48px, 7vw, 88px);
  --pad-section-tall: clamp(64px, 9vw, 120px);
  --pad-x: 20px;
}