/* ============================================================
   Hometown Anchor — colors_and_type.css
   Town Line rev 5: navy base · cream content · one barn-red accent
   Typeface: Overpass (Google Fonts). WCAG 2.2 AA.
   Derived from 2026-05-29-tokens.json (source of truth).
   Three tiers: primitives -> semantic -> component/role helpers.
   ============================================================ */

/* Self-hosted Overpass (brand typeface). Variable font covers 100–900;
   italic variable font for italics. font-display: swap. */
@font-face{
  font-family:"Overpass";
  src:url("fonts/Overpass-VariableFont_wght.ttf") format("truetype-variations"),
      url("fonts/Overpass-VariableFont_wght.ttf") format("truetype");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Overpass";
  src:url("fonts/Overpass-Italic-VariableFont_wght.ttf") format("truetype-variations"),
      url("fonts/Overpass-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight:100 900;
  font-style:italic;
  font-display:swap;
}

:root{
  /* ---------- PRIMITIVES ---------- */
  /* navy (structural base) */
  --navy-50:#eef2f6; --navy-100:#cdd8e2; --navy-300:#6f8aa6; --navy-500:#2f5277;
  --navy-700:#123a5e; --navy-800:#0d2b49; --navy-900:#0a2138;
  /* barn red (single accent) */
  --red-50:#f7ece8; --red-100:#ecd0c9; --red-300:#cf7d6e; --red-600:#9c3a2a; --red-700:#83301f; --red-800:#6c2718;
  /* sand / earth neutrals */
  --sand-50:#fbfaf6;  --sand-100:#f4efe6; --sand-200:#e7dfd0; --sand-300:#d9cfc0;
  --sand-400:#b8ab97; --sand-600:#6b6453; --sand-900:#23211c;
  --hairline:#ddd3c2;
  /* status (used sparingly) */
  --green-600:#2e7d52; --amber-600:#b8761f; --alert-600:#b3261e; --info-600:#2f5277;

  /* ---------- SEMANTIC COLOR ---------- */
  --color-surface:var(--sand-100);             /* page background (cream) */
  --color-surface-raised:var(--sand-50);       /* cards / paper */
  --color-ground:var(--sand-300);              /* stone bands */
  --color-surface-inverse:var(--navy-800);     /* navy headers / hero scrim */
  --color-surface-inverse-deep:var(--navy-900);/* footer */
  --color-text:var(--sand-900);                /* body on light (14:1) */
  --color-text-muted:var(--sand-600);          /* secondary (4.9:1) */
  --color-text-on-inverse:var(--sand-100);     /* text on navy (12.6:1) */
  --color-text-on-inverse-muted:var(--navy-100);
  --color-brand:var(--navy-800);               /* primary brand = navy */
  --color-accent:var(--red-600);               /* barn red — sparingly */
  --color-accent-hover:var(--red-700);
  --color-accent-active:var(--red-800);
  --color-border:var(--hairline);
  --color-border-strong:var(--sand-400);
  --color-focus-ring:var(--red-600);           /* on LIGHT (6:1 on cream) */
  --color-focus-ring-inverse:var(--sand-100);  /* on NAVY (cream) */
  --color-feedback-success:var(--green-600);
  --color-feedback-warning:var(--amber-600);
  --color-feedback-error:var(--alert-600);
  --color-feedback-info:var(--info-600);

  /* ---------- TYPE ---------- */
  --font-display:"Overpass", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body:"Overpass", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* modular scale, ratio 1.25 (major third), base 16px */
  --fs-caption:.8rem; --fs-label:.875rem; --fs-body:1rem; --fs-body-lg:1.25rem;
  --fs-h3:1.563rem; --fs-h2:1.953rem; --fs-h1:2.441rem; --fs-display:3.052rem;
  --lh-tight:1.05; --lh-snug:1.15; --lh-body:1.6; --lh-caption:1.4;
  --tracking-display:.01em; --tracking-label:.06em;
  --weight-regular:400; --weight-semibold:600; --weight-display:800;

  /* ---------- SPACE / SHAPE ---------- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px;
  --container:1040px; --container-wide:1200px; --measure:66ch;

  /* ---------- MOTION ---------- */
  --duration-fast:120ms; --duration-base:200ms; --duration-slow:320ms;
  --easing-standard:cubic-bezier(.2,0,0,1);

  /* ---------- A11Y ---------- */
  --focus-ring-width:2px; --focus-ring-offset:2px; --target-min:24px; /* 44px touch */

  /* ---------- COMPONENT ROLES ---------- */
  --button-primary-bg:var(--color-accent);
  --button-primary-bg-hover:var(--color-accent-hover);
  --button-primary-bg-active:var(--color-accent-active);
  --button-primary-text:#ffffff;
  --button-secondary-border:var(--color-brand);
  --button-secondary-text:var(--color-brand);
  --button-secondary-bg-hover:var(--navy-50);
  --button-disabled-bg:var(--sand-300);
  --button-disabled-text:var(--sand-600);
  --link-color:var(--color-brand);
  --link-color-hover:var(--color-accent);
  --link-on-inverse:var(--color-text-on-inverse);
  --input-bg:var(--color-surface-raised);
  --input-border:var(--color-border-strong);
  --input-border-focus:var(--color-accent);
  --card-bg:var(--color-surface-raised);
  --card-border:var(--color-border);
  --card-radius:var(--radius-lg);
  --header-bg:var(--color-surface-inverse);
  --footer-bg:var(--color-surface-inverse-deep);
}

@media (prefers-reduced-motion: reduce){
  :root{ --duration-fast:0ms; --duration-base:0ms; --duration-slow:0ms; }
}

/* ============================================================
   SEMANTIC TYPE CLASSES — apply directly or copy the rules.
   Display/headings are 800 UPPERCASE; body is 400 sentence case.
   ============================================================ */
.ha-display{ font-family:var(--font-display); font-weight:800; font-size:var(--fs-display);
  line-height:var(--lh-tight); letter-spacing:var(--tracking-display); text-transform:uppercase; }
.ha-h1{ font-family:var(--font-display); font-weight:800; font-size:var(--fs-h1);
  line-height:var(--lh-tight); letter-spacing:var(--tracking-display); text-transform:uppercase; }
.ha-h2{ font-family:var(--font-display); font-weight:800; font-size:var(--fs-h2);
  line-height:var(--lh-snug); text-transform:uppercase; }
.ha-h3{ font-family:var(--font-display); font-weight:800; font-size:var(--fs-h3);
  line-height:var(--lh-snug); text-transform:uppercase; }
.ha-body-lg{ font-family:var(--font-body); font-weight:400; font-size:var(--fs-body-lg); line-height:var(--lh-body); }
.ha-body{ font-family:var(--font-body); font-weight:400; font-size:var(--fs-body); line-height:var(--lh-body); }
.ha-label{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-label);
  line-height:var(--lh-caption); letter-spacing:var(--tracking-label); text-transform:uppercase; }
.ha-caption{ font-family:var(--font-body); font-weight:400; font-size:var(--fs-caption);
  line-height:var(--lh-caption); color:var(--color-text-muted); }