/* Mars Forge — the brand: one file for the site, Studio and what Studio makes (offers, thumbnails, intros).
   Green is the brand and every action; ember is a rare warm accent (thumbnails, intros, one highlight) and never a button.
   Names start with --mf- so they do not clash with older variables; pages move onto them step by step. */
:root{
  /* green: 400 is the brand colour */
  --mf-green-50:#e7fef1;--mf-green-100:#c4fbdc;--mf-green-200:#8ff7be;--mf-green-300:#55f49f;--mf-green-400:#12f282;
  --mf-green-500:#0ed06f;--mf-green-600:#0aa358;--mf-green-700:#087a43;--mf-green-800:#06522e;--mf-green-900:#04301c;
  /* ember: 400 is the warm accent */
  --mf-ember-50:#fff1eb;--mf-ember-100:#ffd9c9;--mf-ember-200:#ffb596;--mf-ember-300:#ff9063;--mf-ember-400:#ff6b35;
  --mf-ember-500:#e8521c;--mf-ember-600:#c03f12;--mf-ember-700:#93300e;--mf-ember-800:#66210a;--mf-ember-900:#3d1406;
  /* graphite: cool greys, 0 is the lightest */
  --mf-gray-0:#ffffff;--mf-gray-50:#e9edf3;--mf-gray-100:#d3dae4;--mf-gray-200:#b3bccb;--mf-gray-300:#8e99aa;--mf-gray-400:#6b7586;
  --mf-gray-500:#4b5565;--mf-gray-600:#2f3743;--mf-gray-700:#222934;--mf-gray-750:#1b212a;--mf-gray-800:#161b23;--mf-gray-850:#12161d;--mf-gray-900:#0e1117;--mf-gray-950:#0a0d12;
  /* one colour for each meaning */
  --mf-danger:#ff5a5a;--mf-warning:#ffc94a;--mf-info:#4fc3f7;--mf-success:var(--mf-green-400);

  /* what pages use */
  --mf-bg:var(--mf-gray-900);--mf-surface-1:var(--mf-gray-800);--mf-surface-2:var(--mf-gray-750);--mf-surface-3:var(--mf-gray-700);
  --mf-text:var(--mf-gray-50);--mf-text-2:var(--mf-gray-200);--mf-text-muted:var(--mf-gray-400);
  --mf-border:rgba(160,185,225,.08);--mf-border-strong:rgba(160,185,225,.15);--mf-border-brand:rgba(18,242,130,.35);
  --mf-accent:var(--mf-green-400);--mf-accent-hover:var(--mf-green-300);--mf-on-accent:var(--mf-green-900);--mf-accent-soft:rgba(18,242,130,.14);
  --mf-brand-2:var(--mf-ember-400);--mf-brand-2-soft:rgba(255,107,53,.14);

  /* type: Exo 2 for headings and the brand, Inter for everything you read */
  --mf-font-display:'Exo 2',Inter,system-ui,sans-serif;--mf-font-text:Inter,system-ui,sans-serif;--mf-font-mono:ui-monospace,Menlo,Consolas,monospace;
  --mf-fs-xs:.75rem;--mf-fs-sm:.8125rem;--mf-fs-md:.9375rem;--mf-fs-lg:1.125rem;--mf-fs-xl:1.375rem;--mf-fs-2xl:1.75rem;--mf-fs-3xl:2.5rem;--mf-fs-4xl:3.5rem;
  --mf-lh-tight:1.15;--mf-lh:1.55;

  /* space on a 4 px grid, corners, depth, motion */
  --mf-s-1:4px;--mf-s-2:8px;--mf-s-3:12px;--mf-s-4:16px;--mf-s-5:20px;--mf-s-6:24px;--mf-s-8:32px;--mf-s-10:40px;--mf-s-12:48px;--mf-s-16:64px;
  --mf-r-sm:6px;--mf-r-md:10px;--mf-r-lg:14px;--mf-r-xl:20px;--mf-r-pill:999px;
  --mf-shadow-1:inset 0 1px 0 rgba(255,255,255,.035),0 1px 2px rgba(0,0,0,.35);--mf-shadow-2:inset 0 1px 0 rgba(255,255,255,.04),0 1px 3px rgba(0,0,0,.32),0 4px 14px rgba(0,0,0,.22);--mf-shadow-3:inset 0 1px 0 rgba(255,255,255,.045),0 2px 6px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.3);--mf-shadow-4:0 4px 10px rgba(0,0,0,.3),0 18px 44px rgba(0,0,0,.45);--mf-shadow-5:0 8px 20px rgba(0,0,0,.25),0 30px 80px rgba(0,0,0,.55);
  --mf-btn:#19d47b;--mf-btn-hover:#34e08e;--mf-ring:0 0 0 3px rgba(18,242,130,.35);
  --mf-dur-fast:120ms;--mf-dur:200ms;--mf-dur-slow:320ms;--mf-ease:cubic-bezier(.2,.8,.2,1);
}
/* the buttons every page will share (step 4 moves the old ones onto these) */
.mf-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--mf-s-2);min-height:38px;padding:0 var(--mf-s-4);border-radius:var(--mf-r-md);border:1px solid transparent;font:600 var(--mf-fs-sm)/1 var(--mf-font-text);cursor:pointer;transition:background var(--mf-dur-fast) var(--mf-ease),border-color var(--mf-dur-fast) var(--mf-ease),transform var(--mf-dur-fast) var(--mf-ease);white-space:nowrap}
.mf-btn:active{transform:scale(.98)}.mf-btn:focus-visible{outline:0;box-shadow:var(--mf-ring)}
.mf-btn--primary{background:var(--mf-btn);color:#05210f;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(0,0,0,.4)}.mf-btn--primary:hover{background:var(--mf-btn-hover)}
.mf-btn--secondary{background:rgba(150,175,215,.085);border-color:transparent;color:var(--mf-text)}.mf-btn--secondary:hover{background:rgba(150,175,215,.13)}
.mf-btn--ghost{background:transparent;color:var(--mf-text-2)}.mf-btn--ghost:hover{background:rgba(255,255,255,.06);color:var(--mf-text)}
.mf-btn--danger{background:transparent;border-color:rgba(255,90,90,.45);color:var(--mf-danger)}.mf-btn--danger:hover{background:rgba(255,90,90,.12)}
.mf-btn--sm{min-height:30px;padding:0 var(--mf-s-3);font-size:var(--mf-fs-xs);border-radius:var(--mf-r-sm)}