/* brand.css — the Exactify palette, set once.
 *
 * WHY THIS FILE EXISTS
 * Before this, the site had 8 tokens and 32 hardcoded hex values plus 72 rgba()
 * values scattered through the markup. "#080f1c" was typed out 30 times next to
 * a --bg token nobody used; "#94a3b8" 42 times next to --muted. So "change the
 * background colour" was not a thing anyone could actually do.
 *
 * Every colour on the site is now a token, and every page links this file. The
 * acceptance test is simple: change --bg here, and all 13 pages change.
 *
 * TOKENS ARE NAMED BY ROLE, NOT BY COLOUR.
 * --brand, never --mango. The day mango is swapped for something else, a
 * colour-named token becomes a lie — the same failure as documentation that
 * still said "index.html" after the tool moved to billcheck.html.
 *
 * TWO RULES THAT KEEP THE PALETTE HONEST
 * 1. Brand mango is ONLY a solid fill or a headline highlight. Never an outlined
 *    box. Text on it is always --on-brand: white on mango is 2.15:1, which fails
 *    WCAG badly, and it is the obvious mistake to make.
 * 2. Warnings are ONLY an outlined box with a wash and a ⚠️. Never a fill.
 *    Amber and mango sit close in hue (1.29:1 apart in luminance), so treatment
 *    carries the distinction, not colour. Break rule 1 or 2 and warnings stop
 *    reading as warnings.
 *
 * CONTRAST, measured against --bg (WCAG AA: 4.5:1 body, 3:1 large/UI)
 *   ink 16.74  ·  trust 10.36  ·  brand 8.72  ·  ink-muted 7.30  ·  good 7.38
 *   warn-ink 11.22  ·  bad 6.77  ·  ink-faint 4.86
 * --ink-faint was #64748b (3.93:1 — BELOW AA) and it paints the fine print, on a
 * site whose whole claim is that every number is checkable by the reader. Lifted
 * to #748399, the smallest change that passes while keeping the slate character.
 */

:root {
  /* ── BASE TRIPLETS ──────────────────────────────────────────────────────────
   * The site uses 72 distinct rgba() values for washes, borders and overlays.
   * rgba() can't read a hex token, so without these the alpha colours would stay
   * hardcoded and changing the palette would still leave two-thirds of the site
   * untouched. Compose them as rgba(var(--trust-rgb), 0.08).
   */
  /* --ink-rgb tracks the INK, not white. Surfaces are written as
   * rgba(var(--ink-rgb), 0.04) — "a faint wash of the text colour" — which lifts
   * a dark ground when ink is near-white AND tints a light ground when ink is
   * near-black. That one choice is why moving from dark to light needed no
   * rewriting of 29 surfaces. */
  --bg-rgb:        255,255,255;
  --ink-rgb:       28,25,23;
  --brand-rgb:     248,152,39;
  --brand-soft-rgb:180,83,9;
  --trust-rgb:     20,76,41;
  --trust-deep-rgb:15,58,31;
  --good-rgb:      20,76,41;
  --warn-rgb:      154,52,18;
  --bad-rgb:       185,28,28;
  --slate-rgb:     87,83,78;
  --perk-rgb:      109,40,217;
  --meter-rgb:     3,105,161;
  --freebie-rgb:   21,128,61;

  /* ── GROUND ─────────────────────────────────────────────────────────────── */
  --bg:            #ffffff;                    /* page background */
  --surface:       rgba(var(--ink-rgb),0.035);    /* cards, panels */
  --surface-2:     rgba(var(--ink-rgb),0.06);     /* inputs, code chips, raised */
  --line:          rgba(var(--ink-rgb),0.10);     /* borders, rules */
  --line-strong:   rgba(var(--slate-rgb),0.28);     /* the current-plan card edge */

  /* ── INK ────────────────────────────────────────────────────────────────── */
  --ink:           #1c1917;                    /* body text            17.49:1 */
  --ink-strong:    #0c0a09;                    /* headings */
  --ink-soft:      #292524;                    /* code, emphasised secondary */
  --ink-dim:       #57534e;                    /* prose                 7.63:1 */
  --ink-muted:     #57534e;                    /* secondary text        7.63:1 */
  --ink-faint:     #6b625c;                    /* captions, fine print  5.95:1 */

  /* ── BRAND — mango #f89827, from the archived Mango Money site. ───────────
   * It SPLITS by role because it has to: as a fill it's perfect, as text on
   * white it's 2.21:1 and unreadable. --brand fills, --brand-text writes. */
  --brand:         #f89827;                    /* fills, buttons, the logo bolt */
  --brand-text:    #b45309;                    /* links and highlights  5.02:1 */
  --brand-soft:    #b45309;                    /* alias, kept for older references */
  --on-brand:      #1c1917;                    /* text ON mango  7.92:1 — never white (2.21:1) */
  --brand-wash:    rgba(var(--brand-rgb),0.10);
  --brand-edge:    rgba(var(--brand-rgb),0.30);

  /* ── TRUST — the deep forest green that partnered mango on the old site.
   * #144c29 measures 10:1 in BOTH directions, so it works as text and as a
   * fill with white on it. That is why savings use it. */
  --trust:         #144c29;
  --trust-deep:    #0f3a1f;
  --trust-soft:    #2d7a4a;
  --on-trust:      #ffffff;                    /* white on green  10.02:1 */
  --trust-wash:    rgba(var(--trust-rgb),0.07);
  --trust-edge:    rgba(var(--trust-rgb),0.22);

  /* ── MEANING ────────────────────────────────────────────────────────────── */
  --good:          #144c29;                    /* savings. Nothing else. 10.02:1 */
  --good-soft:     #14663a;
  --good-wash:     rgba(var(--good-rgb),0.07);
  --good-edge:     rgba(var(--good-rgb),0.22);

  --warn-ink:      #9a3412;                    /* warning text          6.88:1 */
  --warn-wash:     rgba(var(--warn-rgb),0.07);
  --warn-edge:     rgba(var(--warn-rgb),0.28);

  --bad:           #b91c1c;                    /* errors, refusals */
  --bad-soft:      #dc2626;

  /* ── BADGES — each means one specific thing on a plan row. ──────────────── */
  --perk:          #6d28d9;                    /* incentives, sign-up credits */
  --meter:         #0369a1;                    /* smart-meter eligibility */
  --freebie:       #15803d;                    /* free usage period */

  /* ── HERO BAND — the split. Navy carries the headline and the call to
   * action, then white takes over for the reading. The mango button pops on
   * navy and goes flat on white, so this keeps the punch without a dark page.
   * The green is NOT used here: #144c29 on navy is 1.87:1. Green is a
   * light-section colour. */
  --hero-bg:       #0b1220;
  --hero-ink:      #ffffff;                    /* 18.72:1 */
  --hero-ink-muted:#b6c0d0;                    /* 10.20:1 */
  --hero-brand:    #f89827;                    /*  8.48:1 — the TRUE mango, readable here */
  --hero-faint:    #8fa0b8;
  --hero-line:     rgba(255,255,255,0.12);

  /* ── UTILITY ────────────────────────────────────────────────────────────── */
  --censor:        #e7e0d6;                    /* redaction blocks over bill details */

  /* ── ELEVATION — on a white ground, depth comes from shadow rather than from
   * a lighter surface. On dark it would be none. */
  --shadow:        0 1px 3px rgba(var(--ink-rgb),0.07), 0 8px 24px rgba(var(--ink-rgb),0.05);

  /* ── SHAPE ──────────────────────────────────────────────────────────────── */
  --radius:        12px;
  --radius-lg:     14px;
  --radius-pill:   20px;
}

