/* ============================================================
   variables.css — Design System (colors, shadows, radii, motion)
   ============================================================ */
:root{
  /* Surfaces */
  --bg:#F2F6F0;
  --bg-soft:#ECF2E9;
  --surface:#FFFFFF;
  --surface-2:#FBFDFA;
  --surface-3:#F6F9F4;

  /* Ink — deep premium green */
  --ink:#0C2819;
  --ink-2:#143F2A;
  --ink-soft:#415C4E;
  --muted:#6E8176;

  /* Accent greens */
  --accent:#2E7D5B;
  --accent-strong:#1E5C42;
  --accent-deep:#123A29;
  --accent-soft:#DCEBE1;
  --accent-tint:#EDF5EF;

  /* Lines + shadows */
  --line:#E4EAE1;
  --line-strong:#D5DFD2;
  --ring:#BBD8C6;

  --shadow-sm:0 1px 2px rgba(12,40,25,.05),0 1px 1px rgba(12,40,25,.04);
  --shadow-md:0 12px 32px -14px rgba(12,40,25,.20);
  --shadow-lg:0 34px 80px -24px rgba(12,40,25,.30);

  /* Radii */
  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --r-xl:30px;

  --sidebar-w:248px;

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:0.5s;
}