/* ========================================================= tokens.css — Design tokens (single source of truth) Dark adalah default (:root). Override tema terang ada di themes.css. Semua warna komponen WAJIB lewat variabel di sini agar scalable. ========================================================= */ :root { color-scheme: dark; /* Surfaces */ --bg: #0c0e2a; --bg-deep: #070818; --surface: #171a42; --surface-lift: #20244f; /* Body background tint (radial glow di belakang konten) */ --body-glow-1: rgba(245, 197, 24, 0.10); --body-glow-2: rgba(224, 162, 0, 0.08); /* Text */ --text: #eef0ff; --muted: #9aa0cc; --muted-soft: #6d7299; /* Brand */ --primary: #f5c518; --primary-soft: rgba(245, 197, 24, 0.14); --primary-glow: rgba(245, 197, 24, 0.28); --secondary: #e0a200; --on-primary: #0c0e2a; /* teks di atas tombol primary */ /* Teks di atas gradien CTA emas. SENGAJA satu nilai untuk SEMUA skin & tema: latar tombol itu emas TETAP (identitas brand), jadi warna teksnya tak boleh ikut --on-primary yang berubah per-skin. Temuan audit: setiap skin bertema TERANG menyetel --on-primary ke #ffffff, sehingga tombol CTA utama jadi putih-di-atas-emas = 1,63:1 — jauh di bawah ambang WCAG 4,5:1 dan nyaris tak terbaca. Tinta gelap ini 8,2-12,7:1 di seluruh rentang gradien. Kalau CTA kelak ikut skin, ganti gradiennya DULU, baru token ini. */ --on-cta: #1a0b0d; --link: #3fc6f0; /* aksen cyan (meniru "Kredit" di logo) untuk link konten */ /* Lines & elevation */ --line: rgba(238, 240, 255, 0.09); --line-strong: rgba(238, 240, 255, 0.16); --shadow: 0 20px 48px rgba(0, 0, 0, 0.38); --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.22); /* Card / hero surfaces (ditokenisasi supaya tema terang tinggal override) */ --card-bg: linear-gradient(160deg, rgba(27, 31, 74, 0.98), rgba(20, 23, 55, 0.96)); --card-glow-a: rgba(245, 197, 24, 0.12); --card-glow-b: rgba(245, 197, 24, 0.045); --card-border: rgba(245, 197, 24, 0.16); --hero-bg: linear-gradient(150deg, rgba(28, 32, 82, 0.98), rgba(20, 23, 55, 0.94)); --hero-border: rgba(245, 197, 24, 0.32); --tile-bg: rgba(255, 255, 255, 0.05); --nav-mobile-bg: var(--surface); --header-bg: rgba(7, 10, 20, 0.82); /* Footer */ --footer-bg: #070818; --footer-text: #eef0ff; --footer-muted: #9aa0cc; --footer-link-hover: #f5c518; /* Radii */ --radius: 20px; --radius-xl: 36px; /* Typography */ --font-display: 'Outfit', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; /* Meta theme-color value (dibaca layout.js untuk update ) */ --meta-theme: #e0a200; } /* ============================================================ SKINS — variasi warna bernama (atribut data-skin di ). Tiap skin cukup set 8 warna DASAR (bg/bg-deep/surface/surface-lift/ primary/secondary/on-primary/link) untuk dark & light; token turunan (soft/glow/border/gradient/header/footer/meta) AUTO-DERIVE via color-mix. Aktif: . +[data-theme=light] = mode terang. OWNER: rename value data-skin + label di switcher sesuai brand. (Default no-JS tetap pakai :root/themes di atas.) ============================================================ */ html[data-skin] { --primary-soft: color-mix(in srgb, var(--primary) 14%, transparent); --primary-glow: color-mix(in srgb, var(--primary) 28%, transparent); --card-glow-a: color-mix(in srgb, var(--primary) 12%, transparent); --card-glow-b: color-mix(in srgb, var(--primary) 5%, transparent); --card-border: color-mix(in srgb, var(--primary) 16%, transparent); --hero-border: color-mix(in srgb, var(--primary) 32%, transparent); --body-glow-1: color-mix(in srgb, var(--primary) 10%, transparent); --body-glow-2: color-mix(in srgb, var(--secondary) 8%, transparent); --card-bg: linear-gradient(160deg, var(--surface-lift), var(--surface)); --hero-bg: linear-gradient(150deg, var(--surface-lift), var(--surface)); --header-bg: color-mix(in srgb, var(--bg-deep) 82%, transparent); --footer-bg: var(--bg-deep); --footer-text: var(--text); --footer-muted: var(--muted); --footer-link-hover: var(--primary); --nav-mobile-bg: var(--surface); --meta-theme: var(--secondary); } /* 1) MAROON (default) */ html[data-skin="maroon"]{--bg:#1a0b0d;--bg-deep:#12070a;--surface:#2a1216;--surface-lift:#351a1e;--primary:#ffb020;--secondary:#e0342b;--on-primary:#1a0b0d;--link:#3fc6f0} html[data-skin="maroon"][data-theme="light"]{--bg:#fbf3f2;--bg-deep:#f5e9e8;--surface:#ffffff;--surface-lift:#fbeeed;--primary:#c7701e;--secondary:#e0342b;--on-primary:#2a0f12;--link:#0e7fb0} /* 2) OCEAN — biru-cyan */ html[data-skin="ocean"]{--bg:#071522;--bg-deep:#030c14;--surface:#0f2438;--surface-lift:#17324c;--primary:#38bdf8;--secondary:#2563eb;--on-primary:#04121e;--link:#7dd3fc} html[data-skin="ocean"][data-theme="light"]{--bg:#f1f8fe;--bg-deep:#e3f0fb;--surface:#ffffff;--surface-lift:#edf5fd;--primary:#0284c7;--secondary:#2563eb;--on-primary:#ffffff;--link:#0369a1} /* 3) EMERALD — hijau */ html[data-skin="emerald"]{--bg:#06140e;--bg-deep:#030b07;--surface:#0e2418;--surface-lift:#163424;--primary:#34d399;--secondary:#059669;--on-primary:#04140d;--link:#6ee7b7} html[data-skin="emerald"][data-theme="light"]{--bg:#f0faf4;--bg-deep:#e2f4ea;--surface:#ffffff;--surface-lift:#edf8f1;--primary:#059669;--secondary:#047857;--on-primary:#ffffff;--link:#047857} /* 4) MAGENTA — ungu-pink */ html[data-skin="magenta"]{--bg:#150a20;--bg-deep:#0b0513;--surface:#251436;--surface-lift:#33204c;--primary:#e879f9;--secondary:#c026d3;--on-primary:#150a20;--link:#f5d0fe} html[data-skin="magenta"][data-theme="light"]{--bg:#fbf2fd;--bg-deep:#f4e4fa;--surface:#ffffff;--surface-lift:#f8edfb;--primary:#c026d3;--secondary:#a21caf;--on-primary:#ffffff;--link:#a21caf} /* 5) CRIMSON — merah */ html[data-skin="crimson"]{--bg:#1a080b;--bg-deep:#100407;--surface:#2c1015;--surface-lift:#3d1a20;--primary:#fb7185;--secondary:#e11d48;--on-primary:#1a080b;--link:#fda4af} html[data-skin="crimson"][data-theme="light"]{--bg:#fef1f3;--bg-deep:#fce3e7;--surface:#ffffff;--surface-lift:#fdedf0;--primary:#e11d48;--secondary:#be123c;--on-primary:#ffffff;--link:#be123c} /* 6) TEAL-ORANGE — teal + oranye */ html[data-skin="teal"]{--bg:#06171a;--bg-deep:#030d0f;--surface:#0d2a2f;--surface-lift:#163a41;--primary:#fb923c;--secondary:#0d9488;--on-primary:#06171a;--link:#5eead4} html[data-skin="teal"][data-theme="light"]{--bg:#f0fbf9;--bg-deep:#e1f5f1;--surface:#ffffff;--surface-lift:#ecf9f6;--primary:#ea580c;--secondary:#0d9488;--on-primary:#ffffff;--link:#0d9488} /* 7) INDIGO — indigo-violet */ html[data-skin="indigo"]{--bg:#0d0f24;--bg-deep:#060716;--surface:#191c3c;--surface-lift:#242850;--primary:#818cf8;--secondary:#6366f1;--on-primary:#0d0f24;--link:#a5b4fc} html[data-skin="indigo"][data-theme="light"]{--bg:#f2f3fe;--bg-deep:#e5e7fb;--surface:#ffffff;--surface-lift:#eef0fd;--primary:#4f46e5;--secondary:#6366f1;--on-primary:#ffffff;--link:#4338ca} /* 8) GOLD-NOIR — emas + hitam */ html[data-skin="gold-noir"]{--bg:#100f0b;--bg-deep:#080703;--surface:#1d1c16;--surface-lift:#2b2a22;--primary:#eab308;--secondary:#ca8a04;--on-primary:#100f0b;--link:#fde047} html[data-skin="gold-noir"][data-theme="light"]{--bg:#faf8ef;--bg-deep:#f2efdf;--surface:#ffffff;--surface-lift:#f7f4e8;--primary:#a16207;--secondary:#ca8a04;--on-primary:#ffffff;--link:#854d0e} /* 9) SLATE — netral abu-biru (korporat/berita) */ html[data-skin="slate"]{--bg:#0f1318;--bg-deep:#080b0f;--surface:#1a2029;--surface-lift:#252d38;--primary:#7dd3fc;--secondary:#38bdf8;--on-primary:#0f1318;--link:#93c5fd} html[data-skin="slate"][data-theme="light"]{--bg:#f5f7fa;--bg-deep:#e9edf3;--surface:#ffffff;--surface-lift:#f1f4f9;--primary:#0369a1;--secondary:#0284c7;--on-primary:#ffffff;--link:#1d4ed8} /* 10) SUNSET — oranye-merah hangat */ html[data-skin="sunset"]{--bg:#1b0f08;--bg-deep:#120903;--surface:#2c1710;--surface-lift:#3b2116;--primary:#fbbf24;--secondary:#f97316;--on-primary:#1b0f08;--link:#fdba74} html[data-skin="sunset"][data-theme="light"]{--bg:#fff7ed;--bg-deep:#ffedd5;--surface:#ffffff;--surface-lift:#fff4e6;--primary:#c2410c;--secondary:#ea580c;--on-primary:#ffffff;--link:#b45309}