/* ── SHARED COMPONENTS ─────────────────────────────────────────────────────
 * Used by the static pages (about, faq, how-it-works, privacy, terms, contact,
 * the guides) and the hub. billcheck.html keeps its own app-specific layout but
 * draws every colour from the tokens above.
 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--trust); }

.wrap { max-width: 720px; margin: 0 auto; padding: 40px 20px 64px; }

h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.6px; margin-bottom: 10px; line-height: 1.25; }
h2 { font-size: 19px; font-weight: 700; margin: 38px 0 10px; color: var(--ink-strong); letter-spacing: -0.2px; }
h3 { font-size: 15px; font-weight: 700; margin: 22px 0 6px; color: var(--ink); }
p, li { color: var(--ink-dim); font-size: 15px; margin-bottom: 10px; }
ul { padding-left: 22px; margin-bottom: 10px; }
li { margin-bottom: 6px; }
strong { color: var(--ink); }

.back { display: inline-block; margin-bottom: 24px; color: var(--ink-muted); text-decoration: none; font-size: 14px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin: 16px 0; }
.card h3 { margin-top: 0; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }

.lead { background: var(--good-wash); border: 1px solid var(--good-edge); border-radius: var(--radius); padding: 16px 18px; margin: 22px 0 30px; }
.lead p { color: var(--good-soft); margin: 0; font-size: 15px; }

/* Rule 2: a warning is an outlined box with a wash. Never a fill. */
.warn { background: var(--warn-wash); border: 1px solid var(--warn-edge); border-radius: var(--radius); padding: 16px 18px; margin: 16px 0; }
.warn h3 { color: var(--warn-ink); margin-top: 0; }
.warn p:last-child, .warn ul:last-child { margin-bottom: 0; }

.pull { border-left: 3px solid var(--brand); padding: 4px 0 4px 16px; margin: 22px 0; color: var(--ink); font-size: 16px; }

table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14.5px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); color: var(--ink-dim); vertical-align: top; }
th { color: var(--ink); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px; }
td:first-child { color: var(--ink); width: 42%; }

/* Rule 1: brand mango is a solid fill, with dark text on it. */
.cta {
  display: block; text-align: center;
  background: var(--brand); color: var(--on-brand);
  font-weight: 800; font-size: 16px; text-decoration: none;
  padding: 15px 20px; border-radius: var(--radius); margin: 34px 0 8px;
}

.foot { color: var(--ink-muted); font-size: 13px; border-top: 1px solid var(--line); margin-top: 40px; padding-top: 18px; text-align: center; line-height: 1.8; }
.foot a { color: var(--ink-muted); }