/* ==========================================================================
Lesley Guitar — Design Tokens v1
Arah: Warm Editorial Luxury, band charcoal/krem selang-seling
Font: Plus Jakarta Sans (display) + Inter (UI/body)
Motion: tier Subtle — transform/opacity saja
CATATAN: jangan pakai @import untuk font (blocking).
Pasang di setiap halaman:
========================================================================== */
:root {
/* --- Ink / charcoal (band gelap) ------------------------------------- */
--ink-900: #14100E; /* footer, paling dalam */
--ink-800: #1C1614; /* band gelap utama: header, hero, kategori, video */
--ink-700: #2A211C; /* kartu di atas band gelap */
--ink-600: #3A2E27; /* border / divider di band gelap */
/* --- Krem / cream (band terang) -------------------------------------- */
--cream-50: #FFFFFF; /* permukaan kartu */
--cream-100: #FDFAF4; /* band terang paling terang */
--cream-200: #F7F1E6; /* band terang utama */
--cream-300: #EDE2CE; /* border / divider di band terang */
/* --- Copper (aksen brand) -------------------------------------------- */
--copper-700: #723C25; /* hover tombol */
--copper-600: #934E30; /* BRAND — bg tombol, teks di atas krem */
--copper-500: #A0673F; /* aksen dekoratif (garis, ikon) */
--copper-400: #C88A5C; /* teks aksen DI ATAS band gelap (6.3:1) */
--gold-400: #F0B94D; /* aksen kuning "Why Choose" DI ATAS copper-600 (4.6:1) */
/* --- Teks ------------------------------------------------------------ */
--text-on-cream: #2B2118; /* body di band terang (13.4:1) */
--text-on-cream-muted: #7A6A5A; /* sekunder di band terang (4.6:1) */
--text-on-ink: #F7F1E6; /* body di band gelap (14.9:1) */
--text-on-ink-muted: #B8A896; /* sekunder di band gelap (7.9:1) */
/* --- Status ---------------------------------------------------------- */
--success: #1E7A46;
--danger: #B3261E;
--whatsapp: #128C4A; /* digelapkan dari #25D366 agar teks putih 4.5:1 */
/* --- Tipografi ------------------------------------------------------- */
--font-display: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
--font-ui: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--fs-2xs: 0.6875rem; /* 11px — label mikro */
--fs-xs: 0.75rem; /* 12px — meta, kategori */
--fs-sm: 0.875rem; /* 14px — teks pendukung */
--fs-md: 1rem; /* 16px — BODY (minimum, hindari zoom iOS) */
--fs-lg: 1.125rem; /* 18px — nama produk besar */
--fs-xl: 1.375rem; /* 22px — judul kartu */
--fs-2xl: 1.75rem; /* 28px — judul section (mobile) */
--fs-3xl: 2.25rem; /* 36px — judul section (desktop) */
--fs-4xl: 3rem; /* 48px — judul hero (desktop) */
--lh-tight: 1.15; /* judul display */
--lh-snug: 1.35; /* subjudul */
--lh-body: 1.65; /* paragraf */
--ls-display: -0.02em; /* sans geometris besar dirapatkan sedikit */
--ls-eyebrow: 0.18em; /* SMALL-CAPS section header */
--ls-body: 0;
/* --- Spacing (skala 4pt) --------------------------------------------- */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
--sp-9: 96px;
--band-py-mobile: var(--sp-7); /* padding vertikal band di HP */
--band-py-desktop: var(--sp-9); /* padding vertikal band di desktop */
/* --- Bentuk ---------------------------------------------------------- */
--radius-xs: 2px; /* input, badge */
--radius-sm: 6px; /* tombol, kartu produk */
--radius-md: 10px; /* kartu besar, frame hero */
--radius-full: 999px;
--container: 1200px;
--border-hairline: 1px;
/* --- Elevasi (bayangan hangat, bukan abu netral) ---------------------- */
--elev-1: 0 1px 2px rgba(43, 33, 24, 0.06);
--elev-2: 0 2px 8px rgba(43, 33, 24, 0.08);
--elev-3: 0 8px 24px rgba(43, 33, 24, 0.10);
--elev-4: 0 18px 44px rgba(43, 33, 24, 0.16);
/* --- Motion (tier Subtle) -------------------------------------------- */
--dur-fast: 150ms; /* press feedback */
--dur-base: 250ms; /* hover */
--dur-slow: 350ms; /* scroll reveal */
--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);
--reveal-y: 12px; /* jarak angkat saat reveal */
--reveal-stagger: 30ms; /* jeda antar kartu */
--hover-zoom: 1.04; /* zoom foto produk saat hover */
/* --- Layer ----------------------------------------------------------- */
--z-base: 0;
--z-raised: 10;
--z-sticky: 100;
--z-float: 200;
--z-overlay: 1000;
}
/* Angka harga tidak boleh geser saat berubah */
.tabular { font-variant-numeric: tabular-nums; }
/* Hormati preferensi pengguna — WAJIB untuk semua animasi */
@media (prefers-reduced-motion: reduce) {
:root {
--dur-fast: 1ms;
--dur-base: 1ms;
--dur-slow: 1ms;
--reveal-y: 0px;
--reveal-stagger: 0ms;
--hover-zoom: 1;
}
}