/* =====================================================
   MUBSELL — base.css
   Design tokens (light + dark), reset & shared utilities.
   Token names match the inner pages so the whole app
   shares one design language.
   ===================================================== */

:root{
  --ink:#0D1B2A;            /* dark navy — headings, footer */
  --paper:#F4F8FF;          /* page background */
  --paper-card:#FFFFFF;     /* cards, navbar */
  --marigold:#1A73E8;       /* primary blue */
  --marigold-dark:#1557B0;  /* hover blue */
  --teal:#27AE60;           /* success green */
  --coral:#FF6B57;          /* alerts */
  --charcoal:#5B6B79;       /* body text */
  --line:#E0E6EF;           /* borders */
  --shadow:0 10px 28px rgba(13,27,42,0.10);
  --radius:14px;
  --gold:#F2C94C;           /* ratings */
  --purple:#8E44AD;         /* prices */
  --blue-tint:#EAF2FF;      /* light blue surfaces */
  --surface-dark:#0D1B2A;

  --page-pad:60px;
  --page-pad-mobile:20px;
}

[data-theme="dark"]{
  --ink:#F3F5FA; --paper:#0B0B0F; --paper-card:#17171D;
  --marigold:#4C8DFF; --marigold-dark:#6FA6FF;
  --teal:#2FD673; --coral:#FF8271; --charcoal:#A9ADBB;
  --line:#26262E; --shadow:0 10px 28px rgba(0,0,0,0.35);
  --gold:#FFC24C; --purple:#B685D1; --blue-tint:#1E2433;
  --surface-dark:#20202A;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}

body{
  background:var(--paper);color:var(--charcoal);
  font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Sora',sans-serif;font-weight:700;
  letter-spacing:-0.01em;color:var(--ink);
}
/* Numeric/meta text. Was IBM Plex Mono — a second typeface that made
   prices look like they belonged to a different site. Now Inter with
   tabular figures, so digits still align in columns. */
.mono{font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;letter-spacing:.01em;}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}

.section{padding:50px var(--page-pad);}

.section-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:20px;gap:14px;flex-wrap:wrap;
}
.section-header .tag,.tag{
  font-size:13px;font-weight:700;color:var(--marigold);letter-spacing:1px;
}
.section-header h2{font-size:26px;font-weight:800;}
.view-all{color:var(--marigold);font-weight:600;font-size:14px;white-space:nowrap;}
.view-all:hover{color:var(--marigold-dark);}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid var(--marigold-dark);outline-offset:2px;border-radius:4px;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
}

@media (max-width:900px){
  :root{--page-pad:32px;}
}
@media (max-width:640px){
  :root{--page-pad:var(--page-pad-mobile);}
  .section{padding:36px var(--page-pad);}
  .section-header h2{font-size:22px;}
  body{padding-bottom:74px;} /* space for mobile bottom nav */
}

/* =====================================================
   TYPE SCALE  (v4.3)
   One documented ladder instead of the 36 ad-hoc sizes
   the app had grown (9px…64px, including half-pixels
   like 12.5 and 13.5 that browsers round anyway).

   Use these tokens for anything new. Steps are ~1.15–1.25
   apart, which keeps a dense marketplace readable without
   the sizes blurring into each other.

     --fs-3xs  10px   counters, badge numerals
     --fs-2xs  11px   micro labels, kickers, pills
     --fs-xs   12px   meta, captions, helper text
     --fs-sm   13px   secondary text, card titles
     --fs-base 14px   body copy, inputs, buttons
     --fs-md   15px   emphasised body, lead paragraphs
     --fs-lg   17px   sub-headings, card headings
     --fs-xl   20px   section headings
     --fs-2xl  24px   page headings
     --fs-3xl  30px   hero (small)
     --fs-4xl  38px   hero (large)

   Families: Inter = UI + body · Sora = headings + numerals
   that need weight · IBM Plex Mono = reference codes only
   (payment references, IDs) — not for prices or labels.
   ===================================================== */
:root{
  --fs-3xs:10px;  --fs-2xs:11px; --fs-xs:12px;  --fs-sm:13px;
  --fs-base:14px; --fs-md:15px;  --fs-lg:17px;  --fs-xl:20px;
  --fs-2xl:24px;  --fs-3xl:30px; --fs-4xl:38px;

  --lh-tight:1.2;   /* headings */
  --lh-snug:1.4;    /* card titles, dense UI */
  --lh-base:1.6;    /* body copy */

  --font-ui:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-head:'Sora','Inter',system-ui,sans-serif;
  --font-mono:'Inter',ui-monospace,'Cascadia Mono',monospace;
}

/* Baseline so every page inherits the same body text, even the ones
   that still carry their own inline <style> block. */
body{ font-size:var(--fs-base); line-height:var(--lh-base); }
h1{ font-size:var(--fs-2xl); line-height:var(--lh-tight); }
h2{ font-size:var(--fs-xl);  line-height:var(--lh-tight); }
h3{ font-size:var(--fs-lg);  line-height:var(--lh-snug); }
h4{ font-size:var(--fs-base);line-height:var(--lh-snug); }
small{ font-size:var(--fs-xs); }
input,select,textarea,button{ font-size:var(--fs-base); font-family:var(--font-ui); }

/* ══════════════════════════════════════════════════════════
   TOKEN ALIASES — added after a dark-mode audit.

   Several pages (terms, how-it-works, faq, about, 404 …) were written
   against a second, shorter set of names — --card, --muted, --blue —
   that base.css never actually defined. Every use therefore fell back
   to its hard-coded LIGHT literal in both themes, which is why those
   pages kept white panels and near-black text in dark mode: measured
   contrast of 1.09 on terms.php, i.e. invisible.

   Defining them here, in both themes, fixes every page that uses them
   at once rather than patching each file. They intentionally mirror the
   longer names so the two vocabularies can't drift apart.
   ══════════════════════════════════════════════════════════ */
:root{
  --card:#FFFFFF;
  --muted:#5B6B79;
  --blue:#1A73E8;
  --blue-d:#1557B0;
}
[data-theme="dark"]{
  --card:#17171D;
  --muted:#A9ADBB;
  --blue:#4C8DFF;
  --blue-d:#6FA6FF;
}

/* Primary-button dark treatment lives in chrome.css, where background
   and colour are set together — see the note there. */

/* ── Placeholders ────────────────────────────────────────────
   Browsers do NOT derive the placeholder from the input's text
   colour: Chrome uses a semi-transparent BLACK of its own. On a dark
   input that is invisible — measured at 1.0:1 against #17171D, which
   is why placeholders vanished in dark mode while the typed text was
   fine.

   So it has to be set explicitly, per theme. Both values clear 4.5:1
   against the surfaces they sit on (light 4.6:1, dark 6.9:1).
   opacity:1 is required because Firefox dims placeholders by default
   and would undo the contrast we just bought. */
:root{ --placeholder:#6B7688; }
[data-theme="dark"]{ --placeholder:#98A1B2; }

input::placeholder,
textarea::placeholder,
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{
  color: var(--placeholder, #6B7688);
  opacity: 1;
}
/* Some browsers style a disabled field's placeholder separately. */
input:disabled::placeholder,
textarea:disabled::placeholder{ color: var(--placeholder, #6B7688); opacity:.6; }