/* ============================================================
   base.css — CSS variables, reset, typography, scrollbar
   ============================================================ */

:root{
  --bg:#f7f4ef;--bg2:#efebe3;--bg3:#e6e0d6;
  --ink:#14120f;--ink2:#4a4640;--ink3:#8a847c;
  --accent:#c44d28;--accent-soft:rgba(196,77,40,.12);
  --green:#1f6b42;--blue:#1e4d7a;--gold:#9a6f0f;
  --border:rgba(20,18,15,.08);--border-strong:rgba(20,18,15,.14);
  --radius:12px;--radius-sm:8px;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'DM Sans',system-ui,sans-serif;
  --sidebar:248px;
  --shadow-sm:0 1px 2px rgba(20,18,15,.04),0 2px 8px rgba(20,18,15,.04);
  --shadow-md:0 4px 6px rgba(20,18,15,.04),0 12px 32px rgba(20,18,15,.08);
  --shadow-lg:0 8px 24px rgba(20,18,15,.1);
  --sidebar-bg:#121110;
  --sidebar-hover:rgba(255,255,255,.06);
  --sidebar-active:rgba(196,77,40,.15);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;}
body{
  background:var(--bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 100% -10%,rgba(196,77,40,.06),transparent),
    radial-gradient(ellipse 60% 40% at 0% 100%,rgba(30,77,122,.04),transparent);
  color:var(--ink);font-family:var(--sans);min-height:100vh;display:flex;font-size:14px;line-height:1.5;
}

::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px;}
::-webkit-scrollbar-thumb:hover{background:var(--ink3);}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
input[type=number]{-moz-appearance:textfield;}