/* ===================================================================== DESIGN KIT — TOKENS Sumber warna, radius, bayangan. Ganti nilai --brand/--hero-* saja untuk rebrand ke warna lain — seluruh komponen di components.css memakai token ini, tidak ada warna literal di tempat lain. Tiga keadaan tema didukung: - default (tanpa atribut) -> ikut prefers-color-scheme browser - -> terang dipaksa - -> gelap dipaksa ===================================================================== */ :root, :root[data-theme="light"] { /* permukaan */ --page: #eef1f6; --card: #ffffff; --card-2: #f5f7fb; /* teks */ --ink: #1b1e27; --ink-2: #5d6473; --ink-3: #8b92a1; /* garis */ --line: #e7eaf1; --line-2: #dde1ea; /* brand — GANTI DI SINI untuk rebrand */ --brand: #bf1624; --brand-soft: #fdeef0; --pill: #bf1624; /* tombol utama */ --pill-ink: #ffffff; --hero-a: #d52a38; /* gradasi kartu hero / panel login, dari */ --hero-b: #9b0f1b; /* ke */ /* status semantik */ --pos: #15a871; --pos-soft: #e4f7ef; --neg: #e0443c; --neg-soft: #fdecea; --warn: #c47b0a; --warn-soft: #fbf1dd; /* aksen sekunder (dipakai grafik/label kecil) */ --c-amber: #c47b0a; --c-violet:#7c5cf6; --c-blue: #1668e3; --c-teal: #12a08c; --c-coral: #ff7a59; /* bayangan */ --sh-sm: 0 1px 2px rgba(22,28,45,.04), 0 6px 18px rgba(22,28,45,.05); --sh-md: 0 14px 36px -14px rgba(22,28,45,.22); /* bentuk */ --r: 18px; /* radius kartu */ --r-sm: 14px; /* radius kartu kecil / kpi */ --sb-w: 248px; /* lebar sidebar */ color-scheme: light; } :root[data-theme="dark"] { --page: #0c0e13; --card: #151820; --card-2: #1c2029; --ink: #eef0f5; --ink-2: #a5acba; --ink-3: #737a88; --line: #242935; --line-2: #2e3441; --brand: #f0606b; --brand-soft: #3a1d22; --pill: #d0212f; --pill-ink: #ffffff; --hero-a: #c61f2e; --hero-b: #6f0b15; --pos: #34c98f; --pos-soft: #12291f; --neg: #f26a62; --neg-soft: #2e1918; --warn:#e2a445; --warn-soft: #2f2413; --sh-sm: 0 1px 2px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.3); --sh-md: 0 18px 44px -16px rgba(0,0,0,.65); color-scheme: dark; } /* default sistem (tanpa data-theme sama sekali) mengikuti OS */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --page: #0c0e13; --card: #151820; --card-2: #1c2029; --ink: #eef0f5; --ink-2: #a5acba; --ink-3: #737a88; --line: #242935; --line-2: #2e3441; --brand: #f0606b; --brand-soft: #3a1d22; --pill: #d0212f; --pill-ink: #ffffff; --hero-a: #c61f2e; --hero-b: #6f0b15; --pos: #34c98f; --pos-soft: #12291f; --neg: #f26a62; --neg-soft: #2e1918; --warn:#e2a445; --warn-soft: #2f2413; --sh-sm: 0 1px 2px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.3); --sh-md: 0 18px 44px -16px rgba(0,0,0,.65); color-scheme: dark; } }