/* ===================================================================
   Mike's Retirement Checkpoints — foundation
   tokens.css : colour, type, controls, focus

   Harvested 2026-09-06 from product/retirement-budget-calculator.html,
   which passed 29 browser checks. These are the parts that are true of
   any tool sold to this audience, with the budget-calculator specifics
   stripped out.

   The audience is 50+ on an iPad in a bright kitchen. Every value below
   is chosen for that and not for a designer looking at a 27-inch screen.
   =================================================================== */

:root{
  /* The reader's own text-size control. text-scale.js writes this.
     Clamped 0.85–1.6 there, never here. */
  --scale: 1;

  /* Paper, not screen. A warm off-white reads as a document and cuts
     the glare that a pure #FFF page throws on a tablet held under a
     kitchen light. */
  --bg:      #FBF8F1;
  --surface: #FFFFFF;

  /* Ink. --ink on --bg is 15.8:1; --ink-soft is 8.6:1. Both clear WCAG
     AAA for body text, which is the standard this audience needs
     rather than the AA most sites settle for. */
  --ink:     #1C1A17;
  --ink-soft:#4A453D;

  --line:    #D9D2C4;
  --line-2:  #EDE7DA;

  /* Navy carries every action. Gold is for emphasis in running text and
     is deliberately dark enough (#8A5A00, 5.9:1) to be readable — the
     bright gold most brands use fails contrast outright. */
  --navy:    #14395E;
  --navy-dk: #0E2A47;
  --gold:    #8A5A00;

  /* Outcome colours always ship with a background pair, because colour
     alone must never be the signal. Roughly one man in twelve in this
     audience has some red-green deficiency. */
  --good:    #1B5E20;
  --bad:     #A32020;
  --good-bg: #EAF3EA;
  --bad-bg:  #FBEDED;
}

*{ box-sizing: border-box; }

/* 20px base, not 16px. This is the single highest-value decision in the
   whole design system and it is why the calculator tested well. */
html{
  font-size: calc(20px * var(--scale));
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

/* Serif headings against a sans body. It reads as a document rather
   than as an app, which is the register this buyer trusts. */
h1, h2, h3, .amount, .brand{
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
}

/* -------------------------------------------------------------------
   Controls

   min-height 3rem on inputs and 3.6rem on buttons — at the 20px base
   that is 60px and 72px, comfortably past the 48px floor, and it holds
   even when the reader scales text down to 0.85.
   ------------------------------------------------------------------- */

input, select, textarea{
  font-family: inherit;
  font-size: 1.05rem;
  min-height: 3rem;
  padding: 0.6rem 0.7rem;
  width: 100%;
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: 8px;
}

.btn{
  border-radius: 10px;
  min-height: 3.6rem;
  font-size: 1rem;
  font-weight: 700;
  border: 2px solid var(--navy);
  background: var(--navy);
  color: #fff;
  padding: 0 1rem;
  cursor: pointer;
}
.btn:hover{ background: var(--navy-dk); }
.btn.secondary{ background: var(--surface); color: var(--navy); }
.btn.secondary:hover{ background: var(--line-2); }
.btn[hidden]{ display: none; }

/* A thick warm focus ring on everything focusable. Keyboard and switch
   users depend on it, and at this age so do people simply trying to see
   where they are on the page. */
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
[tabindex]:focus-visible{
  outline: 4px solid #FFC24D;
  outline-offset: 2px;
}

/* -------------------------------------------------------------------
   Source chip — new, not harvested.

   The one thing this product sells. Every figure on screen carries one.
   Styled here so it looks identical in every tool.
   ------------------------------------------------------------------- */

.src{
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  min-height: 2.2rem;
  padding: 0.1em 0.5em;
  margin-left: 0.35em;
  font-size: 0.75rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 600;
  color: var(--navy);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  vertical-align: baseline;
}
.src:hover{ background: var(--line-2); }

/* The panel a chip opens: issuing body, document, date checked, link. */
.src-panel{
  border-left: 4px solid var(--navy);
  background: var(--surface);
  padding: 0.8rem 1rem;
  margin: 0.6rem 0;
  font-size: 0.9rem;
  line-height: 1.5;
}
.src-panel .body{ font-weight: 700; }
.src-panel .doc{ color: var(--ink-soft); }
.src-panel .checked{ color: var(--ink-soft); font-size: 0.85em; }
.src-panel a{ color: var(--navy); word-break: break-all; }

@media (max-width: 30rem){
  h1{ font-size: 1.6rem; }
  .amount{ font-size: 2.1rem; }
}