/* tokens.css — the one place a value is chosen.
   Loaded first on every page; the older variable sets (--bl-*, --kb-*, --pd-*
   and the bare names in site-shell.css) now point here instead of carrying
   their own copies. That is why this file changes so much for so few lines:
   the site had six near-identical jades, two coppers and four muted greys
   doing the same jobs, and each page picked one.

   Measured before this existed: 81 text colours, 61 backgrounds, 80 font
   sizes, 40 paddings, 13 radii across 11 pages. See design-tokens.md. */
:root{
  /* --- brand ------------------------------------------------------------ */
  --jade-900:#073C33;   /* primary surface and text; the most-used colour on the site */
  --jade-800:#0E5140;
  --jade-700:#0E6652;   /* accent green: links, active states, cost falling */
  --jade-100:#E7EDEA;
  --copper-600:#B96032; /* the one accent */
  --copper-800:#A64F2A; /* copper pressed / hover */
  --copper-200:#E4C6A7;

  /* --- ink -------------------------------------------------------------- */
  --ink-900:#17362F;    /* body text */
  --ink-700:#42675D;    /* secondary */
  --ink-500:#66736E;    /* muted, captions — the lightest that clears 4.5:1 on paper */
  --ink-300:#9AA1A9;    /* disabled, hairline */

  /* --- surface ---------------------------------------------------------- */
  --paper:#FBF9F3;
  --paper-2:#F3EFE5;    /* recessed band */
  --card:#FFFDF8;       /* raised card */
  --white:#FFFFFF;
  --line:rgba(7,60,51,.18);
  --line-soft:rgba(7,60,51,.08);

  /* --- functional: cost movement, nothing else --------------------------- */
  --up:#A83C2E;         /* cost rising — bad for the buyer */
  --down:#0E6652;       /* cost falling */
  --flat:#8D8171;
  --up-bg:#F7E8E3;
  --down-bg:#E6F0EB;
  --flat-bg:#F7ECDD;

  /* --- type ------------------------------------------------------------- */
  --ff-sans:"Manrope",system-ui,-apple-system,Arial,sans-serif;
  --ff-serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --ff-mono:"DM Mono","IBM Plex Mono",ui-monospace,monospace;

  /* Every size is the base multiplied by --ui-scale, which the reader sets
     from the header. 758 of the 826 font declarations on this site come
     through these tokens, so one variable moves almost all of the text.
     The reader's own browser zoom still works on top of this. */
  --ui-scale:1;
  --fs-display:calc(48px * var(--ui-scale));
  --fs-h1:calc(32px * var(--ui-scale));
  --fs-h2:calc(22px * var(--ui-scale));
  --fs-h3:calc(16px * var(--ui-scale));
  --fs-body:calc(15px * var(--ui-scale));   /* the most-used size by an order of magnitude */
  --fs-small:calc(13px * var(--ui-scale));
  --fs-micro:calc(11px * var(--ui-scale));  /* floor. 8px shipped on 8 of 11 pages; the
                                               buyer's first language is usually not English. */

  --lh-tight:1.15;
  --lh-head:1.3;
  --lh-body:1.55;
  --lh-dense:1.4;

  /* --- spacing: 4 / 8 / 16 / 24 / 32 / 48 -------------------------------- */
  --sp-1:4px;    /* inside a control */
  --sp-2:8px;    /* element to element */
  --sp-3:16px;   /* component to component */
  --sp-4:24px;   /* block padding */
  --sp-5:32px;   /* block to block */
  --sp-6:48px;   /* section to section */

  /* --- radius ------------------------------------------------------------ */
  --r-sm:6px;
  --r-md:10px;
  --r-pill:999px;

  /* --- motion ------------------------------------------------------------ */
  --dur-fast:150ms;   /* hover, focus, colour */
  --dur-slow:200ms;   /* open/close, reveal, position */
  --ease:cubic-bezier(.22,.8,.28,1);
}

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

/* Form controls do not inherit type from the page unless told to, which is
   why a few selects and buttons were still rendering in Arial and in the
   platform monospace while everything around them was Manrope. */
input,select,textarea,button{font-family:inherit}

/* Numbers in tables line up or they are not worth tabulating. */
.num,.tabular{font-family:var(--ff-mono);font-variant-numeric:tabular-nums;text-align:right}

/* ===== Reader text size =====

   Three steps, set from the header and remembered. Large is 1.34x: 15px body
   becomes 20px and the 11px floor becomes 15px, which is the point — this is
   for a buyer reading a landed-cost table without their glasses, not a
   decorative preference.

   Only the type scale moves. Spacing and the grid stay put, so nothing
   reflows into a different layout; the text simply gets bigger inside it. */
html.ui-md{--ui-scale:1.16}
html.ui-lg{--ui-scale:1.34}

.bl-textsize{display:inline-flex;align-items:center;gap:0;margin-left:var(--sp-2);border:1px solid var(--jade-900);border-radius:999px;overflow:hidden;background:var(--paper)}
.bl-textsize button{
  min-width:30px;padding:7px 0;border:0;background:none;cursor:pointer;
  color:var(--jade-900);font-family:var(--ff-mono);font-weight:700;line-height:1;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
/* The buttons show their own effect: A A A, small to large. Fixed px on
   purpose — a size picker whose labels resize with the setting cannot be
   read as a scale. */
.bl-textsize button:nth-child(1){font-size:11px}
.bl-textsize button:nth-child(2){font-size:13px}
.bl-textsize button:nth-child(3){font-size:16px}
.bl-textsize button+button{border-left:1px solid var(--jade-900)}
.bl-textsize button:hover{background:rgba(7,60,51,.1)}
.bl-textsize button[aria-pressed="true"]{background:var(--jade-900);color:var(--paper)}
@media(max-width:680px){.bl-textsize button{min-width:26px}}