/* ─────────────────────────────────────────────────────────────────────────
   MidBank Tipping — light-theme bridge for the two pages whose PROSE must not
   be touched: tipping-pricing.html and tipping-compare.html.

   Those two are the honest ones. Pricing carries a working fee calculator;
   Compare carries competitor quotes with the URL and the date each was
   checked. Retyping either into a new template is how a sourced claim quietly
   becomes an unsourced one, so they were not rewritten — they were re-lit.

   This file loads AFTER css/tipping-system.css and simply redefines that
   system's own tokens for a white page. The pages' inline styles all reference
   those tokens, so the whole composition follows without one prose edit.

   Load order on those pages:
     tipping-system.css  → the dark app system (owned by the product lane)
     tipping-marketing.css → the white marketing system (nav, footer, buttons)
     tipping-light.css   → this file, which reconciles the two
   ───────────────────────────────────────────────────────────────────────── */

:root{
  /* surfaces — what was near-black is now paper */
  --mb-base:#ffffff;
  --mb-base-2:#F5F6FA;
  --mb-surface:#ffffff;
  --mb-surface-2:#F5F6FA;
  --mb-hairline:#E3E5EE;
  --mb-hairline-strong:#CBCFDF;

  /* brand — indigo becomes MidBank navy, the ink in the actual logo file.
     Red is reserved for rules and hover; it never becomes a surface here. */
  --mb-primary:#2C2E83;
  --mb-primary-press:#232562;
  --mb-accent:#2C2E83;
  --mb-accent-soft:#1B1C52;
  --mb-red:#DD1726;

  /* ink — inverted, with the same four steps of emphasis */
  --mb-ink:#101223;
  --mb-ink-2:#4A4E63;
  --mb-ink-3:#71768C;
  --mb-ink-4:#8F94A8;

  /* type — Inter throughout; the display serif does not belong on a white
     marketing page that is otherwise set in one family */
  --mb-font-display:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mb-font-ui:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;

  /* radii — the marketing surface is rounder than the app */
  --mb-r-card:22px;

  /* shadows — on white, depth is a soft cast, never a black halo */
  --mb-shadow-ambient:0 1px 2px rgba(16,18,35,.04);
  --mb-shadow-glow:0 18px 44px -24px rgba(44,46,131,.42);

  --mb-w-page:1160px;
}

/* The base rule in tipping-system.css paints html and body with a fixed dark
   gradient. Repaint both, and drop the attachment so iOS does not keep a
   scroll-locked layer behind the page. */
html,body{background-color:#fff!important;background-image:none!important;
  background-attachment:scroll!important;color:var(--mb-ink)!important;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif!important}

/* The ambient indigo bloom behind the hero becomes a green one. */
.mb-field::before{background:radial-gradient(ellipse 120% 80% at 50% 0%,
  rgba(44,46,131,.13),transparent 62%)!important}

/* Headings in these pages were set in the display serif at display weight. */
.mb-serif{font-family:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-weight:700;letter-spacing:-.028em}
h1,h2,h3{font-weight:700;letter-spacing:-.026em}

/* Cards: the dark system used a translucent white fill that reads as grey on
   paper. Give them a real border and the marketing shadow instead. */
.mb-card{background:#fff;border:1px solid var(--mb-hairline);
  box-shadow:0 1px 2px rgba(16,18,35,.04),0 8px 28px -12px rgba(16,18,35,.10)}

/* Buttons: match the marketing pill exactly, so a page that mixes .mb-btn and
   .t-btn does not show two different buttons side by side. */
.mb-btn{border-radius:999px;font-weight:600}
.mb-btn--primary{background:var(--mb-primary);color:#fff;
  box-shadow:0 1px 2px rgba(27,28,82,.20),0 10px 24px -12px rgba(44,46,131,.55)}
.mb-btn--primary:hover{background:var(--mb-primary-press)}
.mb-btn--ghost{background:#fff;color:var(--mb-ink);
  box-shadow:inset 0 0 0 1px var(--mb-hairline-strong)}
.mb-btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--mb-ink)}

/* Focus ring: the dark system ringed against the old base colour. */
:where(a,button,input,textarea,[tabindex]):focus-visible{
  box-shadow:0 0 0 2px #fff,0 0 0 4px var(--mb-primary)!important}

/* Inputs (the fee calculator and the estimator) were dark fields. */
input,select,textarea{background:#fff!important;color:var(--mb-ink)!important;
  border-color:var(--mb-hairline-strong)!important}
input::placeholder{color:var(--mb-ink-4)!important}

/* The sandbox pill and the demo-data tag both relied on a glow on black. */
.mb-sandbox{background:var(--mb-surface-2);border-color:var(--mb-hairline);
  color:var(--mb-ink-3)}
.mb-sandbox::before{background:var(--mb-primary);box-shadow:none}

/* Receipt rows: a dashed leader reads better than a hairline on paper. */
.mb-receipt{background:#fff;border:1px solid var(--mb-hairline);border-radius:var(--mb-r-card)}
.mb-receipt .row{border-bottom-color:var(--mb-hairline)}

/* Tables in the comparison page: give our own column a tint so the eye can
   find it, and make every other border a paper hairline. */
table th,table td{border-color:var(--mb-hairline)!important}
thead th{color:var(--mb-ink-3)}

/* Anything that painted a white-on-dark image (the old nav lockup, footer
   marks) is replaced by the marketing chrome, so nothing here needs to invert
   an asset — but a stray dark-only logo would vanish on white, so flag it
   loudly in review rather than silently: */
img[src*="-white.png"]{filter:none}

/* The dark pages set their own foot rule; the marketing footer supplies one. */
.foot{border-top-color:var(--mb-hairline)}