/* ONE PALETTE FOR THE MARKETING PAGES.

   The three static pages each declared their own :root. Eight tokens were common to all three and
   six of those eight disagreed: two different inks (#1A1712 / #1B1712), two papers, two lines, two
   cards, two serif stacks. The brand colours happened to agree — green #0F3D2E, coral #F55A3C — so
   nobody ever saw an obviously wrong page; the drift was in the neutrals, which is exactly where it
   goes unnoticed and exactly what makes two pages feel like two products.

   The values here are the APP's, from src/app/globals.css, because those are the ones with measured
   contrast ratios behind them (see RULES.md on readability) rather than whichever hex got pasted
   first. Each static page got about half of them right.

   The two vocabularies are kept as ALIASES rather than renamed. landing/about say --signal and
   --brand-dark; institutions says --coral and --green. Rewriting a thousand lines of page CSS to
   agree on names would be a large change with nothing to show for it; pointing both names at one
   value is the whole benefit with none of the risk. New marketing CSS should use the canonical
   names at the top.

   NOT here: --maxw. landing is 1200px and institutions 1140px, and that is a layout decision per
   page, not a brand one — forcing either would move every section on a page for no brand gain. */

:root {
  /* ── canonical ─────────────────────────────────────────────── */
  --paper:        #F7F1E8;   /* app --color-cream */
  --paper-2:      #FBF7EF;
  --card:         #FFFDF9;   /* app --color-cream-card */
  --card-2:       #FBF7EF;
  --ink:          #1A1712;   /* app --color-ink */
  --muted:        #6B6154;   /* 5.40 on paper; #786F62 was 4.40, under AA */
  --line:         #E7DECF;   /* app --color-line */
  --line-2:       #F0E9DB;

  --brand:        #0F3D2E;
  --brand-2:      #1C5B45;
  --brand-deep:   #0A2E22;
  --brand-softbg: #E9F0EC;
  --on-brand:     #B7C8BE;   /* the muted tone for DARK surfaces — 6.96 on brand green */

  --coral:        #F55A3C;
  --coral-deep:   #C43C1A;   /* white on it 5.24; as text on cream 4.67 — clears AA both ways */
  --coral-darker: #A8330E;   /* hover; white on it 5.95 — hovering must not drop below AA */
  --coral-soft:   #FCEDE8;

  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;   /* app --font-display */

  /* ── aliases: landing.html / about.html vocabulary ──────────── */
  --signal:         var(--coral);
  --signal-deep:    var(--coral-deep);
  --signal-on-dark: #FF8A6B;
  --signal-soft:    #F55A3C1a;
  --brand-dark:     var(--brand);
  --brand-deeper:   var(--brand-deep);
  --brand-ink:      #F4F1EA;     /* text ON the dark brand surface */
  --brand-soft:     #FFFFFF1a;
  --brand-line:     #FFFFFF26;
  --mid:            var(--brand);
  --ok:             #0E7C6A;
  --ok-bg:          #E9F6F3;
  --on-signal:      #fff;
  --on-ok:          #fff;
  --shadow:         0 1px 2px #1a17120f, 0 14px 34px -20px #1a171226;

  /* ── aliases: institutions.html vocabulary ──────────────────── */
  --green:      var(--brand);
  --green-2:    var(--brand-2);
  --green-soft: var(--brand-softbg);
  --teal:       #16776A;
  --brass:      #7A5E1E;
  --amber:      #E8A93B;
  --grid:       #EFE8DA;
}