/* ============================================================================
   FranklinWhat — "The Almanac" design system
   base.css — tokens, typography, layout primitives, utilities
   A warm local field-guide aesthetic. Emerald held; warm paper + ink neutrals.
   ============================================================================ */

/* ── CLS fix: fallback-font matching ─────────────────────────────
 * Three @font-face declarations that paint the local system font with
 * adjusted metrics (size, ascent, line-height) so it occupies the SAME
 * visible box as the Google Font that replaces it on swap. Without this
 * Newsreader/Hanken Grotesk swap causes a 0.2+ CLS spike on mobile.
 * Values calibrated to typical Times/Arial/Courier metrics on Mac+Win;
 * within 1-2px of the actual web font box. */
@font-face {
  font-family: 'Newsreader Fallback';
  src: local('Times New Roman'), local('Times');
  size-adjust: 105%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Hanken Grotesk Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Spline Sans Mono Fallback';
  src: local('Menlo'), local('Consolas'), local('Courier New');
  size-adjust: 96%;
  ascent-override: 88%;
  descent-override: 23%;
  line-gap-override: 0%;
}

:root {
  /* ---- Brand: emerald (held exactly per brand) ---- */
  --emerald-50:  #ecfdf5;
  --emerald-100: #d1fae5;
  --emerald-200: #a7f3d0;
  --emerald-500: #059669;   /* primary — the green */
  --emerald-600: #047857;   /* hover */
  --emerald-700: #036249;
  --color-primary:       #059669;
  --color-primary-hover: #047857;
  /* Use for small body-text in emerald — passes WCAG AA on warm paper.
   * Brand surface uses --color-primary unchanged.  See PITFALLS / WCAG. */
  --color-primary-text:  #036249;

  /* ---- Pine (deep green) — for dark sections, footer, depth ---- */
  --pine-900: #0b2e22;
  --pine-800: #0e3a2b;
  --pine-700: #134e38;

  /* ---- Clay / warmth — Local Tip, community, childcare highlight ---- */
  --clay-50:  #fdf3ec;
  --clay-100: #f9e3d2;
  --clay-500: #c2632f;
  --clay-600: #a64f22;
  --clay-700: #8a3f1b;

  /* ---- Gold — free / sunshine accents ---- */
  --gold-100: #f7eccf;
  --gold-500: #c9952b;
  --gold-600: #a87a1f;
  /* Darker gold for text on gold-100 — clears WCAG AA (gold-600 reads at
   * 3.26:1 which is too low for marker text). */
  --gold-700: #7a5710;

  /* ---- River blue — water / waterfalls / map ---- */
  --river-100: #d8ecf2;
  --river-500: #2f7e96;
  --river-600: #246173;

  /* ---- Warm neutrals (paper + ink) ---- */
  --paper:        #faf6ee;  /* page background — warm oat */
  --paper-sunk:   #f3ede1;  /* recessed wells */
  --surface:      #fffdf8;  /* cards */
  --surface-2:    #fbf7ef;
  --ink:          #221f1a;  /* warm near-black text */
  --ink-2:        #5c5347;  /* secondary text — warm taupe */
  --ink-3:        #6b6354;  /* tertiary / metadata — darkened from #8a8073 to clear WCAG AA on warm paper */
  --ink-3-soft:   #8a8073;  /* original tone, kept for non-text uses (divider hints) */
  --line:         #e7ded0;  /* warm hairline borders */
  --line-strong:  #d7cbb6;

  /* ---- Semantic ---- */
  --color-bg:        var(--paper);
  --color-surface:   var(--surface);
  --color-text:      var(--ink);
  --color-text-2:    var(--ink-2);
  --color-text-3:    var(--ink-3);
  --color-border:    var(--line);
  --color-border-2:  var(--line-strong);

  /* ---- Type ----
   * Fallback families paint with size/ascent-adjusted metrics so the
   * Google Font swap doesn't trigger CLS. See @font-face decls above. */
  --font-display: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif;
  --font-sans: "Hanken Grotesk", "Hanken Grotesk Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Spline Sans Mono", "Spline Sans Mono Fallback", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* fluid type scale */
  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 0.9375rem;
  --t-md:   1.0625rem;
  --t-lg:   1.25rem;
  --t-xl:   1.5rem;
  --t-2xl:  clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem);
  --t-3xl:  clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --t-4xl:  clamp(2.6rem, 1.6rem + 4.2vw, 4.4rem);

  /* ---- Spacing (8pt-ish) ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* ---- Radii ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---- Shadows (warm-tinted, soft) ---- */
  --sh-xs: 0 1px 2px rgba(60, 45, 25, 0.06);
  --sh-sm: 0 1px 3px rgba(60, 45, 25, 0.08), 0 1px 2px rgba(60, 45, 25, 0.05);
  --sh-md: 0 6px 16px -6px rgba(60, 45, 25, 0.14), 0 2px 6px -2px rgba(60, 45, 25, 0.08);
  --sh-lg: 0 18px 40px -16px rgba(45, 35, 18, 0.22), 0 6px 14px -8px rgba(45, 35, 18, 0.12);

  --ring: 0 0 0 3px rgba(5, 150, 105, 0.32);

  --maxw: 1120px;
  --maxw-read: 720px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 220ms;
}

