:root{
/* Hutan — primary. Soft forest teal, the brand's anchor. */
--hutan-50:#f1f7f5;--hutan-100:#dcece7;--hutan-200:#bcd9d1;--hutan-300:#93c0b4;--hutan-400:#6aa596;--hutan-500:#4a8a7a;--hutan-600:#3a7062;--hutan-700:#305a50;--hutan-800:#274740;--hutan-900:#1d332e;
/* Pasir — warm sand neutrals. Every page background lives here, never pure white. */
--pasir-50:#fdfbf7;--pasir-100:#f7f3ec;--pasir-200:#f0ebe1;--pasir-300:#e3dccd;--pasir-400:#d3c5b0;--pasir-500:#b9a891;
/* Tanah — muted clay accent. Highlights, underlines, one CTA per screen. */
--tanah-100:#f8ece6;--tanah-200:#efd6c9;--tanah-300:#e0b49f;--tanah-400:#cf917a;--tanah-500:#c07a60;--tanah-600:#a4614a;
/* Kabut — soft mist blue, used for depth layers and info states. */
--kabut-100:#eaf1f7;--kabut-200:#d3e2ee;--kabut-300:#adc9de;--kabut-400:#84aac9;--kabut-500:#6f9dc4;--kabut-600:#4f7ba1;
/* Arang — warm-cool ink scale for text and hairlines. */
--arang-50:#f6f5f3;--arang-100:#e9e7e3;--arang-200:#d6d3cd;--arang-300:#b2aea6;--arang-400:#807b73;--arang-500:#5e5a53;--arang-600:#45423d;--arang-700:#33302c;--arang-800:#24221f;--arang-900:#171514;
/* Sinyal — cool signal teal-cyan. The "technology" note in an otherwise warm palette: data viz, live indicators, code chrome. */
--sinyal-100:#e3f2f2;--sinyal-200:#c2e3e4;--sinyal-300:#8ecbcd;--sinyal-400:#5aacb1;--sinyal-500:#3d8f95;--sinyal-600:#2f7278;
/* Semantic hues */
--sukses-100:#e2f0e9;--sukses-500:#3f8f6b;--sukses-600:#317157;
--hati-hati-100:#fbf0da;--hati-hati-500:#d8a13c;--hati-hati-600:#b1802a;
--bahaya-100:#fae9e7;--bahaya-500:#c65f5a;--bahaya-600:#a44743;
}