/* Avian Designs — design tokens.
   Source of truth: design handoff README §Design tokens (exact hex values).
   These are the ONLY colours the site may use. Do not add colour tokens. */

:root {
  /* ---- colour ---- */
  --paper: #F8F8F7;            /* page ground */
  --mist: #E9EFEE;             /* section fills, image placeholders */
  --line: #DDE2E2;             /* rules, card borders */
  --line-strong: #C8D0D0;      /* inputs, outline buttons */
  --stripe: #E1E8E7;           /* placeholder hatching */
  --turquoise: #14867C;        /* primary — buttons, links, active states */
  --turquoise-dark: #0E6A62;   /* hover, date meta on highlighted cards */
  --aqua: #57BFB3;             /* accent — highlight borders */
  --aqua-light: #6FCFC3;       /* accent on dark grounds */
  --turquoise-tint: #E2F0EE;   /* highlight fill, ghost-button hover */
  --ink: #2B3134;              /* dark bands, CTA tile */
  --ink-well: #22282A;         /* input fill on the Ink band */
  --ink-border: #414849;       /* input border on the Ink band */
  --ink-line: #454C4F;         /* rules / link underlines on the Ink band */
  --body: #3A4145;             /* body copy */
  --body-soft: #464D50;        /* secondary copy */
  --body-softer: #5A6265;      /* secondary copy, quieter */
  --meta: #6E777A;             /* mono meta */
  --meta-faint: #8C9497;       /* disabled, placeholder marks */
  --meta-placeholder: #646D70; /* placeholder-tile labels */
  --on-dark: #EEF1F1;          /* text on Ink */
  --on-dark-soft: #C3CACB;     /* secondary text on Ink */
  --shop-hover: #EEF3F2;       /* stockist card hover fill */
  --danger: #B23A32;           /* destructive actions — admin only, unused in v1 */

  /* ---- band grounds (Wave 3 redesign) ----
     The page alternates light and saturated bands instead of hairline rules:
     banner / header / hero / events / collection / stockists / giving / about / footer. */
  --band-hero: #EEF3F2;        /* hero ground, pale turquoise */
  --band-teal: #0E6A62;        /* events ground (same value as --turquoise-dark) */
  --band-teal-deep: #0A544E;   /* meta on teal, button hover */
  --band-aqua-tint: #DCE9E7;   /* stockists ground */
  --banner-fill: #6FCFC3;      /* sale banner — the brightest thing on the page */
  --banner-ink: #0A3E39;       /* sale banner headline */
  --banner-ink-soft: #10514A;  /* sale banner body */
  --white: #FFFFFF;            /* cards sitting on a coloured band */
  --on-teal-soft: #C0DFDA;     /* caption on the teal band */
  --on-aqua-soft: #4E6663;     /* caption on the aqua-tint band */
  --nav-link: #E4E8E8;         /* nav text on the dark header */
  --header-meta: #9BA3A5;      /* "LONGMONT, COLORADO" on the dark header */
  --carousel-ground: #DCE6E4;  /* hero carousel stage */
  --hairline-grid: #CFDCDA;    /* 1px grid behind the hero stat cells */
  --card-rule: #E4EAE9;        /* rule inside a stockist card */
  --map-border: #D2DEDA;       /* map thumbnail border */
  --map-ground: #E4EDE9;       /* map thumbnail fill */
  --body-quiet: #6C7476;       /* town lines on cards */
  --shadow-card: 0 12px 28px rgba(6, 52, 48, 0.24);   /* next-event card on teal */
  --shadow-lift: 0 10px 24px rgba(14, 106, 98, 0.14); /* stockist card hover */

  /* ---- type ---- */
  --font-display: 'Eryx Rennie Macintosh', 'Eryx fallback', Karla, serif;
  --font-text: Karla, system-ui, sans-serif;
  --font-meta: 'IBM Plex Mono', monospace;

  /* Wave 3 scale-up. The new mock runs ~8% larger than the v1 README's prose
     numbers; the design file wins on appearance, and larger is the house
     preference. Declared here once — sections must use these tokens rather
     than hardcoding a clamp(). */
  --size-display: clamp(42px, 7vw, 84px);     /* h1, line-height 1.03 */
  --size-section: clamp(30px, 3.8vw, 46px);   /* h2, line-height 1.2 */
  --size-section-sm: clamp(26px, 3.2vw, 38px); /* giving-band h2 */
  --size-card-title: 24px;                    /* event card title */
  --size-lead: clamp(18px, 1.5vw, 22px);      /* line-height 1.55 */

  /* Section rhythm — also from the new mock. */
  --pad-band: clamp(48px, 6vw, 84px) 5vw;     /* collection, about */
  --pad-band-tight: clamp(44px, 5.5vw, 76px) 5vw; /* events, stockists */
  --gap-hero: clamp(28px, 4vw, 56px);
  --pad-hero: clamp(36px, 4.5vw, 64px) 5vw;
  --size-body-lg: 17px;                        /* line-height 1.65 */
  --size-body: 16px;                           /* line-height 1.65 */
  --size-ui: 15px;
  --size-meta: 12px;
  --size-meta-sm: 11px;

  /* ---- spacing (8px scale) ---- */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-5: 40px;
  --s-8: 64px;
  --s-11: 88px;
  --pad-x: 5vw;                                /* side padding is always 5vw */
  --pad-section: clamp(48px, 6vw, 80px) 5vw;
}

/* Display face — self-hosted, 22 KB. Do not subset, do not substitute.
   NEVER apply text-transform where this face is used: upper and lowercase have
   distinct glyph designs but identical advance widths, so a transform changes
   letterforms without changing layout. Heading strings are stored verbatim. */
@font-face {
  font-family: 'Eryx Rennie Macintosh';
  src: url('/fonts/eryx.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Eryx fallback';
  src: local('Karla'), local('Arial');
  size-adjust: 93.3%;
  ascent-override: 103.4%;
  descent-override: 26.0%;
}