/* Trigon Media design tokens. Single source of truth for colour, type, space, shape and motion. */
:root {
  /* Colour */
  --ivory: #F5F1EA;      /* page background */
  --sand: #EAE3D6;       /* alternate section background */
  --sand-deep: #E3DCCF;  /* image placeholder fill */
  --rule: #DDD5C6;       /* hairlines on light */
  --ink: #14151A;        /* text, dark sections, primary dark buttons */
  --ink-2: #4A4D55;      /* secondary text */
  --ink-line: #2E3038;   /* hairlines on dark */
  --stone: #CFCBC2;      /* body text on dark */
  --brick: #B8341A;      /* the single accent */
  --brick-soft: #FF8B6B; /* accent on dark backgrounds only */
  --blush: #FFE8E0;      /* body text on brick, note panels */
  --white: #FFFFFF;      /* cards */

  /* Type */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-h1: 64px;          /* homepage hero uses 72px */
  --fs-h1-home: 72px;
  --fs-h2: 52px;
  --fs-h3-service: 32px;
  --fs-h3-card: 28px;
  --fs-lead: 20px;
  --fs-body: 17px;
  --fs-card: 16px;
  --fs-small: 15px;
  --fs-eyebrow: 13px;

  /* Layout */
  --container: 1240px;
  --gutter: 40px;
  --gutter-s: 16px;
  --section-y: 96px;      /* homepage sections use 120px */
  --section-y-home: 120px;
  --gap: 24px;

  /* Shape */
  --r-card: 24px;
  --r-tile: 20px;
  --r-step: 20px;
  --r-band: 32px;
  --r-pill: 999px;
  --r-arch: 240px 240px 24px 24px;

  /* Elevation */
  --shadow-hero: 0 30px 60px rgba(20, 21, 26, .16);
  --shadow-float: 0 14px 34px rgba(20, 21, 26, .14);
  --shadow-hover: 0 18px 40px rgba(20, 21, 26, .12);

  /* Motion */
  --lift-btn: translateY(-2px);
  --lift-card: translateY(-4px);
  --zoom-img: scale(1.04);
}

@media (max-width: 640px) {
  :root { --fs-h1: 44px; --fs-h1-home: 44px; --fs-h2: 34px; --gutter: 16px; }
}