/* MenYew site theme — shared by the landing page and the release pages.
   Light is the base; dark is applied from the visitor's own system setting.
   Every colour is a token so the canvas meters can read them back at runtime
   and repaint when the setting changes. */

:root{
  /* Light: a pale faceplate — warm paper, ink-black lettering, amber accent. */
  --chassis:#f3f0ea; --panel:#ffffff; --panel-2:#faf8f4; --sunk:#e9e6df;
  --rule:#dcd7cd; --rule-soft:#e6e2da; --track:#dcd8d0;
  --ink:#1b1d20; --dim:#5b6068; --faint:#8b9098;
  --amber:#b06a06; --amber-deep:#8a5307; --amber-ink:#ffffff;
  --cool:#0d7ab0; --violet:#6d4fd0;
  --led-lo:#16a34a; --led-mid:#d97706; --led-hi:#dc2626;
  /* Meter colours are separate from the site's own accent so a colour theme can
     repaint every gauge without touching the buttons and links. */
  --m-accent:var(--amber); --m-alt:var(--cool);
  --m-lo:var(--led-lo); --m-mid:var(--led-mid); --m-hi:var(--led-hi);
  --shadow:0 18px 40px -26px rgba(28,26,20,.5);
  --bar-top:#e9e6e0; --bar-bot:#ded9d1;
  --radius:10px;
  color-scheme:light;
}

@media (prefers-color-scheme: dark){
  :root{
    /* Dark: the hi-fi chassis the app itself lives in. */
    --chassis:#17191c; --panel:#1e2125; --panel-2:#23272d; --sunk:#131518;
    --rule:#2b2f35; --rule-soft:#232830; --track:#2a2e35;
    --ink:#e8e5de; --dim:#8d919a; --faint:#5d626b;
    --amber:#f0a021; --amber-deep:#b8730c; --amber-ink:#1a1206;
    --cool:#5cc8f5; --violet:#a78bfa;
    --led-lo:#4ade80; --led-mid:#fbbf24; --led-hi:#ef4444;
    --m-accent:var(--amber); --m-alt:var(--cool);
    --m-lo:var(--led-lo); --m-mid:var(--led-mid); --m-hi:var(--led-hi);
    --shadow:0 18px 40px -24px #000;
    --bar-top:#212429; --bar-bot:#191c20;
    color-scheme:dark;
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--chassis);color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--amber);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace}

h1,h2,h3{font-family:Archivo,-apple-system,sans-serif;letter-spacing:-.02em;line-height:1.08}
h1{font-size:clamp(32px,5.4vw,54px);font-weight:800;font-stretch:expanded}
h2{font-size:clamp(24px,3.2vw,34px);font-weight:800}
h3{font-size:20px;font-weight:700;letter-spacing:-.015em}
.eyebrow{
  font:500 11px/1 "IBM Plex Mono",ui-monospace,monospace;
  text-transform:uppercase;letter-spacing:.2em;color:var(--amber);
}
.lede{color:var(--dim);font-size:18px;max-width:36em}

.btn{
  display:inline-block;background:var(--amber);color:var(--amber-ink);
  font-weight:700;font-size:15px;padding:12px 22px;border-radius:8px;
  border:1px solid var(--amber-deep);
}
.btn:hover{filter:brightness(1.08);text-decoration:none}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule);font-weight:600}
.btn.ghost:hover{background:var(--panel);border-color:var(--faint);filter:none}

footer{border-top:1px solid var(--rule-soft);padding:34px 0 56px;color:var(--faint);font-size:13px}
footer .row{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
footer a{color:var(--dim)}

@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }