/* 817running.com — design tokens
 * Canonical source for color, type and spacing. Import this once, globally.
 * Every other stylesheet references these variables; no raw hex anywhere else.
 */

:root {
  /* ---- Color ---------------------------------------------------------- */
  --paper:        #F2EDE1;  /* page ground */
  --paper-panel:  #FBF8F1;  /* raised panels, alternating rows, tab bar */
  --image-well:   #E6DECB;  /* placeholder fill behind images while loading */

  --ink:          #1A1815;  /* body and display text, all borders */
  --ink-body:     #2E2B25;  /* long-form prose */
  --ink-muted:    #5C574D;  /* metadata, captions — AA on --paper */

  --rule:         #CFC6B2;  /* container hairlines */
  --rule-soft:    #DCD3BF;  /* row dividers */
  --rule-faint:   #E4DBC6;  /* dividers inside panels */

  --ochre:        #8A5D12;  /* links, drive times, active tab marker */
  --ochre-hover:  #6B470C;
  --river:        #2C5A4B;  /* reserved: trail content, map accents */

  /* ---- Type ----------------------------------------------------------- */
  --font-display: 'Libre Caslon Display', Georgia, 'Times New Roman', serif;
  --font-prose:   'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --font-ui:      'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-data:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* Phone-first scale. Desktop overrides are in the media query below. */
  --t-h1:   31px;  --lh-h1:   1.08;
  --t-h2:   21px;  --lh-h2:   1.15;
  --t-h3:   18px;  --lh-h3:   1.20;
  --t-body: 16px;  --lh-body: 1.60;
  --t-ui:   15px;  --lh-ui:   1.45;
  --t-sm:   13px;  --lh-sm:   1.40;
  --t-data: 11px;  --lh-data: 1.35;  --tr-data: 0.05em;

  /* ---- Space (8px rhythm) --------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  --gutter: var(--s-4);     /* horizontal page margin, phone */
  --measure: 68ch;          /* max prose line length */

  /* ---- Structure ------------------------------------------------------ */
  --border: 1px solid var(--ink);
  --hairline: 1px solid var(--rule-soft);
  --radius: 0;              /* this design has no rounded corners */
  --tap: 44px;              /* minimum touch target */
  --tabbar-h: 56px;
}

@media (min-width: 900px) {
  :root {
    --t-h1:   46px;  --lh-h1:   1.06;
    --t-h2:   29px;
    --t-h3:   22px;
    --t-body: 18px;  --lh-body: 1.70;
    --t-ui:   16px;
    --t-sm:   14px;
    --t-data: 13px;
    --gutter: 56px;
  }
}

/* ---- Fonts ------------------------------------------------------------
 * Self-hosted, latin subset, committed to the repo. Not loaded from a CDN:
 * _headers sets font-src 'self', so a third-party font URL is blocked in
 * production rather than merely discouraged.
 *
 * IBM Plex Sans is one variable file covering 400-500. Google serves the
 * identical file for both weights, so shipping two would download 45KB twice.
 *
 * font-display: swap on every face — text renders in the fallback
 * immediately and reflows once, rather than blocking on the download.
 * Paths are relative to this stylesheet, so they resolve both when served
 * (/assets/fonts/...) and when the reference mockup is opened over file://.
 * Licenses: assets/fonts/LICENSES.txt
 */

@font-face {
  font-family: 'Libre Caslon Display';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/libre-caslon-display-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/libre-caslon-text-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/libre-caslon-text-400i.woff2') format('woff2');
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/libre-caslon-text-700.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal; font-weight: 400 500; font-display: swap;
  src: url('fonts/ibm-plex-sans-var.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/ibm-plex-mono-400.woff2') format('woff2');
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}