/* =========================================================================
   SIKA — Design Tokens
   Palet biru muda modern · sudut melengkung · gerak halus
   ====================================================================== */

:root {
	/* ---- Warna utama: biru muda (sky) ---- */
	--biru-50:  #EFF8FF;
	--biru-100: #DAEEFF;
	--biru-200: #BDE2FF;
	--biru-300: #8FD0FF;
	--biru-400: #5AB6FC;
	--biru-500: #2E9BF0;
	--biru-600: #1780DA;
	--biru-700: #1467B0;
	--biru-800: #15568D;
	--biru-900: #164974;

	/* ---- Aksen sekunder: cyan (untuk gradien & highlight) ---- */
	--cyan-300: #7DE3F4;
	--cyan-400: #38D0E8;
	--cyan-500: #14B8CE;

	/* ---- Netral sejuk (kebiruan, bukan abu-abu murni) ---- */
	--abu-50:  #F7FAFC;
	--abu-100: #EFF3F8;
	--abu-200: #E2E9F1;
	--abu-300: #CBD6E3;
	--abu-400: #94A5BC;
	--abu-500: #6B7F9A;
	--abu-600: #4E627E;
	--abu-700: #3A4C64;
	--abu-800: #26364A;
	--abu-900: #172333;

	/* ---- Warna semantik ---- */
	--sukses-50:  #ECFDF5;
	--sukses-100: #D3F9E5;
	--sukses-500: #10B981;
	--sukses-600: #059669;
	--sukses-700: #047857;

	--peringatan-50:  #FFFAEB;
	--peringatan-100: #FEF0C7;
	--peringatan-500: #F5A524;
	--peringatan-600: #DC8B0C;
	--peringatan-700: #B26B04;

	--bahaya-50:  #FEF2F3;
	--bahaya-100: #FEE2E4;
	--bahaya-500: #F0525F;
	--bahaya-600: #DC2F3E;
	--bahaya-700: #B91C2C;

	--info-50:  #EEF4FF;
	--info-100: #DEE8FF;
	--info-500: #5B7CFA;
	--info-600: #4258E0;

	--ungu-50:  #F5F3FF;
	--ungu-100: #EDE9FE;
	--ungu-500: #8B5CF6;
	--ungu-600: #7C3AED;

	--teal-50:  #EFFCF9;
	--teal-100: #D3F6EF;
	--teal-500: #14B8A6;
	--teal-600: #0D9488;

	/* ---- Permukaan ---- */
	--kanvas:        #F2F7FC;
	--permukaan:     #FFFFFF;
	--permukaan-2:   #F8FBFE;
	--permukaan-3:   #EFF5FB;
	--garis:         #E4EBF3;
	--garis-lembut:  #EEF3F9;
	--garis-tebal:   #D3DEEA;

	/* ---- Teks ---- */
	--teks:         #1B2A3D;
	--teks-2:       #4A5C74;
	--teks-3:       #74869E;
	--teks-4:       #9BAAC0;
	--teks-balik:   #FFFFFF;

	/* ---- Gradien tanda tangan ---- */
	--gradien-utama:  linear-gradient(135deg, #2E9BF0 0%, #38D0E8 100%);
	--gradien-lembut: linear-gradient(135deg, #EFF8FF 0%, #F5FEFF 100%);
	--gradien-kaca:   linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.72) 100%);

	/* ---- Panel dalam: kartu sambutan dasbor ----
	   Isian rata tanpa gradien. Panel ini gelap di kedua mode, jadi warnanya
	   ditetapkan eksplisit — bukan diambil dari tangga --biru- yang arahnya
	   dibalik saat mode malam.
	     --panel-dalam         isian panel (teks di atasnya selalu putih)
	     --panel-aksen         teks tombol terang di atas panel
	     --panel-aksen-lembut  latar tombol terang saat ditunjuk */
	--panel-dalam:        #15568D;
	--panel-aksen:        #15568D;
	--panel-aksen-lembut: #E9F2FB;

	/* ---- Radius: kotak melengkung di setiap ujung ---- */
	--r-xs:   8px;
	--r-sm:  11px;
	--r-md:  14px;
	--r-lg:  18px;
	--r-xl:  22px;
	--r-2xl: 28px;
	--r-3xl: 36px;
	--r-bulat: 999px;

	/* ---- Bayangan (bernuansa biru, bukan hitam) ---- */
	--bayang-xs: 0 1px 2px rgba(23, 52, 87, 0.05);
	--bayang-sm: 0 2px 6px -1px rgba(23, 52, 87, 0.07), 0 1px 2px rgba(23, 52, 87, 0.04);
	--bayang-md: 0 6px 18px -4px rgba(23, 52, 87, 0.10), 0 2px 6px -2px rgba(23, 52, 87, 0.05);
	--bayang-lg: 0 16px 40px -12px rgba(23, 52, 87, 0.16), 0 4px 12px -4px rgba(23, 52, 87, 0.06);
	--bayang-xl: 0 28px 64px -16px rgba(23, 52, 87, 0.22), 0 8px 20px -8px rgba(23, 52, 87, 0.08);
	--bayang-biru: 0 8px 22px -6px rgba(46, 155, 240, 0.42);
	--bayang-biru-lg: 0 16px 38px -10px rgba(46, 155, 240, 0.45);
	--bayang-dalam: inset 0 1px 2px rgba(23, 52, 87, 0.06);

	/* ---- Cincin fokus (aksesibilitas) ---- */
	--cincin: 0 0 0 3px rgba(46, 155, 240, 0.28);
	--cincin-bahaya: 0 0 0 3px rgba(240, 82, 95, 0.25);

	/* ---- Tipografi ---- */
	--font: 'Google Sans', 'Google Sans Text', -apple-system, BlinkMacSystemFont, 'Segoe UI',
	        'Inter', 'Helvetica Neue', Arial, sans-serif;
	--font-angka: 'Google Sans', 'Google Sans Text', 'Segoe UI', system-ui, sans-serif;

	--t-2xs: 0.6875rem;  /* 11px */
	--t-xs:  0.75rem;    /* 12px */
	--t-sm:  0.8125rem;  /* 13px */
	--t-md:  0.875rem;   /* 14px */
	--t-base: 0.9375rem; /* 15px */
	--t-lg:  1.0625rem;  /* 17px */
	--t-xl:  1.25rem;    /* 20px */
	--t-2xl: 1.5rem;     /* 24px */
	--t-3xl: 1.875rem;   /* 30px */
	--t-4xl: 2.375rem;   /* 38px */

	/* ---- Jarak ---- */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 20px;
	--s-6: 24px;
	--s-7: 32px;
	--s-8: 40px;
	--s-9: 56px;

	/* ---- Gerak ---- */
	--cepat:  140ms;
	--sedang: 240ms;
	--lambat: 380ms;

	--ease-keluar: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-masuk:  cubic-bezier(0.4, 0, 0.2, 1);
	--ease-pegas:  cubic-bezier(0.34, 1.46, 0.58, 1);
	--ease-halus:  cubic-bezier(0.4, 0.14, 0.3, 1);

	/* ---- Dimensi tata letak ---- */
	--sidebar-w: 268px;
	--sidebar-w-kecil: 76px;
	--topbar-h: 68px;
	--isi-maks: 1360px;

	/* ---- Lapisan ---- */
	--z-sidebar: 40;
	--z-topbar: 50;
	--z-dropdown: 60;
	--z-tirai: 70;
	--z-modal: 80;
	--z-toast: 90;
}

