/* ===================================================================
   bill-checker — foundation
   tokens.css : colour, type, controls, focus

   Ported 2026-10-09 from Mike's Retirement Checkpoints
   (mike-golden-year/digital-product-mike/foundation/), which carried
   128 passing browser checks. Only the brand colour changed: Mike's
   navy became Bill Alert's dark ink, with the channel's amber as an
   accent that never carries text.

   The audience is the same shape — many older, many on a tablet or a
   phone in a bright kitchen, reading their bill. 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;

  /* Dark ink carries every action — the same ink as the channel's
     video cards. Gold is for emphasis in running text and is
     deliberately dark enough (#8A5A00, 5.9:1) to be readable. The
     channel's bright amber fails contrast as text, so it is only ever a
     stripe or a fill behind dark type. */
  --brand:    #1D2228;
  --brand-dk: #0B0D10;
  --gold:    #8A5A00;
  --amber:   #FFC21A;

  /* 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(--brand);
  background: var(--brand);
  color: #fff;
  padding: 0 1rem;
  cursor: pointer;
}
.btn:hover{ background: var(--brand-dk); }
.btn.secondary{ background: var(--surface); color: var(--brand); }
.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(--brand);
  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(--brand);
  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(--brand); word-break: break-all; }

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