/* ========================================================================
   MD MTB Trail Crew — design tokens
   Single source of truth for colour, type, spacing, layout.
   Imported by site/assets/css/site.css and inlined into the status widget.
   Do not hard-code hex values or font names anywhere else in the site.
   ======================================================================== */

:root {
  /* ------------ colour ------------ */
  /* Primary brand palette — derived from the MD MTB Figma file */
  --md-teal-700:  #2F5662;
  --md-teal-500:  #416F7D;          /* primary brand teal (carrd page bg) */
  --md-teal-200:  #B7CCD2;
  --md-green-700: #145C2A;
  --md-green-600: #1F7A3A;          /* primary CTA */
  --md-green-500: #2A9B4C;
  --md-ink:       #132624;          /* near-black, slight green */
  --md-bone:      #F5F2EA;          /* warm off-white surface */
  --md-paper:     #FFFFFF;
  --md-stone-300: #D6D2C7;
  --md-stone-500: #6E6E68;

  /* Status pill colours — match widget data contract */
  --md-status-open:       #10B981;
  --md-status-restricted: #F59E0B;
  --md-status-closed:     #EF4444;
  --md-status-text:       #FFFFFF;

  /* ------------ type ------------ */
  --md-font-display: 'Archivo', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --md-font-body:    'Inter',   system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --md-font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  --md-text-xs:   0.75rem;   /* 12 */
  --md-text-sm:   0.8125rem; /* 13 */
  --md-text-base: 1rem;      /* 16 */
  --md-text-md:   1.125rem;  /* 18 */
  --md-text-lg:   1.5rem;    /* 24 */
  --md-text-xl:   2rem;      /* 32 */
  --md-text-2xl:  2.75rem;   /* 44 */
  --md-text-3xl:  4rem;      /* 64 */
  --md-text-4xl:  5.5rem;    /* 88 — hero only */

  --md-tracking-tight: -0.02em;
  --md-tracking-base:   0;
  --md-tracking-wide:   0.08em;
  --md-tracking-caps:   0.16em;

  /* ------------ spacing (4 / 8 / 16 / 24 / 40 / 64 / 96 / 144) ------------ */
  --md-s-1: 0.25rem;
  --md-s-2: 0.5rem;
  --md-s-3: 1rem;
  --md-s-4: 1.5rem;
  --md-s-5: 2.5rem;
  --md-s-6: 4rem;
  --md-s-7: 6rem;
  --md-s-8: 9rem;

  /* ------------ layout ------------ */
  --md-max:           1080px;
  --md-max-narrow:    720px;
  --md-radius-sm:     4px;
  --md-radius-md:     8px;
  --md-radius-lg:     16px;
  --md-radius-pill:   999px;

  --md-shadow-sm:  0 1px 2px rgba(19, 38, 36, 0.06);
  --md-shadow-md:  0 4px 16px rgba(19, 38, 36, 0.10);
  --md-shadow-lg:  0 12px 40px rgba(19, 38, 36, 0.18);

  /* ------------ motion ------------ */
  --md-ease:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --md-dur-fast:    150ms;
  --md-dur-base:    250ms;
}

/* ------------ self-hosted fonts ------------
   Single variable WOFF2 per family (Latin subset). Paths are relative to
   this CSS file so the site works at any deploy depth (root domain or /p/...). */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/archivo-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var.woff2') format('woff2');
}