/* ============================================================
   Shared base — resets, page chrome, typography
   Requires tokens.css to be linked first.
   ============================================================ */

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{
  margin:0; padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
}

body{ min-height:100vh; padding-bottom:90px; }

button, input, select, textarea{ font-family:inherit; }
.mono{ font-family:var(--mono); }
a{ color:var(--accent); }

/* Default hover feedback for every button-like control across all three
   apps: a uniform ~10% brightness lift instead of a hand-picked hover
   color per button/app. Works the same whether the button's background is
   an accent color (primary buttons, the FAB), a plain surface tone
   (secondary buttons), or transparent (ghost/icon buttons — it brightens
   the icon/text/border instead, since there's no fill to lift), so it
   doesn't need a --xxx-hover variable defined for every color everywhere.
   Covers <button> directly, plus .fab-mini for the one button-like control
   built on an <a> tag (the "Buy me a coffee" link in the FAB stack). */
button:not(:disabled):hover,
.fab-mini:hover{
  filter:brightness(1.1);
}

/* Page container: every app's main content sits inside this,
   centered at a shared max width with a shared side inset. */
main{
  max-width:720px; margin:0 auto;
  padding:16px;
  display:flex; flex-direction:column;
}

h1{
  font-size:24px; font-weight:700; letter-spacing:-0.01em;
  margin:0; color:var(--text);
  display:flex; align-items:center; gap:10px;
}