/* ---------- Design tokens ---------- */
:root {
  /* Neutrals — warm-tinted (subtly) */
  --bg: #FBFAF8;
  --surface: #FFFFFF;
  --surface-2: #F6F4F0;
  --surface-3: #EFEDE7;
  --border: #E7E3DC;
  --border-strong: #D8D2C7;
  --ink: #1A1915;
  --ink-2: #3A3830;
  --ink-3: #6B675D;
  --ink-4: #9B978C;
  --ink-5: #BFBBB0;

  /* Accents */
  --accent: #C8253E;            /* refined rose, warmer than tailwind rose-600 */
  --accent-ink: #8C1329;
  --accent-soft: #FDEEF0;
  --accent-border: #F3CAD1;

  /* Status */
  --ok: #0F7A3F;
  --ok-soft: #E6F4EC;
  --ok-border: #C4E4CF;
  --warn: #A66A00;
  --warn-soft: #FBF1DA;
  --warn-border: #EDD9A2;
  --err: #B42318;
  --err-soft: #FBEAE9;
  --err-border: #F3C7C2;
  --info: #1B5FBF;
  --info-soft: #E8F0FB;
  --info-border: #C5D8F2;
  --purple: #6E3BB8;
  --purple-soft: #F0EAFB;
  --purple-border: #D8C7F1;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(24, 22, 16, 0.04), 0 0 0 1px rgba(24, 22, 16, 0.03);
  --shadow-md: 0 4px 12px rgba(24, 22, 16, 0.06), 0 1px 2px rgba(24, 22, 16, 0.04);
  --shadow-lg: 0 20px 40px -12px rgba(24, 22, 16, 0.14), 0 4px 12px rgba(24, 22, 16, 0.06);
  --shadow-drawer: -20px 0 50px -20px rgba(24, 22, 16, 0.18);

  /* Type */
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-display: "Instrument Serif", "Georgia", serif;

  /* Density */
  --row-h: 40px;
  --pad-row: 10px 14px;
  --fs-body: 13px;
  --fs-sm: 12px;
  --fs-xs: 11px;
  --fs-lg: 15px;

  /* Layout */
  --sidebar-w: 232px;
  --topbar-h: 52px;
}

/* Density: comfortable */
:root[data-density="comfortable"] {
  --row-h: 48px;
  --pad-row: 14px 16px;
  --fs-body: 14px;
}

/* Dark mode */
:root[data-theme="dark"] {
  --bg: #131210;
  --surface: #1A1916;
  --surface-2: #201E1A;
  --surface-3: #2A2824;
  --border: #2E2C27;
  --border-strong: #3A3832;
  --ink: #F4F1EB;
  --ink-2: #D6D2C9;
  --ink-3: #9A958A;
  --ink-4: #6B675D;
  --ink-5: #45423C;

  --accent: #E14B5F;
  --accent-ink: #F2A2AC;
  --accent-soft: #2A1619;
  --accent-border: #3D1C21;

  --ok: #3DAF73;
  --ok-soft: #132A1E;
  --ok-border: #1F3A2B;
  --warn: #D9A45C;
  --warn-soft: #2A220F;
  --warn-border: #3D3017;
  --err: #E57364;
  --err-soft: #2A1814;
  --err-border: #3D211C;
  --info: #5C94E8;
  --info-soft: #132238;
  --info-border: #1F3152;
  --purple: #A585D9;
  --purple-soft: #1E1930;
  --purple-border: #2E2548;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.03);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-lg: 0 20px 40px -12px rgba(0,0,0,0.5);
  --shadow-drawer: -20px 0 50px -20px rgba(0,0,0,0.6);
}

/* Accent hue variants (for Tweaks) */
:root[data-accent="emerald"] { --accent: #0F7A3F; --accent-ink: #0B5D30; --accent-soft: #E6F4EC; --accent-border: #C4E4CF; }
:root[data-accent="indigo"]  { --accent: #3E4CC7; --accent-ink: #2B36A0; --accent-soft: #EBEDFA; --accent-border: #C8CDF0; }
:root[data-accent="amber"]   { --accent: #B4700A; --accent-ink: #7E4E06; --accent-soft: #FBF1DA; --accent-border: #EDD9A2; }
:root[data-theme="dark"][data-accent="emerald"] { --accent: #3DAF73; --accent-soft: #13241A; --accent-border: #1F3A2B; }
:root[data-theme="dark"][data-accent="indigo"]  { --accent: #7E8AE0; --accent-soft: #181B3A; --accent-border: #2A2F55; }
:root[data-theme="dark"][data-accent="amber"]   { --accent: #D9A45C; --accent-soft: #2A220F; --accent-border: #3D3017; }