/* ============================================================ KONTENTO AI — DESIGN TOKENS Satu sumber nilai untuk web, app, deck, dan cetak. Acuan visual: brandbook.html (buka di browser, jangan dibaca sebagai teks). ASAL-USUL SISTEM Palet inti (5 warna) dikunci 26 Mei 2026 dan diverifikasi ulang 31 Agustus 2026 langsung dari piksel wordmark asli: #ffd602 dan #161d2c terbukti persis. Skala bentuk dan tipografi diturunkan dari pengukuran wordmark: huruf "o" rasio 1,05 (lingkaran) -> sudut membulat, tidak pernah tajam tebal batang 0,24 x-height -> bobot barbel, 800 lawan 400 x-height 0,743 -> teks kecil tetap terbaca, leading rapat ascender 0,347 x-height -> ritme padat jarak huruf 0,40 tebal batang -> display pakai tracking negatif CARA PAKAI 1. Impor file ini PALING ATAS, sebelum CSS lain. 2. Tema: gelap (bawaan brand, seperti wordmark) terang (web publik, invoice, dokumen) 3. Density: app dan panel kerja tanpa atribut marketing, landing, deck 4. Pakai token SEMANTIK (--action, --text-2, --line). Primitive hanya untuk mendefinisikan semantik di file ini. JANGAN tulis hex langsung di komponen. Kalau nilai di sini beda dengan brandbook.html, brandbook yang benar. ============================================================ */ :root { /* ---------- PRIMITIVE: kuning (warna wordmark) ---------- */ --yellow-300: #FFE97A; --yellow-400: #FFE04D; /* hover di latar gelap */ --yellow-500: #FFD602; /* CORE, hex resmi, terhitung dari wordmark */ --yellow-600: #E6BF00; /* ditekan / active */ --yellow-700: #A98C00; /* grafis & teks >24px di latar terang, 3,06:1 */ --yellow-800: #7A6400; /* SATU-SATUNYA kuning yang sah jadi teks di latar terang, 5,40:1 */ /* ---------- PRIMITIVE: ink (navy wordmark) ---------- */ --ink-950: #0C111B; /* latar terdalam, di bawah permukaan kartu */ --ink-900: #161D2C; /* CORE, hex resmi */ --ink-800: #1E2635; /* permukaan kartu di tema gelap */ --ink-700: #27303B; /* CORE, hex resmi */ --ink-600: #333C4B; /* garis di tema gelap */ --ink-500: #4A5568; /* garis tegas gelap, 7,06:1 di terang */ --ink-400: #6B7688; /* grafis saja, 4,31:1 di terang, JANGAN untuk body */ --ink-300: #98A1B0; /* teks tersier di GELAP saja, gagal di terang */ --ink-200: #C3C9D2; --ink-150: #DBDBDB; /* CORE, hex resmi. Body text di latar gelap */ /* ---------- PRIMITIVE: warm (turunan cream) ---------- Ramp ini DIPERBAIKI 31 Agustus 2026. Versi pertama menumpuk tiga warna nyaris putih (#FBF7F4 / #FDFAF8 / #FFFFFF) sebagai latar, kartu, dan kartu terangkat. Jaraknya cuma 1,03 dan 1,04, jadi seluruh hierarki permukaan rata dan kartu tidak kelihatan. Nilai di bawah sudah diukur ulang supaya minimal menyamai tema gelap, yang jaraknya 1,12. Catatan: --warm-200 cream sengaja keluar urutan luminansi. Itu warna aksen resmi, bukan langkah netral, jadi jangan dipakai sebagai kanvas. */ --warm-0: #FFFFFF; /* permukaan terangkat: input, dropdown, modal */ --warm-35: #FAF4EE; /* permukaan kartu di tema terang */ --warm-50: #FBF7F4; /* dipertahankan untuk kompatibilitas, bukan latar lagi */ --warm-100: #F5EDE7; /* permukaan tenggelam, kepala tabel, hover baris */ --warm-150: #EEE3D8; /* LATAR HALAMAN tema terang */ --warm-200: #FFE8DB; /* CORE cream, hex resmi. Aksen lembut, bukan kanvas */ --warm-300: #EBD9CD; --warm-350: #D8C0AE; /* garis kartu di tema terang, 1,67 di atas kartu */ --warm-400: #D6C2B5; --warm-450: #A68668; /* garis tegas: border input, 3,37 di atas putih */ /* ---------- PRIMITIVE: status ---------- Peringatan SENGAJA cokelat amber, bukan kuning brand, supaya tidak bertabrakan dengan warna aksi. Lihat aturan 05 di brandbook. */ --ok-tint: #E4F0E9; --ok-ink: #1F6B4A; --ok-dot: #2E8B63; --warn-tint: #FBEBD8; --warn-ink: #8A5300; --warn-dot: #B87A1A; --bad-tint: #FBE6E2; --bad-ink: #9B3324; --bad-dot: #C1503C; --info-tint: #E4EAF4; --info-ink: #2A4A7C; --info-dot: #4A6FA5; --ok-tint-d: #16301F; --ok-ink-d: #6FD79C; --warn-tint-d: #33260F; --warn-ink-d: #F0B754; --bad-tint-d: #331A18; --bad-ink-d: #F09184; --info-tint-d: #182333; --info-ink-d: #86AEE8; /* ---------- RUANG ---------- Skala mengikat. Nilai di luar daftar ini tidak boleh dipakai. */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px; --s10: 72px; /* ---------- SUDUT ---------- Diturunkan dari huruf "o" yang rasionya 1,05. Sudut tajam (0-4px) bertentangan dengan konstruksi lingkaran wordmark, jadi dilarang. */ --r-xs: 6px; /* chip kecil, dot, swatch mini */ --r-sm: 8px; /* input, tombol persegi, badge */ --r-md: 12px; /* kartu, panel, dropdown */ --r-lg: 16px; /* kartu unggulan, modal */ --r-xl: 24px; /* section besar, hero panel */ --r-full: 999px; /* pill, avatar, tombol bulat */ /* ---------- ELEVATION ---------- */ --e-1: 0 1px 2px rgba(6, 10, 18, 0.28); --e-2: 0 8px 20px -8px rgba(6, 10, 18, 0.45); --e-3: 0 24px 56px -20px rgba(6, 10, 18, 0.62); --e-inset: inset 0 0 0 1px rgba(255, 255, 255, 0.04); /* ---------- TIPOGRAFI ---------- */ --f-brand: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --f-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace; --t-d1-size: 56px; --t-d1-weight: 800; --t-d1-lh: 1.02; --t-d1-ls: -0.03em; --t-d2-size: 44px; --t-d2-weight: 800; --t-d2-lh: 1.05; --t-d2-ls: -0.03em; --t-d3-size: 34px; --t-d3-weight: 800; --t-d3-lh: 1.10; --t-d3-ls: -0.025em; --t-h1-size: 26px; --t-h1-weight: 700; --t-h1-lh: 1.20; --t-h1-ls: -0.02em; --t-h2-size: 21px; --t-h2-weight: 700; --t-h2-lh: 1.25; --t-h2-ls: -0.015em; --t-h3-size: 17px; --t-h3-weight: 600; --t-h3-lh: 1.35; --t-h3-ls: -0.01em; --t-lead-size: 17px; --t-lead-weight: 400; --t-lead-lh: 1.60; --t-lead-ls: 0em; --t-body-size: 15px; --t-body-weight: 400; --t-body-lh: 1.60; --t-body-ls: 0em; --t-small-size: 13px; --t-small-weight: 400; --t-small-lh: 1.50; --t-small-ls: 0em; --t-micro-size: 11px; --t-micro-weight: 600; --t-micro-lh: 1.40; --t-micro-ls: 0.08em; /* ---------- WORDMARK ---------- Diukur dari file, bukan ditebak. Lihat assets/logo/README.md. */ --wm-ratio: 6.004; /* lebar : tinggi */ --wm-clear: 0.70; /* clear space = 0,70 x tinggi wordmark (tinggi huruf o) */ --wm-min-w: 96px; /* di bawah ini counter huruf mulai menutup */ /* ---------- GERAK ---------- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --t-fast: 140ms; --t-mid: 240ms; --t-slow: 400ms; /* ---------- LAPIS ---------- */ --z-dropdown: 10; --z-sticky: 20; --z-backdrop: 30; --z-modal: 40; --z-toast: 50; --z-tooltip: 60; /* ---------- SEMANTIK: tema gelap (bawaan) ---------- */ --bg: var(--ink-950); --surface: var(--ink-900); --surface-2: var(--ink-800); --surface-3: var(--ink-700); --line: var(--ink-600); --line-strong: var(--ink-500); --text-1: #FFFFFF; --text-2: var(--ink-150); --text-3: var(--ink-300); --text-accent: var(--yellow-500); --action: var(--yellow-500); --action-hover: var(--yellow-400); --action-active: var(--yellow-600); --on-action: var(--ink-900); --action-quiet: rgba(255, 214, 2, 0.14); --action-edge: transparent; /* di gelap, isi kuning sudah 13,38:1 dari latar */ --focus: var(--yellow-500); --ok-bg: var(--ok-tint-d); --ok-fg: var(--ok-ink-d); --warn-bg: var(--warn-tint-d); --warn-fg: var(--warn-ink-d); --bad-bg: var(--bad-tint-d); --bad-fg: var(--bad-ink-d); --info-bg: var(--info-tint-d); --info-fg: var(--info-ink-d); --wm-src: url('assets/logo/kontento-wordmark-kuning-600w.png'); /* ---------- DENSITY: marketing (bawaan) ---------- */ --d-btn-h: 48px; --d-btn-px: var(--s6); --d-card-pad: var(--s7); --d-card-r: var(--r-lg); --d-gap: var(--s6); --d-text: var(--t-lead-size); --d-section-y: var(--s10); --d-row-h: 52px; } /* ---------- SEMANTIK: tema terang ---------- */ :root[data-theme="light"] { --bg: var(--warm-150); --surface: var(--warm-35); --surface-2: var(--warm-0); --surface-3: var(--warm-100); --line: var(--warm-350); --line-strong: var(--warm-450); --text-1: var(--ink-900); --text-2: var(--ink-700); --text-3: var(--ink-500); --text-accent: var(--yellow-800); /* BUKAN yellow-500, itu 1,33:1 dan buta */ --action: var(--yellow-500); --action-hover: var(--yellow-400); --action-active: var(--yellow-600); --on-action: var(--ink-900); --action-quiet: rgba(255, 214, 2, 0.24); /* Kuning itu warna TERANG, jadi isinya cuma 1,33 dari latar terang dan bentuk tombolnya mengambang. Di tema terang tombol utama wajib bergaris. */ --action-edge: var(--yellow-700); /* 2,58 dari latar, 2,31 dari isinya */ --focus: var(--ink-900); /* kuning tidak terlihat di latar terang */ --e-1: 0 1px 2px rgba(60, 42, 30, 0.10); --e-2: 0 8px 20px -8px rgba(60, 42, 30, 0.16); --e-3: 0 24px 56px -20px rgba(60, 42, 30, 0.22); --e-inset: inset 0 0 0 1px rgba(22, 29, 44, 0.05); --ok-bg: var(--ok-tint); --ok-fg: var(--ok-ink); --warn-bg: var(--warn-tint); --warn-fg: var(--warn-ink); --bad-bg: var(--bad-tint); --bad-fg: var(--bad-ink); --info-bg: var(--info-tint); --info-fg: var(--info-ink); --wm-src: url('assets/logo/kontento-wordmark-navy-600w.png'); } /* ---------- DENSITY: product ---------- */ :root[data-density="product"] { --d-btn-h: 40px; --d-btn-px: var(--s4); --d-card-pad: var(--s5); --d-card-r: var(--r-md); --d-gap: var(--s4); --d-text: var(--t-body-size); --d-section-y: var(--s7); --d-row-h: 44px; }