/* Dunlap Collective design tokens.
   Every colour, font, size, space, radius and motion value on the site lives here.
   Change a value here and the whole site moves. Source: DESIGN DNA v2 (2026-10-01). */
:root {
  /* Colour */
  --c-canvas: #f7f7f3;          /* page background */
  --c-surface-soft: #eeefea;    /* soft section surface */
  --c-surface-raised: #fcfcfa;  /* raised card */
  --c-hairline: #e2e4de;        /* hairlines, photo placeholders */
  --c-ink: #121714;             /* text */
  --c-muted: #59605b;           /* secondary text */
  --c-accent: #2e7d4f;          /* racing green: primary button, key word, proof numbers */
  --c-accent-tint: #e4efe7;     /* small highlight surfaces only */
  --c-band: #0f1411;            /* the one dark band per page */
  --c-band-ink: #eef1ee;        /* text on the dark band */

  /* Depth (ink and band colour at low alpha, never a new hue) */
  --shadow-raised: 0 12px 40px rgb(18 23 20 / 0.07);
  --shadow-bar: 0 -12px 40px rgb(18 23 20 / 0.07);
  --fade-photo: linear-gradient(180deg, rgb(15 20 17 / 0) 0%, rgb(15 20 17 / 0.6) 100%);

  /* Type families */
  --font-display: 'Archivo', sans-serif;
  --font-body: 'Hanken Grotesk', sans-serif;
  --display-width: 75%;
  --display-track: -0.025em;

  /* Type scale: ratio 1.333 from 16px, phone size to desktop size (390px to 1280px viewport).
     Exception: --fs-lead-hero tops out at 32px (owner's pick, 2026-10-01). */
  --fs-xl: clamp(3.125rem, 1.208rem + 7.865vw, 7.5rem);       /* 50 to 120 */
  --fs-l: clamp(2.375rem, 1.581rem + 3.258vw, 4.1875rem);     /* 38 to 67 */
  --fs-m: clamp(2.375rem, 2.046rem + 1.348vw, 3.125rem);      /* 38 to 50 */
  --fs-lead-hero: clamp(1.3125rem, 1.011rem + 1.236vw, 2rem); /* 21 to 32 */
  --fs-lead: clamp(1.3125rem, 1.121rem + 0.787vw, 1.75rem);   /* 21 to 28 */
  --fs-body-l: clamp(1rem, 0.863rem + 0.562vw, 1.3125rem);    /* 16 to 21 */
  --fs-body: 1rem;                                            /* 16 */
  --fs-caption: 0.75rem;                                      /* 12 */

  --lh-xl: 0.94;
  --lh-display: 1.02;
  --lh-lead: 1.35;
  --lh-body: 1.6;

  /* Space */
  --gutter: 20px;
  --max: 1200px;
  --space-section: clamp(7rem, 5.248rem + 7.19vw, 11rem);     /* 112 to 176 */
  --space-group: clamp(1.75rem, 1.2rem + 2.2vw, 3.5rem);      /* 28 to 56 */
  --space-tight: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);         /* 16 to 24 */

  /* Shape */
  --r-frame: 20px;   /* images and cards */
  --r-control: 12px; /* buttons and inputs, never a pill */

  /* Touch */
  --tap: 44px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-enter: 800ms;
  --dur-state: 250ms;
}

@media (min-width: 900px) {
  :root { --gutter: 40px; }
}