/* Warna avatar deterministik */
:root {
	--avatar-0: linear-gradient(135deg, #2E9BF0, #38D0E8);
	--avatar-1: linear-gradient(135deg, #8B5CF6, #C4A0FF);
	--avatar-2: linear-gradient(135deg, #14B8A6, #6EE7DA);
	--avatar-3: linear-gradient(135deg, #F5A524, #FFD48A);
	--avatar-4: linear-gradient(135deg, #F0525F, #FF9BA4);
	--avatar-5: linear-gradient(135deg, #5B7CFA, #A5B8FF);
}

/* =========================================================================
   MODE MALAM
   -------------------------------------------------------------------------
   Seluruh komponen SIKA memakai token di atas, sehingga mode malam cukup
   menulis ulang nilainya di sini — tidak ada komponen yang perlu diubah.

   Aturan pemetaan yang dipakai konsisten di semua rona warna:

     -50   permukaan bernuansa (latar lembut)      → nuansa gelap dari rona
     -100  garis tepi di atas permukaan itu        → nuansa gelap satu tingkat
     -200  garis tepi saat tunjuk/hover            → nuansa gelap dua tingkat
     -300  garis tepi tegas & pemisah              → biru-abu sedang
     -400  ikon, garis tepi aksen                  → terang sedang
     -500  isian penuh (badge, bilah, sakelar)     → tetap pekat, teks putih
     -600  teks/ikon di atas permukaan gelap       → terang (kebalikan mode siang)
     -700  teks di atas permukaan bernuansa -50    → lebih terang lagi
     -800  teks tegas pada panel bernuansa         → paling terang

   Karena tingkat 600–900 dipakai sebagai *warna teks* (bukan latar) di seluruh
   berkas CSS, arah tangganya sengaja dibalik pada mode malam agar tetap
   terbaca. Kontras teks utama & sekunder diuji di atas --permukaan pada
   rasio ≥ 4.5:1 (WCAG AA).
   ====================================================================== */

:root {
	color-scheme: light;
}

:root[data-tema='gelap'] {
	color-scheme: dark;

	/* ---- Biru merek: gelap di bawah, terang di atas ---- */
	--biru-50:  #15263A;
	--biru-100: #1D3450;
	--biru-200: #26456A;
	--biru-300: #35608E;
	--biru-400: #4FA3E0;
	--biru-500: #3BA7F7;
	--biru-600: #6FC5FF;
	--biru-700: #93D6FF;
	--biru-800: #B9E4FF;
	--biru-900: #DFF3FF;

	/* ---- Cyan aksen: sedikit diredam agar tidak menyilaukan ---- */
	--cyan-300: #86E5F5;
	--cyan-400: #3ACEE6;
	--cyan-500: #17B4C9;

	/* ---- Netral sejuk (dibalik penuh) ---- */
	--abu-50:  #172231;
	--abu-100: #202D40;
	--abu-200: #2A3A52;
	--abu-300: #3A4C67;
	--abu-400: #55688A;
	--abu-500: #8194B0;
	--abu-600: #A6B7CE;
	--abu-700: #C4D1E1;
	--abu-800: #DEE7F1;
	--abu-900: #F1F5FA;

	/* ---- Warna semantik ---- */
	--sukses-50:  #102C24;
	--sukses-100: #1A4436;
	--sukses-500: #16C48D;
	--sukses-600: #43D9A5;
	--sukses-700: #6FE8BF;

	--peringatan-50:  #2E2412;
	--peringatan-100: #4A3A18;
	--peringatan-400: #F0B457;
	--peringatan-500: #F5AF3B;
	--peringatan-600: #FFC55E;
	--peringatan-700: #FFD98F;

	--bahaya-50:  #331A1F;
	--bahaya-100: #4E2229;
	--bahaya-500: #F4626F;
	--bahaya-600: #FF8A96;
	--bahaya-700: #FFAAB3;

	--info-50:  #1B2246;
	--info-100: #2B3568;
	--info-500: #7C95FF;
	--info-600: #A3B5FF;

	--ungu-50:  #241D40;
	--ungu-100: #342A5C;
	--ungu-500: #A07DFB;
	--ungu-600: #C2A9FF;

	--teal-50:  #0F2F2D;
	--teal-100: #17453F;
	--teal-500: #29CFBA;
	--teal-600: #5CE3D1;

	/* ---- Permukaan: biru malam, bukan hitam ---- */
	--kanvas:        #0B1220;
	--permukaan:     #131C2B;
	--permukaan-2:   #182333;
	--permukaan-3:   #1F2C3E;
	--garis:         #26344A;
	--garis-lembut:  #1E2A3B;
	--garis-tebal:   #33455E;

	/* ---- Teks ---- */
	--teks:       #E8EFF9;
	--teks-2:     #BAC8DC;
	--teks-3:     #90A2BA;
	--teks-4:     #7C8EA6;
	--teks-balik: #FFFFFF;

	/* ---- Gradien tanda tangan ---- */
	--gradien-utama:  linear-gradient(135deg, #2A93E4 0%, #2FC3DC 100%);
	--gradien-lembut: linear-gradient(135deg, #16273B 0%, #13303E 100%);
	--gradien-kaca:   linear-gradient(180deg, rgba(19, 28, 43, 0.90) 0%, rgba(19, 28, 43, 0.74) 100%);

	/* Panel dalam ikut turun terangnya agar tidak menyilaukan di ruang gelap;
	   --panel-aksen-lembut tetap terang karena dipakai di atas tombol putih. */
	--panel-dalam: #16406B;
	--panel-aksen: #16406B;

	/* ---- Bayangan: gelap & lebih dalam, ditambah tepi terang tipis ---- */
	--bayang-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
	--bayang-sm: 0 2px 6px -1px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30);
	--bayang-md: 0 6px 18px -4px rgba(0, 0, 0, 0.50), 0 2px 6px -2px rgba(0, 0, 0, 0.35);
	--bayang-lg: 0 16px 40px -12px rgba(0, 0, 0, 0.60), 0 4px 12px -4px rgba(0, 0, 0, 0.40);
	--bayang-xl: 0 28px 64px -16px rgba(0, 0, 0, 0.70), 0 8px 20px -8px rgba(0, 0, 0, 0.45);
	--bayang-biru: 0 8px 22px -8px rgba(46, 155, 240, 0.50);
	--bayang-biru-lg: 0 14px 34px -10px rgba(46, 155, 240, 0.55);
	--bayang-dalam: inset 0 1px 2px rgba(0, 0, 0, 0.35);

	/* ---- Cincin fokus ---- */
	--cincin: 0 0 0 3px rgba(90, 182, 252, 0.34);
	--cincin-bahaya: 0 0 0 3px rgba(244, 98, 111, 0.34);
}

/* Avatar: rona sama, sedikit diredam agar menyatu dengan latar malam. */
:root[data-tema='gelap'] {
	--avatar-0: linear-gradient(135deg, #2A93E4, #2FC3DC);
	--avatar-1: linear-gradient(135deg, #7E51E0, #B08CF5);
	--avatar-2: linear-gradient(135deg, #12A897, #56D6C6);
	--avatar-3: linear-gradient(135deg, #DE9420, #F0C27A);
	--avatar-4: linear-gradient(135deg, #DA4A57, #F58C97);
	--avatar-5: linear-gradient(135deg, #5170E4, #93A8F5);
}