/* ============================================================
   Paperflip — base.css
   Design tokens + reset shared by BOTH surfaces (dashboard and
   kiosk). Load this first, then the page's own stylesheet:

     <link rel="stylesheet" href="./styles/base.css">
     <link rel="stylesheet" href="./styles/dashboard.css">

   Anything here must be true of both pages. Page-specific sizing
   (body font-size, focus ring) is overridden in the page sheet.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&family=Newsreader:opsz,wght@6..72,400;6..72,500&display=swap');

/* ---------- 1. Design tokens ---------- */
:root{
  /* surfaces */
  --paper:#E7EBF0; --sheet:#FFFFFF;
  /* text */
  --ink:#18222F; --ink-soft:#5C6B7D;
  /* lines */
  --rule:#C6D0DB; --rule-soft:#DFE5EC;
  /* a fillable blank (yellow) */
  --slot:#FFE87A; --slot-soft:#FFF6C9;
  /* a calculated value (blue) */
  --calc:#9CC9EC; --calc-soft:#EDF5FC;
  /* status */
  --stamp:#B3283F; --go:#1C6551;
  /* type */
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --serif:'Newsreader',Georgia,serif;
}

/* ---------- 2. Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
code{font-family:var(--mono);font-size:.92em}

/* ---------- 3. Accessibility ---------- */
:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}