/* ---- Dark mode: warm "cabin at night", not cold slate ---- */
html[data-theme="dark"] {
  --paper:       #16130f;
  --paper-sunk:  #110e0a;
  --surface:     #211c16;
  --surface-2:   #1a1611;
  --ink:         #f2ebde;
  --ink-2:       #c0b4a0;
  --ink-3:       #8f8472;
  --line:        #352e25;
  --line-strong: #463d31;

  --emerald-500: #19b27e;  /* a touch brighter for contrast */
  --color-primary: #19b27e;
  --color-primary-hover: #34c894;
  --color-primary-text:  #34c894;  /* small text uses the brighter shade in dark mode */

  --clay-500: #d97a44;
  --gold-500: #d8a93f;
  --river-500: #4ba2bb;

  --sh-xs: 0 1px 2px rgba(0,0,0,0.4);
  --sh-sm: 0 1px 3px rgba(0,0,0,0.5);
  --sh-md: 0 8px 22px -8px rgba(0,0,0,0.6);
  --sh-lg: 0 22px 48px -18px rgba(0,0,0,0.7);
  --ring: 0 0 0 3px rgba(25, 178, 126, 0.4);
}

/* ============================================================================
   Reset / base
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01";
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* subtle paper texture via faint contour wash — very light */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(5,150,105,0.04), transparent 55%),
    radial-gradient(120% 80% at 0% 100%, rgba(194,99,47,0.035), transparent 55%);
}
html[data-theme="dark"] body::before {
  opacity: 0.7;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(25,178,126,0.06), transparent 55%),
    radial-gradient(120% 80% at 0% 100%, rgba(217,122,68,0.05), transparent 55%);
}
body > * { position: relative; z-index: 1; }

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: var(--color-primary); text-decoration: none; }

/* Accessibility — links inside text blocks need an underline AND
 * sufficient contrast so they are distinguishable without relying on
 * colour alone (WCAG 1.4.1 + 1.4.3 + Lighthouse link-in-text-block).
 * Navigation links, card-wrapping anchors, footer columns and the
 * brand mark opt out explicitly. --color-primary-text is a darker
 * emerald (#036249) that clears 4.5:1 against warm-paper. */
p a, li a, blockquote a, dd a, .guide-intro a, .page-head__sub a,
.read a:not(.brand):not(.btn):not(.rest-card), .footer__list a {
  color: var(--color-primary-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.rest-card a, .event-card a, a.btn, a.brand,
.masthead__nav a, .crumbs a, .skip-link, .pill, .marker {
  text-decoration: none;
}

/* ---- Headings ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--color-text);
  text-wrap: balance;
}
h1 { font-size: var(--t-4xl); font-weight: 500; }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); }
p { text-wrap: pretty; }

/* ============================================================================
   Layout primitives
   ============================================================================ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-5); }
@media (max-width: 640px){ .wrap { padding-inline: var(--s-4); } }
.read { max-width: var(--maxw-read); }

.stack > * + * { margin-top: var(--s-4); }
.row { display: flex; align-items: center; gap: var(--s-3); }
.row--wrap { flex-wrap: wrap; }

/* ---- Eyebrow / label (mono) ---- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-3);
}
.eyebrow--emerald { color: var(--color-primary-text); }

/* ---- Section header pattern ---- */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1.5px solid var(--color-border);
}
.section-head__title { font-size: var(--t-2xl); }
.section-head__link {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--color-text-2);
  white-space: nowrap;
}
.section-head__link:hover { color: var(--color-primary); }

/* ---- Utilities ---- */
.mono { font-family: var(--font-mono); }
.muted { color: var(--color-text-2); }
.center { text-align: center; }
.hidden { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Focus ---- */
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

/* ---- Skip link ---- */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-primary); color: #fff;
  padding: var(--s-2) var(--s-4); z-index: 9999; border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600; font-size: var(--t-sm);
}
.skip-link:focus { left: var(--s-4); }

/* ---- Divider with contour feel ---- */
.rule { border: 0; border-top: 1.5px solid var(--color-border); margin: var(--s-6) 0; }