/* Token desain — warna, spasi, radius, bayangan, font.
   Satu-satunya tempat nilai mentah boleh ditulis. Berkas lain merujuk var().
   Dipindah dari public/index.html — isinya tidak diubah, hanya dipisah. */

/* ============================================================
   TOKEN TEMA — DIKUNCI, jangan diubah
   ============================================================ */
:root{
  /* ---- BRAND (dikunci) ---- */
  --primary:#F26322; --primary-hover:#D8541A; --primary-active:#B8450F;
  --primary-50:#FEF6F1; --primary-100:#FCE7DA; --primary-200:#F7C4A6;
  --ink:#12161B; --ink-soft:#1C232B;
  /* Panel gelap — tetap gelap di kedua tema */
  --surface-dark:#12161B; --on-dark:#FFFFFF;
  /* Pil kontras — membalik mengikuti tema */
  --pill-bg:#12161B; --pill-fg:#FFFFFF;

  /* ---- FUNGSIONAL: saturasi diturunkan biar adem dipandang lama ---- */
  --green:#16A34A; --green-bg:#E9F7EE;
  --orange:#D97D06; --orange-bg:#FDF4E6;
  --red:#DC4B4F;   --red-bg:#FCEEEE;
  --purple:#7358F0;--purple-bg:#F1EEFE;
  --cyan:#1B8FE3;  --cyan-bg:#E9F4FD;
  --yellow:#E5A912;--yellow-bg:#FDF7E8;
  /* Aksen sekunder — dipakai untuk kategori modul & ritme visual */
  --violet:#7358F0; --violet-bg:#F1EEFE;
  --teal:#0D9488;   --teal-bg:#E6F5F3;
  --rose:#E5487F;   --rose-bg:#FDECF3;
  --amber:#D97706;  --amber-bg:#FDF3E6;
  --indigo:#4F46E5; --indigo-bg:#EEEDFC;

  /* ---- NETRAL: sedikit hangat supaya menyatu dengan oranye ---- */
  --text-1:#1A1D21; --text-2:#3B4149; --text-3:#5C636D;
  --text-4:#676E78;   /* dinaikkan dari #8B94A1 — sekarang lolos kontras 4.5:1 */
  --text-5:#A8AEB7;
  --line:#E4E6EA; --line-soft:#EFF1F4;
  --fill-1:#F7F8F9; --fill-2:#EDEFF2; --fill-3:#E4E7EB;
  --bg-body:#F7F8FA; --bg-card:#FFFFFF; --bg-rail:#ECEFF3; --line-rail:#DDE1E7;
  --rail-w:232px;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --sel:var(--primary-50); --sel-text:var(--primary-active); --sel-bar:var(--primary);

  /* ---- HURUF: 3 peran ---- */
  --font-display:"Plus Jakarta Sans","Inter",system-ui,sans-serif;
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-serif:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* ---- SKALA TIPOGRAFI (8 langkah) ---- */
  --fs-1:11px; --lh-1:16px;  --fs-2:12px; --lh-2:18px;
  --fs-3:13px; --lh-3:20px;  --fs-4:14px; --lh-4:22px;
  --fs-5:16px; --lh-5:24px;  --fs-6:20px; --lh-6:28px;
  --fs-7:26px; --lh-7:32px;  --fs-8:34px; --lh-8:42px;

  /* ---- RITME 4px ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --row-h:34px; --ctl-h:32px; --pad-y:10px; --pad-x:14px;

  --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:14px;
  --shadow-1:0 1px 2px rgba(26,29,33,.04), 0 4px 12px rgba(26,29,33,.035);
  --shadow-2:0 10px 32px rgba(26,29,33,.10), 0 2px 8px rgba(26,29,33,.05);
  --focus:0 0 0 3px rgba(242,99,34,.22);
}
[data-density="compact"]{
  --row-h:29px; --ctl-h:28px; --pad-y:7px; --pad-x:11px;
  --s3:9px; --s4:12px; --s5:15px; --s6:18px;
}
[data-theme="dark"]{
  --text-1:#EEF0F3; --text-2:#C7CCD3; --text-3:#9AA1AB; --text-4:#8A919B; --text-5:#5E656E;
  --line:#2A3038; --line-soft:#232830;
  --fill-1:#1B2027; --fill-2:#232932; --fill-3:#2C333D;
  --bg-body:#12161B; --bg-card:#181D23; --bg-rail:#0E1217; --line-rail:#242A32;
  --ink:#EEF0F3; --ink-soft:#C7CCD3;
  --surface-dark:#0B0E12; --on-dark:#FFFFFF;
  --pill-bg:#EDEFF3; --pill-fg:#12161B;
  --primary-50:#2A1D14; --primary-100:#3A2317; --primary-200:#6B3B1E;
  --green-bg:#14271B; --orange-bg:#2A2113; --red-bg:#2C1919;
  --purple-bg:#1F1B33; --cyan-bg:#12242F; --yellow-bg:#282113;
  --violet-bg:#1F1B33; --teal-bg:#0F2422; --rose-bg:#2B1520; --amber-bg:#2A2113; --indigo-bg:#1B1A33;
  --sel:#2A1D14; --sel-text:#F79860;
  --shadow-1:0 1px 2px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.24);
  --shadow-2:0 10px 32px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
}


*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font-sans);font-size:14px;line-height:21px;color:var(--text-1);
  background:var(--bg-body);-webkit-font-smoothing:antialiased;letter-spacing:-.005em;overflow:hidden;
}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
a{color:var(--primary-active);text-decoration:none;cursor:pointer;font-weight:600}
a:hover{text-decoration:underline}
[data-theme="dark"] a{color:#F79860}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#D3D7DD;border-radius:99px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#B9BFC7;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}
:focus-visible{outline:2px solid var(--primary);outline-offset:1px;border-radius:3px}
h1,h2,h3,h4{letter-spacing:-.022em}

.icon{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.i14{width:14px;height:14px}.i16{width:16px;height:16px}.i20{width:20px;height:20px}.i24{width:24px;height:24px}