/* ---------- Base reset ---------- */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
.icon{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.icon-fill{fill:currentColor;stroke:none;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important;}}
table{border-collapse:collapse;width:100%;}

/* ---------- Tokens ----------
   Scoped to .app-shell (not :root) so the theme toggle can work by setting a
   data-theme attribute on a wrapper div, with no JS interop needed to reach <html>. */
.app-shell{
  min-height:100vh;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;

  --paper:#F3F5F4;
  --surface:#FFFFFF;
  --surface-2:#EAEDEC;
  --border:#DCE2E0;
  --ink:#1B2422;
  --ink-soft:#57635F;
  --accent:#1F6F6B;
  --accent-contrast:#FFFFFF;
  --accent-soft:#E4EFED;
  --danger:#B3453C;
  --ok:#3F8F5C;
  --warn:#B08A2E;
  --shadow-sm:0 1px 2px rgba(20,30,28,.07);
  --shadow-md:0 6px 20px rgba(20,30,28,.10);

  --font-body:Calibri,"Segoe UI",system-ui,-apple-system,sans-serif;

  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:18px;
  --radius-full:999px;
}

@media (prefers-color-scheme:dark){
  .app-shell:not([data-theme="light"]){
    --paper:#141B1D;
    --surface:#1B2426;
    --surface-2:#233030;
    --border:#324140;
    --ink:#E7ECEA;
    --ink-soft:#9DACA8;
    --accent:#4FB3A9;
    --accent-contrast:#0B1514;
    --accent-soft:#1E3735;
    --danger:#E08A80;
    --ok:#7FC79A;
    --warn:#E0BE70;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 10px 26px rgba(0,0,0,.45);
  }
}
.app-shell[data-theme="dark"]{
  --paper:#141B1D;
  --surface:#1B2426;
  --surface-2:#233030;
  --border:#324140;
  --ink:#E7ECEA;
  --ink-soft:#9DACA8;
  --accent:#4FB3A9;
  --accent-contrast:#0B1514;
  --accent-soft:#1E3735;
  --danger:#E08A80;
  --ok:#7FC79A;
  --warn:#E0BE70;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 10px 26px rgba(0,0,0,.45);
}

h1,h2,h3{margin:0;text-wrap:balance;font-weight:600;}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;}
a{color:var(--accent);text-decoration:none;}