/*
  Stroll & Savor — Website Style Guide (Field Notes v1.0)
  Derived from brand/stroll-savor-ci-guide.html — that guide is the source
  of truth. If this file and the guide ever disagree, the guide wins.

  Font files referenced below live in brand/fonts/ (extracted from the
  guide's embedded base64). Copy that folder into the website project and
  adjust the url() paths to match, or swap in the equivalent Google Fonts
  @import if self-hosting isn't set up yet:
    IBM Plex Sans   400/600  — fonts.google.com/specimen/IBM+Plex+Sans
    Space Mono      400      — fonts.google.com/specimen/Space+Mono
    Courier Prime   700      — fonts.google.com/specimen/Courier+Prime
*/

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('./fonts/ibm-plex-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('./fonts/ibm-plex-sans-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('./fonts/space-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Courier Prime';
  src: url('./fonts/courier-prime-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* ---- Color — five tokens, no exceptions (CI guide §03) ---- */
  --paper: #f1f0ea;      /* base ground for nearly everything */
  --paper-2: #faf9f5;    /* raised surface — cards, table headers */
  --ink: #2e2e2c;        /* primary text, wordmark default, dark-inversion bg */
  --ink-soft: #6d6a5f;   /* secondary/muted text */
  --rule: #d7d5c8;       /* hairlines, dividers, dot-grid — never a text color */

  --rust: #b4552f;       /* the one accent — large type / graphics only */
  --rust-soft: #e0a583;
  --rust-text: #994827;  /* text-safe rust, 5.6:1 on paper — use below ~18px */

  --teal: #3e7c74;       /* secondary data color — large type / graphics only */
  --teal-text: #346962;  /* text-safe teal, 5.5:1 on paper — use below ~18px */

  /* ---- Type ---- */
  --font-display: 'Courier Prime', ui-monospace, 'Courier New', monospace;
  --font-body: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --font-data: 'Space Mono', ui-monospace, 'Courier New', monospace;

  /* Scale (CI guide §04) — clamp() min/max drawn from the guide's px ranges */
  --text-h1: clamp(2rem, 1.5rem + 2vw, 3rem);       /* 32–48px */
  --text-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);   /* 24–32px */
  --text-subhead: clamp(0.94rem, 0.9rem + 0.2vw, 1.06rem); /* 15–17px */
  --text-body: 1rem;                                 /* 15–16px */
  --text-data-sm: 0.7rem;                             /* 11px-ish, tags/labels */
  --text-data-lg: 1.1rem;                             /* up to ~18px */

  /* ---- Texture (CI guide §05) ---- */
  --dot-grid-size: 17px;                 /* midpoint of 16–18px spacing */
  --dot-grid-color: rgba(46, 46, 44, 0.08);
}

/* ---- Base ---- */
* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(circle, var(--dot-grid-color) 1px, transparent 1px);
  background-size: var(--dot-grid-size) var(--dot-grid-size);
}

h1, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0 0 1rem;
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }

h3, h4, .subhead {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-subhead);
  margin: 0 0 0.7rem;
}

p, body, li {
  font-size: var(--text-body);
  line-height: 1.65;
}
p { color: var(--ink-soft); max-width: 68ch; margin: 0 0 1rem; }
p b, p strong { color: var(--ink); font-weight: 600; }

a {
  color: var(--teal-text);
  text-decoration-color: var(--rule);
  text-underline-offset: 0.15em;
}
a:hover { color: var(--teal); }

/* Data / label — miles, taxes, dates, percentages, tags, section numbers.
   Always the text-safe pair below ~18px per the CI guide's AA contrast note. */
.data, .mono {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
}
.eyebrow, .tag, .sec-num {
  font-family: var(--font-data);
  font-size: var(--text-data-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ---- Color utility classes ---- */
.text-rust { color: var(--rust-text); }   /* small text: tags, eyebrows, labels */
.text-teal { color: var(--teal-text); }   /* small text: secondary data, links */
.fill-rust { color: var(--rust); }        /* large type / graphics only (headline, ampersand) */
.fill-teal { color: var(--teal); }        /* large type / graphics only */

/* Paper-on-ink is the only sanctioned inversion (CI guide §03) —
   reserve for dark UI moments (splash states, video end cards).
   Do not invert to rust or teal backgrounds. */
.invert {
  background: var(--ink);
  color: var(--paper);
}
.invert p { color: var(--paper); opacity: 0.75; }

/* ---- Texture motifs (CI guide §05) ---- */

/* Dashed divider — separates a headline from its data. Never decorative. */
.divider-dashed {
  border: none;
  border-top: 2px dashed var(--rust);
  margin: 1.5rem 0;
}

/* Card / raised surface */
.card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1.2rem 1.4rem;
}

/* Route line motif — use as inline SVG, always rust, always tracing an
   actual route/journey, never a generic decorative squiggle:
   <svg viewBox="0 0 90 30">
     <path d="M4 15 C25 15 20 25 45 15 C65 7 70 20 86 15"
           fill="none" stroke="var(--rust)" stroke-width="2.4"
           stroke-linecap="round" stroke-dasharray="0.2 5"/>
   </svg>
*/