/* ============================================================================
   Civic Ledger — shared design system
   ----------------------------------------------------------------------------
   Extracted verbatim 2026-07-20 from quattro/mainstay.html (the MEconomics
   Economic Development Desk), which is the reference implementation of the
   look: light, editorial, serif throughout, restrained civic palette.

   OPT-IN ONLY. Linking this file changes nothing until a page also adopts the
   classes/tokens below. Nothing here is auto-applied by tag alone except the
   `.cl-page` scope, so a page can adopt incrementally.

   ⚠ NOT FOR THE GIS VIEWERS. gis/** keeps its own dark map-first design system
   (gis-design-system.css, gis-presentation.css). Do not link this there.

   Token prefix stays --ms-* so mainstay.html can drop its inline copy and use
   this file without rewriting a single rule.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   PALETTE — royal navy / gold / white, serif throughout.
   Anchored to the navy+gold piai-shell.js already ships (#0d1f33 / #c9a962) so
   the shell and the pages under it finally read as one product.

   Two modes, one palette:
     LIGHT  (.cl-page)      — documents, tables, admin, finance. White paper,
                              navy ink, gold for emphasis only.
     DARK   (.cl-page--map) — the GIS viewers. Maps need a dark canvas so the
                              basemap and parcel fills stay legible; this keeps
                              that but moves off the old cyan brand onto navy/gold.
   ------------------------------------------------------------------------ */
:root {
  /* Royal navy — the spine of the identity */
  --cl-navy:      #0d1f33;
  --cl-navy-2:    #142840;
  --cl-navy-3:    #16324f;
  --cl-navy-4:    #1e4470;
  --cl-navy-ink:  #0a1826;

  /* Gold — emphasis, never decoration */
  --cl-gold:      #c9a962;
  --cl-gold-2:    #e9c66b;
  --cl-gold-deep: #8a6206;
  --cl-gold-dim:  rgba(201,169,98,.14);

  /* White / paper */
  --cl-white:     #ffffff;
  --cl-paper:     #fbfaf7;
  --cl-paper-2:   #f3f1ec;
  --cl-paper-3:   #e8e5dd;

  /* ---- LIGHT MODE surfaces + ink (mapped onto the --ms-* names the pages
          already consume, so adopting this is a token swap, not a rewrite) --- */
  --ms-bg:        var(--cl-paper);
  --ms-surface:   var(--cl-white);
  --ms-surface-2: var(--cl-paper-2);
  --ms-surface-3: var(--cl-paper-3);
  --ms-border:    #ded9cd;
  --ms-border-2:  #bcb5a4;
  --ms-text:      var(--cl-navy-ink);
  --ms-text-2:    #2b3d52;
  --ms-muted:     #5a6b7f;

  --ms-brand:     var(--cl-navy);
  --ms-brand-2:   var(--cl-navy-4);
  --ms-brand-dim: rgba(13,31,51,.08);
  --ms-gold:      var(--cl-gold-deep);
  --ms-gold-dim:  var(--cl-gold-dim);

  /* Status — kept distinguishable from the navy/gold spine */
  --ms-good:      #1e7d4f;
  --ms-good-ink:  #146c3f;  /* accessible green for text on a light-green tint (AA on rgba(30,125,79,.12-.14)) */
  --ms-warn:      #8a6206;
  --ms-crit:      #a3241d;

  /* Categorical series. Navy and gold lead; the rest are chosen to stay
     distinguishable in greyscale and for common colour-vision deficiencies.
     *-ink is the accessible text/stroke pairing on light backgrounds. */
  --ms-c1: #1e4470;  --ms-c1-ink: #0d1f33;
  --ms-c2: #c9a962;  --ms-c2-ink: #7a5604;
  --ms-c3: #2f7d6b;  --ms-c3-ink: #1d5c4e;
  --ms-c4: #6b4c9a;  --ms-c4-ink: #4a3277;

  --ms-radius:    8px;
  --ms-radius-sm: 6px;
  --ms-shadow:    0 1px 2px rgba(13,31,51,.07), 0 2px 10px rgba(13,31,51,.06);

  /* Type — serif in every slot, including "sans" and "mono". Deliberate: the
     editorial voice comes from refusing to switch families. */
  --ms-serif: Charter, "Bitstream Charter", Cambria, "Palatino Linotype", Georgia, serif;
  --ms-sans:  Charter, "Bitstream Charter", Cambria, "Palatino Linotype", Georgia, serif;
  --ms-mono:  Charter, "Bitstream Charter", Cambria, "Palatino Linotype", Georgia, serif;
}

