/* ==========================================================================
   CivicAssist USA — Tokens (forked from CloudyIT 2026 refresh)
   Brand: Blue #153A74 · Red #E10E00 · Grey #CCCCCC
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap");

:root {
  /* ---- CivicAssist core palette ------------------------------------- */
  --ca-navy:       #153A74;          /* primary anchor (per logo PDF) */
  --ca-navy-deep:  #0F2A55;          /* darker for footers/contrast */
  --ca-navy-soft:  #1F4A8C;          /* slightly lifted */
  --ca-blue:       #2E6FD0;          /* accent — interactive blue */
  --ca-sky:        #7FA9DD;          /* tint for on-dark eyebrows */
  --ca-red:        #E10E00;          /* civic red — used SPARINGLY */
  --ca-red-deep:   #B30B00;
  --ca-grey:       #CCCCCC;          /* spec'd brand grey */
  --ca-white:      #FFFFFF;

  /* ---- Neutrals (carry over) ---------------------------------------- */
  --ink:    #1A2942;
  --slate:  #5C6A85;
  --line:   #E2E7F0;
  --canvas: #F5F7FB;
  --paper:  #FAFBFD;

  /* ---- Functional --------------------------------------------------- */
  --success: #15945F;
  --warning: #C46A00;
  --error:   var(--ca-red);

  /* ---- Semantic ----------------------------------------------------- */
  --bg-page:    var(--ca-white);
  --bg-canvas:  var(--canvas);
  --bg-dark:    var(--ca-navy);
  --bg-darker:  var(--ca-navy-deep);

  --fg-strong:  var(--ca-navy);
  --fg-body:    var(--ink);
  --fg-muted:   var(--slate);
  --fg-accent:  var(--ca-blue);
  --fg-invert:  var(--ca-white);

  --border:        var(--line);
  --border-strong: #C5CCDB;

  /* ---- Elevation ---------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(15, 42, 85, .06);
  --shadow-md: 0 4px 16px rgba(15, 42, 85, .08);
  --shadow-lg: 0 16px 48px rgba(15, 42, 85, .14);
  --shadow-focus: 0 0 0 3px rgba(46, 111, 208, .28);

  /* ---- Radii (kept tight per spec) ---------------------------------- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* ---- Spacing (4px base) ------------------------------------------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* ---- Type --------------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: "Source Serif 4", "Georgia", serif;

  --type-display-track: -0.025em;
  --type-h1-track: -0.022em;
  --type-h2-track: -0.018em;
}

html, body {
  font-family: var(--font-sans);
  color: var(--fg-body);
  background: var(--bg-page);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg-strong);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--fg-accent); text-decoration: none; }
a:hover { color: var(--ca-navy); }

/* Eyebrow: ALL CAPS + square bullet (kept from system) */
.ca-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-accent);
  display: inline-flex; align-items: center; gap: 8px;
}
.ca-eyebrow::before {
  content: ""; width: 7px; height: 7px; background: currentColor;
  flex: none;
}
.ca-eyebrow.on-dark { color: var(--ca-sky); }
.ca-eyebrow.muted { color: var(--slate); }
.ca-eyebrow.red { color: var(--ca-red); }

/* Accent word in display headlines */
.ca-accent { color: var(--ca-blue); }
.ca-accent-red { color: var(--ca-red); }

/* Thin blue rule */
.ca-rule {
  border: 0; border-top: 2px solid var(--ca-blue);
  width: 36px; margin: 0;
}

/* Stars-and-stripes accent — a single 3-stripe slab, used sparingly */
.ca-stripe-accent {
  display: inline-block;
  width: 36px; height: 18px;
  background:
    linear-gradient(to bottom,
      var(--ca-red) 0 33.33%,
      #fff 33.33% 66.66%,
      var(--ca-navy) 66.66% 100%);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 2px;
}

::selection { background: rgba(46, 111, 208, .25); }