/* WilCo Guide - Colors & Type tokens
 * Mirrors _design-comp/styles.css and app/globals.css from tjlark23/wilco-guide.
 * Use these tokens (and the matching Google Font imports) to make any artifact
 * feel native to the WilCo Guide brand.
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,400..800,0..100&family=Source+Serif+4:opsz,wght@8..60,400..700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ─── Canonical LMV hex (the real color codes humans use) ─── */
  /* ─── Ink (text) ─── */
  --ink:    #171717;   /* primary text, headlines */
  --ink-2:  #3a3530;   /* body text, secondary */
  --ink-3:  #68635b;   /* muted, captions */
  --ink-4:  #9a9488;   /* divider/dot inline */

  /* ─── Rules / hairlines ─── */
  --rule:   #d8cdbb;   /* default 1px hairline */
  --rule-2: #c8bba4;   /* stronger border (buttons, inputs) */

  /* ─── Brand: Bluebonnet / navy (primary) ─── */
  --bluebonnet:     #123260;  /* primary navy. THE brand color */
  --bluebonnet-2:   #284d83;  /* hover/secondary (lighter) */
  --bluebonnet-ink: #0b1c3a;  /* darkest, dark sections */

  /* ─── Brand: Rust (accent / alerts / featured) ─── */
  --rust:      #c24c32;
  --rust-2:    #a33e28;
  --rust-soft: #fbe4dc;

  /* ─── Brand: Gold (sparingly, on dark) ─── */
  --gold:      #e6bf4a;
  --gold-soft: #f3e7c4;

  /* ─── Surfaces ─── */
  --paper:   #f5efe3;   /* cream, primary background */
  --paper-2: #ede5d4;   /* deeper cream, alt rows */
  --paper-3: #e4d9c5;   /* card edge tint, image bg */
  --canvas:  #f3eee2;   /* page canvas behind cards */
  --white:   #fffaf0;   /* warm white, NEVER #ffffff */

  /* ─── Category accents (use as cat-tag color, not surface) ─── */
  --cat-local:    #123260;   /* bluebonnet */
  --cat-politics: #c24c32;   /* rust */
  --cat-schools:  #1f744f;
  --cat-business: #7e5d1d;
  --cat-transit:  #2e6d7f;
  --cat-opinion:  #a33e28;
  --cat-community:#944b40;
  --cat-food:     #b14e49;
  --cat-arts:     #6d4177;
  --cat-outdoors: #337344;
  --cat-sports:   #123260;
  --cat-weather:  #42789c;
  --cat-breaking: #c24c32;
  --money-green:  #2d6a4f;

  /* ─── Shadows (soft only - never glowing) ─── */
  --shadow-soft: 0 1px 2px rgba(20, 18, 30, 0.04), 0 4px 14px rgba(20, 18, 30, 0.04);
  --shadow-img:  0 1px 0 rgba(0,0,0,0.06);
  --shadow-card-hover: 0 2px 10px rgba(20,18,30,0.06);

  /* ─── Radii - sharp on purpose ─── */
  --r-1: 2px;   /* tags, badges, ad-frames */
  --r-2: 3px;   /* cards, buttons */
  --r-pill: 999px; /* circular icon buttons only */

  /* ─── Spacing scale ─── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 22px;
  --s-6: 28px;
  --s-7: 36px;
  --s-8: 48px;
  --s-9: 64px;

  /* ─── Page widths ─── */
  --page-max: 1376px;
  --page-pad: 64px;

  /* ─── Type families ─── */
  --display: 'Fraunces', 'Source Serif 4', Georgia, serif;
  --body:    'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;
}

/* ─────────────────────────── Semantic type roles ───────────────────────────
   Apply via class. These mirror the live classes used in production.
*/

/* Display - Fraunces, optical-size aware. Used for hero/page headlines. */
.h-display {
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
}

/* Section - band/section headers (~32px) */
.h-section {
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: "opsz" 96, "SOFT" 50;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Card - inside a card or grid item (~17-22px) */
.h-card {
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: "opsz" 36, "SOFT" 50;
  font-size: 19px;
  line-height: 1.18;
  letter-spacing: -0.008em;
  color: var(--ink);
  text-wrap: balance;
}

/* Body - Source Serif 4 reading text */
p, .body {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* Dek - subhead under headline, serif */
.dek {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: "opsz" 36, "SOFT" 60;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* Kicker - tiny mono uppercase, RUST, above headlines */
.kicker {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 600;
}
.kicker--ink   { color: var(--bluebonnet); }
.kicker--muted { color: var(--ink-3); }

/* Eyebrow - sans variant of the kicker */
.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}

/* Meta - mono uppercase metadata (timestamps, counts) */
.meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-transform: uppercase;
}

/* Byline - mono, mixed case */
.byline {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* Cat-tag - colored mono category label */
.cat-tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bluebonnet);
}

/* Mono inline */
code, .mono {
  font-family: var(--mono);
  font-size: 0.92em;
}

/* Sans utility */
.sans { font-family: var(--sans); }

/* ============================================================================
   SURFACE CONTRACT (merged 2026-06-18) - put one class on any surface, every
   child auto-pairs via --hd/--bd/--mu/--ki/--br/--lk/--bbg/--btx. Never a
   hardcoded color. White-on-white becomes impossible.
   ============================================================================ */
.on-cream{ background:var(--paper); --hd:var(--bluebonnet); --bd:var(--ink-2); --mu:var(--ink-3); --ki:var(--rust); --br:var(--rule); --lk:var(--rust); --bbg:var(--rust); --btx:var(--paper); color:var(--bd); }
.on-navy{  background:var(--bluebonnet); --hd:var(--paper); --bd:#e6ddcd; --mu:#b9b0a0; --ki:var(--gold); --br:rgba(255,250,240,.18); --lk:var(--gold); --bbg:var(--rust); --btx:var(--paper); color:var(--bd); }
.on-rust{  background:var(--rust); --hd:var(--paper); --bd:#f6e7df; --mu:#f0d4c8; --ki:var(--gold); --br:rgba(255,250,240,.28); --lk:var(--paper); --bbg:var(--paper); --btx:var(--rust); color:var(--bd); }
.on-sand{  background:#efe7d6; --hd:var(--bluebonnet); --bd:#5a534a; --mu:var(--ink-3); --ki:#8a5a3c; --br:#ddd1b9; --lk:var(--rust); --bbg:var(--bluebonnet); --btx:var(--paper); color:var(--bd); }
.on-dark{  background:var(--bluebonnet-ink); --hd:var(--paper); --bd:#cfc7b8; --mu:#8f877a; --ki:var(--gold); --br:rgba(255,250,240,.12); --lk:var(--gold); --bbg:var(--gold); --btx:var(--ink); color:var(--bd); }
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation:none !important; transition:none !important; } }