:root,
html[data-theme="light"] {
  --bg: #f3f0e8;
  --bg-elev: #faf8f3;
  --canvas: #ebe7dc;
  --surface: #ffffff;
  --surface-2: #f7f4ed;
  --surface-3: #efebe1;
  --border: #d8d0c2;
  --border-subtle: #e6e0d4;
  --text: #1c1b18;
  --text-2: #3f3d37;
  --muted: #6f6b62;
  --faint: #9a958a;
  --accent: #5f734c;
  --accent-2: #4a5c3b;
  --accent-dim: rgba(95, 115, 76, 0.14);
  --accent-strong: rgba(95, 115, 76, 0.24);
  --on-accent: #fbfaf6;
  --danger: #b45a5a;
  --danger-dim: rgba(180, 90, 90, 0.12);
  --warning: #a07a2c;
  --warning-dim: rgba(160, 122, 44, 0.12);
  --info: #4f7c8a;
  --info-dim: rgba(79, 124, 138, 0.12);
  --ok: #4f7a4a;
  --ok-dim: rgba(79, 122, 74, 0.12);
  --wa-bg: #e8f6ee;
  --wa-fg: #1f6b45;
  --topbar: #faf8f3;
  --bottombar: #faf8f3;
  --shadow: 0 14px 36px rgba(40, 36, 28, 0.08);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --sidebar: 228px;
  --sidebar-bg: #181714;
  --sidebar-text: #efece3;
  --sidebar-muted: #9a9488;
  --sidebar-hover: rgba(255, 255, 255, 0.05);
  --sidebar-active: rgba(163, 182, 141, 0.16);
  --header: 60px;
  --bottom: 72px;
  --font: "Plus Jakarta Sans", system-ui, sans-serif;
  --touch: 44px;
}

html[data-theme="dark"] {
  --bg: #0c0c0b;
  --bg-elev: #10100f;
  --canvas: #161614;
  --surface: #1d1d1a;
  --surface-2: #252521;
  --surface-3: #2e2e29;
  --border: #3a3a33;
  --border-subtle: #2a2a25;
  --text: #f5f2ea;
  --text-2: #cec9bb;
  --muted: #8f8a7e;
  --faint: #6a665c;
  --accent: #a3b68d;
  --accent-2: #bfd0aa;
  --accent-dim: rgba(163, 182, 141, 0.16);
  --accent-strong: rgba(163, 182, 141, 0.28);
  --on-accent: #14140f;
  --danger: #d08484;
  --danger-dim: rgba(208, 132, 132, 0.14);
  --warning: #d0ae66;
  --warning-dim: rgba(208, 174, 102, 0.14);
  --info: #86a8b4;
  --info-dim: rgba(134, 168, 180, 0.14);
  --ok: #8fb589;
  --ok-dim: rgba(143, 181, 137, 0.14);
  --wa-bg: #1f3d32;
  --wa-fg: #9ddec4;
  --sidebar: 228px;
  --sidebar-bg: #121210;
  --sidebar-text: #f3f0e8;
  --sidebar-muted: #8f8a7e;
  --sidebar-hover: rgba(255, 255, 255, 0.06);
  --sidebar-active: rgba(163, 182, 141, 0.18);
  --topbar: #131311;
  --bottombar: #10100f;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

@media (max-width: 1100px) {
  :root { --header: 60px; }
}
@media (max-width: 700px) {
  :root { --header: 56px; }
}