/* FigTree — cream palette override
 * ---------------------------------------------------------------------
 * Loaded AFTER figtree.css so these win on the cascade.
 *
 * WHY A SEPARATE FILE
 * figtree.css is 16.5KB and almost entirely token-driven: 80 var() uses
 * against 4 real hardcoded colours. The dark-to-cream flip is therefore 8
 * tokens plus 2 rgba values that were baked to the dark background. Editing
 * those in place means re-emitting 500 lines of working CSS to change 10 of
 * them, which is a transcription risk for no benefit. This override is
 * reviewable in one screen and revertible in one commit.
 *
 * Fold it into figtree.css the next time that file is being edited anyway.
 * Until then, this is the only place the palette is defined — do not add
 * colours to figtree.css.
 *
 * WHY CREAM
 * The Ghost theme was dark (--bg #080c06) while figtree-development.com is
 * cream (#faf6ef). Once Ghost serves the whole site those cannot both be
 * right. Decision 2026-09-18: the marketing site's palette wins, because it
 * is the one visitors and clients already associate with FigTree.
 */

:root {
  /* Brand greens and gold are unchanged — they read correctly on cream. */
  --green:      #5a9e2f;
  --green-dark: #3d6e20;
  --green-deep: #1a2e0d;
  --gold:       #c8a84b;

  /* Flipped. --text is now the old --green-deep: near-black with a green
     cast, rather than pure black, so body copy still feels part of the
     brand rather than dropped in from a default stylesheet. */
  --bg:         #faf6ef;
  --surface:    #f3ecdf;
  --text:       #1a2e0d;
  --text-muted: #5f6b52;

  /* New, and the reason the flip is not literally 8 lines: these two values
     were hardcoded against the dark background in figtree.css. */
  --border:     rgba(26, 46, 13, 0.22);     /* was rgba(221,234,204,0.2) */

  /* The nav takes the same tone as the stat band under the hero (2026-09-18).
     It was --bg at 88% opacity, which put two different creams at the top and
     bottom of the same screen and made the nav read as a continuation of the
     hero rather than as a bar of its own.

     Written as var(--surface), not as the literal #f3ecdf, so the two stay
     the same colour by construction. Change --surface and both move together;
     a literal here is a thing to remember, and it would eventually be
     forgotten. */
  --nav-bg:     var(--surface);
}

/* Sticky nav. figtree.css line ~41 sets the dark translucent value and a
   backdrop blur directly.

   The blur is switched off deliberately: it only ever existed to keep the
   bar legible while content scrolled under a semi-transparent background,
   and --nav-bg is now opaque. Leaving it on would cost a compositing layer
   on every page for an effect nothing can see. The hairline moves to
   --border so it matches the stat band's. */
.ft-nav {
  background: var(--nav-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--border);
}

/* Outline button border. figtree.css line ~324 sets the light-on-dark
   value directly; on cream it has to darken instead. */
.ft-btn-outline { border-color: var(--border); }

/* Legal links in the footer (privacy / cookie / terms).

   Colour only, on purpose. The separators between them are literal ·
   characters in default.hbs rather than a flex gap, which keeps the layout
   out of CSS entirely and keeps this file to what its header promises: the
   palette, and nothing else. */
.ft-footer-legal a { color: var(--text-muted); text-decoration: none; }
.ft-footer-legal a:hover { color: var(--green); }

/* CARD SURFACES
   The green wash is applied at 0.03-0.3 alpha throughout figtree.css, tuned
   to lift a near-black background. On cream those alphas are invisible: at
   0.07 the cards rendered as floating text with no edge at all (checked on
   the live blog after the palette landed, which is the only way to know).
   A tint alone is not enough on a light background — the border is doing
   most of the work here. */
.ft-card,
.ft-post-cta {
  background: var(--surface);
  border: 1px solid var(--border);
}

.ft-card:hover {
  background: #ece3d2;
  border-color: var(--green);
}

/* Footer and hero blocks inherit --surface, which is now the warmer cream
   rather than the near-black. Nothing else to do here — they are token-driven. */

/* The four #fff uses in figtree.css are all white text on a --green button
   or CTA fill. Those stay correct on cream and are deliberately not
   overridden. */

/* STILL UNRESOLVED
   .ft-card-meta (date / reading time) renders pale and small in uppercase
   monospace. --text-muted is around 5:1 on cream, which passes AA for body
   copy, but the treatment makes it read worse than the number suggests.
   Left alone rather than guessed at — decide it against a real page. */