/* ============================================================
   MAVI FOUNDATION — shared theme tokens
   Mirrors the design system of mavifoundation.org
   Brand blue: #009aff | CTA orange: #f47629
   Light by default; [data-theme="dark"] overrides.
   ============================================================ */

:root{
  --brand:#009aff; --brand-deep:#0073d6;
  --cta:#f47629;  --cta-deep:#e25c12;
  --sun:#ffc23c; --mint:#21c7a8; --coral:#ff6b8a; --violet:#8b7cff;
  --mint-deep:#0e8f78; --good:#21c7a8; --bad:#ff6b8a;

  --bg:#fef8f1; --bg-blue:#eaf5ff; --bg-peach:#fff1e3; --bg-mint:#e7faf4; --bg-violet:#f1efff;
  --surface:#ffffff; --surface-2:#fff7ee;
  --ink:#1d2742; --ink-soft:#46506c; --muted:#7e8aa3;
  --line:#f0e6d8; --line-2:#e6dccc;

  --shadow-sm:0 2px 6px rgba(29,39,66,.06);
  --shadow:0 14px 34px rgba(29,39,66,.10);
  --shadow-lg:0 28px 70px rgba(29,39,66,.16);
  --shadow-brand:0 16px 40px rgba(0,154,255,.30);
  --shadow-cta:0 16px 38px rgba(244,118,41,.34);

  --display:"Baloo 2",system-ui,sans-serif;
  --body:"Nunito",system-ui,sans-serif;

  --r:14px; --r-md:20px; --r-lg:30px; --r-xl:42px; --r-pill:100px;

  /* mascot palette (kept constant so Mavi always looks like Mavi) */
  --mavi-body:#009aff; --mavi-deep:#0073d6; --mavi-light:#5cc2ff;
  --mavi-belly:#eaf5ff; --mavi-ink:#1d2742; --mavi-accent:#f47629; --mavi-cheek:#ff6b8a;

  color-scheme:light;
}
[data-theme="dark"]{
  --brand:#37b0ff; --brand-deep:#7cc8ff;
  --cta:#ff8c44; --cta-deep:#ffa770;
  --sun:#ffce5e; --mint:#33d6b6; --coral:#ff8099; --violet:#a99bff;
  --mint-deep:#33d6b6;

  --bg:#0d1525; --bg-blue:#10203a; --bg-peach:#1d1a2e; --bg-mint:#102a2a; --bg-violet:#18183a;
  --surface:#16213a; --surface-2:#1b2742;
  --ink:#eef3fb; --ink-soft:#c6d2e8; --muted:#90a0bd;
  --line:#26334e; --line-2:#33446a;

  --shadow-sm:0 2px 6px rgba(0,0,0,.4);
  --shadow:0 16px 40px rgba(0,0,0,.5);
  --shadow-lg:0 30px 70px rgba(0,0,0,.6);
  --shadow-brand:0 16px 44px rgba(55,176,255,.35);
  --shadow-cta:0 16px 40px rgba(255,140,68,.32);

  color-scheme:dark;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--body);background:var(--bg);color:var(--ink);line-height:1.5;font-weight:600;transition:background .35s,color .35s}
img{max-width:100%;display:block}
svg{display:block}
button{font:inherit;color:inherit}

h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.05;color:var(--ink);letter-spacing:-.01em}
p{color:var(--ink-soft)}

/* ---- text colour helpers ---- */
.t-brand{color:var(--brand)} .t-cta{color:var(--cta)} .t-sun{color:#e0a000} .t-mint{color:var(--mint-deep)}
.t-coral{color:var(--coral)} .t-violet{color:var(--violet)} .t-muted{color:var(--muted)}
[data-theme="dark"] .t-sun{color:var(--sun)}

/* ---- kicker pill ---- */
.kicker{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--body);font-weight:800;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);background:color-mix(in srgb,var(--brand) 14%,transparent);padding:.45rem 1rem;border-radius:var(--r-pill)}
.kicker.k-cta{color:var(--cta-deep);background:color-mix(in srgb,var(--cta) 18%,transparent)}
.kicker.k-mint{color:var(--mint-deep);background:color-mix(in srgb,var(--mint) 22%,transparent)}
.kicker.k-violet{color:var(--violet);background:color-mix(in srgb,var(--violet) 18%,transparent)}
[data-theme="dark"] .kicker.k-cta{color:var(--cta)}

/* ---- buttons ---- */
.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--display);font-weight:700;font-size:1.02rem;padding:.85rem 1.7rem;border-radius:var(--r-pill);border:2.5px solid transparent;cursor:pointer;transition:transform .18s,box-shadow .25s,background .2s,color .2s;white-space:nowrap}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-cta{background:var(--cta);color:#fff;box-shadow:var(--shadow-cta)}
.btn-cta:hover{transform:translateY(-3px);box-shadow:0 20px 46px rgba(244,118,41,.46)}
.btn-brand{background:var(--brand);color:#fff;box-shadow:var(--shadow-brand)}
.btn-brand:hover{transform:translateY(-3px)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-3px)}
.btn:focus-visible{outline:3px solid var(--sun);outline-offset:3px}

/* ---- cards ---- */
.card{background:var(--surface);border:2px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow)}

/* soft section colours */
.bg-cream{background:var(--bg)} .bg-blue{background:var(--bg-blue)} .bg-peach{background:var(--bg-peach)}
.bg-mint{background:var(--bg-mint)} .bg-violet{background:var(--bg-violet)}