/* ---- DARK / MAP MODE — the GIS viewers ------------------------------------
   Applied by adding class="cl-page--map". Overrides the same --ms-* / --bg names
   the viewers already use, so a viewer adopts by adding the class, not by having
   its rules rewritten. Map geometry, layer colours and basemaps are NOT touched. */
.cl-page--map {
  --ms-bg:        var(--cl-navy-ink);
  --ms-surface:   var(--cl-navy);
  --ms-surface-2: var(--cl-navy-2);
  --ms-surface-3: var(--cl-navy-3);
  --ms-border:    rgba(233,198,107,.20);
  --ms-border-2:  rgba(233,198,107,.34);
  --ms-text:      #eef2f8;
  --ms-text-2:    #c6d1e0;
  --ms-muted:     #93a2b6;
  --ms-brand:     var(--cl-gold);
  --ms-brand-2:   var(--cl-gold-2);
  --ms-brand-dim: rgba(201,169,98,.16);

  /* the viewers' own long-standing variable names, remapped onto navy/gold */
  --bg:      var(--cl-navy-ink);
  --bg-2:    var(--cl-navy-2);
  --text:    #eef2f8;
  --muted:   #93a2b6;
  --brand:   var(--cl-gold);
  --brand-dk:var(--cl-gold-deep);
  --accent:  var(--cl-gold-2);
  --border:  rgba(233,198,107,.20);
}
/* --- Page scope -----------------------------------------------------------
   Add class="cl-page" to <body> to adopt the base treatment. Scoped rather
   than styling `body` directly so linking this file is inert until opted in. */
.cl-page {
  background: var(--ms-bg);
  color: var(--ms-text);
  font: 16px/1.5 var(--ms-serif);
  font-variant-numeric: lining-nums;   /* aligns figures in tables */
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* --- Editorial typography scale ------------------------------------------ */
.cl-page h1, .cl-page h2, .cl-page h3 { font-family: var(--ms-serif); color: var(--ms-text); font-weight: 700; }
.cl-page h1 { font-size: 1.75rem; line-height: 1.25; letter-spacing: -.01em; }
.cl-page h2 { font-size: 1.30rem; line-height: 1.3; }
.cl-page h3 { font-size: 1.08rem; line-height: 1.35; }
.cl-page a  { color: var(--ms-brand-2); }

/* Section label — small caps, never all-lowercase. */
.cl-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  font-variant-caps: small-caps; color: var(--ms-muted);
}

/* --- Primitives ---------------------------------------------------------- */
.cl-card {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  box-shadow: var(--ms-shadow);
  padding: 16px 18px;
}
.cl-rule { border: 0; border-top: 1px solid var(--ms-border); margin: 18px 0; }

/* Ledger table: figures right-aligned and lining, rules hairline. */
.cl-table { width: 100%; border-collapse: collapse; font-variant-numeric: lining-nums tabular-nums; }
.cl-table th {
  text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .05em;
  font-variant-caps: small-caps; color: var(--ms-muted);
  border-bottom: 1px solid var(--ms-border-2); padding: 8px 10px;
}
.cl-table td { border-bottom: 1px solid var(--ms-border); padding: 9px 10px; }
.cl-table td.cl-num, .cl-table th.cl-num { text-align: right; }

.cl-btn {
  font: 600 14px/1 var(--ms-serif);
  background: var(--ms-brand); color: #fff;
  border: 1px solid var(--ms-brand-2); border-radius: var(--ms-radius-sm);
  padding: 9px 14px; cursor: pointer;
}
.cl-btn:hover { background: var(--ms-brand-2); }
.cl-btn--quiet { background: transparent; color: var(--ms-brand-2); border-color: var(--ms-border-2); }

/* Status pills — carry a text label, never colour alone (WCAG 1.4.1). */
.cl-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
           border-radius: 999px; padding: 3px 10px; border: 1px solid var(--ms-border-2); }
.cl-pill--good { color: var(--ms-good); border-color: currentColor; }
.cl-pill--warn { color: var(--ms-warn); border-color: currentColor; }
.cl-pill--crit { color: var(--ms-crit); border-color: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .cl-page *, .cl-page *::before, .cl-page *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
}