/* Warna, font, sudut, bayangan, gerak, dan tinggi box data. Ubah di sini untuk mengganti tema. */

:root {
  /* Warna utama (mode terang) */
  --bg: #f4f6f1;
  --paper: #fff;
  --ink: #1f2f28;
  --muted: #73817a;
  --line: #e3e8df;
  --line-soft: #edf0e9;
  --lime: #c4d982;
  --dark: #1d332a;
  --soft: #eef3e4;
  --red: #af493a;
  --link: #55782e;

  /* Permukaan: kartu, kolom, input */
  --surface: #fff;
  --surface-2: #f5f7f2;
  --surface-3: #ebf0e6;
  --field-border: #dce3d6;
  --glass: #fbfcf9c2;

  /* Label status (tag) */
  --tag-bg: #edf3df;
  --tag-ink: #5b752f;
  --tag-red-bg: #fbece8;
  --tag-red-ink: #a74937;
  --tag-blue-bg: #eaf1f7;
  --tag-blue-ink: #4e7297;
  --tag-amber-bg: #fff2d9;
  --tag-amber-ink: #956b28;
  --tag-gray-bg: #f0f2ee;
  --tag-gray-ink: #748071;
  --tag-green-bg: #e1f3e7;
  --tag-green-ink: #23643c;

  /* Font */
  --font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;

  /* Sudut */
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 24px;

  /* Bayangan berlapis */
  --shadow: 0 2px 6px #1b382110, 0 24px 64px #1b38211a;
  --shadow-sm: 0 1px 2px #1b38210d, 0 2px 8px #1b38210a;
  --shadow-md: 0 2px 4px #1b38210f, 0 12px 32px #1b382117;

  /* Gerak (motion). Durasi 0ms = animasi mati. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur: 420ms;
  --stagger: 38ms;

  /* Batas tinggi box data (tabel & kolom project). Versi mobile ada di tables.css. */
  --ws-table-height: 520px;
  --ws-project-height: 520px;
}

/* Mode gelap: dipakai saat tombol ☾ di topbar aktif, atau otomatis mengikuti perangkat. */
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0e1814;
  --paper: #15211b;
  --ink: #e4ece6;
  --muted: #8d9f94;
  --line: #24372d;
  --line-soft: #1f3027;
  --dark: #1f3a2d;
  --soft: #1a2a21;
  --red: #e0816f;
  --link: #bcd67c;

  --surface: #15211b;
  --surface-2: #1b2a22;
  --surface-3: #13201a;
  --field-border: #2c4337;
  --glass: #0e1814c4;

  --tag-bg: #2a3a1e;
  --tag-ink: #c3db86;
  --tag-red-bg: #3a2019;
  --tag-red-ink: #f0a090;
  --tag-blue-bg: #1b2c3b;
  --tag-blue-ink: #9cc1e4;
  --tag-amber-bg: #3a2e14;
  --tag-amber-ink: #e9c47e;
  --tag-gray-bg: #222d27;
  --tag-gray-ink: #a6b4ab;
  --tag-green-bg: #173323;
  --tag-green-ink: #8fd6a8;

  --shadow: 0 2px 6px #00000040, 0 24px 64px #00000066;
  --shadow-sm: 0 1px 2px #00000033, 0 2px 8px #00000026;
  --shadow-md: 0 2px 4px #00000040, 0 12px 32px #00000059;
}