/* ========================================================================== LUXURY.CSS — SSOT token Dark Luxury dwi-mode (Buku 14 / OSMORPH BIBLE v1.0) ========================================================================== Governance: - Ini FOUNDATION untuk permukaan BARU (app-klien, app-lapangan, layar registry CLI-xxx / OPS-xxx berikutnya). TIDAK menyentuh style.css/components.css/ app-shell.css (register Soft Material × Liquid Glass milik konsol staff EXISTING — dilarang campur register, Hukum Buku 14). - OPT-IN, bukan global override: semua token & komponen di sini di-scope di bawah selector atribut [data-lux]. Selama sebuah halaman/elemen TIDAK punya atribut data-lux, file ini nol-efek — aman di-load di mana saja tanpa risiko bocor ke permukaan lain. - Cara pakai: taruh `data-lux` di elemen root permukaan (biasanya ), lalu opsional `data-lux-mode="light"` untuk mode terang. Tanpa data-lux-mode = GELAP (default, sesuai keputusan owner 2026-07-16/17). Contoh: ... - Mode switch: pakai `luxury-theme.js` (baca/simpan localStorage 'osmo-lux-mode', re-apply data-lux-mode). Lihat file itu untuk API. - Reuse token, jangan copy nilai mentah ke modul (anti-duplikasi, Buku 14 "Satu sumber gaya"). Komponen kanonik ada di `luxury-components.css`. ========================================================================== */ /* Inter — self-contained (permukaan Luxury tidak wajib load style.css lama) */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800&display=swap'); /* Serif display (mockup grid klien: Good Morning / Design.Build.Live / Interior Made for You = serif editorial). Amandemen sheet V1.0 (sheet belum mendefinisikan display face). */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&display=swap'); /* -------------------------------------------------------------------------- 1) TOKENS — GELAP (default, berlaku begitu [data-lux] hadir tanpa mode) -------------------------------------------------------------------------- */ [data-lux] { /* ===================================================================== TOKEN = OSMORPH DESIGN SYSTEM & UI GUIDE V1.0 (sheet resmi owner, 17 Juli 2026 — mockups/_reference/OSMORPH-DESIGN-SYSTEM-V1.png). Hex EKSAK dari sheet; DILARANG warna di luar palette (aturan DON'TS). Catatan baca: "Primary Dark" tertulis #86956E di font sheet = #B6956E (swatch tan-coklat; glyph 8/B ambigu — diverifikasi visual zoom). ===================================================================== */ --lux-bg: #111111; /* Surface (sheet) — background utama */ --lux-bg-elevated: #1A1A1A; /* Surface Elevated */ --lux-surface: #1F1F1F; /* Surface Card */ --lux-surface-2: #1A1A1A; /* inset/track (pakai elevated) */ --lux-border: #2A2A2A; /* Border / Divider (sheet) */ --lux-border-strong: #3A3A3C; --lux-fg: #FFFFFF; /* Text Primary */ --lux-fg-muted: #A1A1AA; /* Text Secondary */ --lux-fg-dim: #6B6B73; /* Text Tertiary — HANYA teks besar/non-esensial */ /* --- Aksen (sheet): Primary tan + turunannya — FLAT, tanpa gradient --- */ --lux-gold: #D2B48C; /* Primary — elemen utama & aksi penting */ --lux-gold-soft: #F0DFC8; /* Accent — highlight lembut/hover terang */ --lux-bronze: #B6956E; /* Primary Dark — pressed/varian tenang */ --lux-cta-ink: #111111; /* teks gelap di atas Primary (kontras tinggi) */ /* --- Status (sheet): success + warning; danger/info = TAMBAHAN di luar sheet (kebutuhan error/info commerce) — tandai utk konfirmasi owner --- */ --lux-success: #6FD08C; --lux-warning: #F4C35E; --lux-danger: #E5484D; /* (tambahan — belum di sheet) */ --lux-info: #7AA2C4; /* (tambahan — belum di sheet) */ /* --- Glass (overlay/modal) --- */ --lux-glass-bg: rgba(17, 17, 17, 0.78); --lux-glass-border: rgba(255, 255, 255, 0.08); --lux-glass-blur: blur(28px) saturate(140%); /* --- Elevation (sheet: 0dp none · 1dp card · 2dp elevated · 3dp modal) --- */ --lux-shadow-card: 0 4px 14px rgba(0, 0, 0, 0.35); --lux-shadow-elevated: 0 10px 32px rgba(0, 0, 0, 0.45); --lux-shadow-fab: 0 8px 20px rgba(0, 0, 0, 0.4); /* --- Radius SYSTEM (sheet: 4 / 8 / 12 / 16) --- */ --lux-radius-xs: 4px; --lux-radius-sm: 8px; --lux-radius-btn: 12px; --lux-radius-card: 16px; --lux-radius-modal: 16px; --lux-radius-pill: 999px; /* --- Spacing 8pt (sheet: 4 8 12 16 24 32 40 48 56 64) --- */ --lux-space-1: 4px; --lux-space-2: 8px; --lux-space-3: 12px; --lux-space-4: 16px; --lux-space-5: 20px; --lux-space-6: 24px; --lux-space-8: 32px; --lux-space-10: 40px; --lux-space-12: 48px; --lux-space-14: 56px; --lux-space-16: 64px; /* --- Tipografi (sheet: SF Pro Display/Text; fallback Inter non-Apple) --- */ --lux-font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Segoe UI', sans-serif; --lux-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; /* HANYA kalimat display editorial (mockup) */ --lux-text-label-sm: 11px; /* Label Small 11/14 Semibold */ --lux-text-label: 12px; /* Label Large 12/16 Semibold */ --lux-text-sm: 12px; /* Body Small 12/16 */ --lux-text-base: 14px; /* Body Medium 14/20 */ --lux-text-lg: 16px; /* Body Large 16/24 */ --lux-text-input: 16px; /* WAJIB input — cegah iOS zoom */ --lux-text-h2: 20px; /* Heading 2 20/28 Semibold */ --lux-text-h1: 24px; /* Heading 1 24/32 Semibold */ --lux-text-display: 32px; /* Display Large 32/40 Semibold */ --lux-text-xs: 11px; /* alias kompat */ --lux-text-xl: 24px; /* alias kompat */ --lux-text-2xl: 32px; /* alias kompat */ --lux-text-kpi: clamp(2rem, 8vw, 2.75rem); --lux-weight-kpi: 300; --lux-weight-heading: 600; /* Semibold seluruh heading (sheet) */ /* --- Icon system (sheet): outline 1.5px stroke, rounded, 20px (16 label kecil); warna #A1A1AA default / #D2B48C aktif --- */ --lux-icon-size: 20px; --lux-icon-size-sm: 16px; --lux-icon-stroke: 1.5px; /* --- Motion --- */ --lux-ease-smooth: cubic-bezier(0.16, 1, 0.3, 1); --lux-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --lux-t-micro: 150ms; --lux-t-medium: 240ms; --lux-t-slow: 360ms; /* --- Ukuran struktural (sheet Screen Anatomy: status 44 · header 56 · tabs 40 · FAB 48 · botnav 64 · margin 16 · safe-bottom 47) --- */ --lux-touch-min: 44px; --lux-header-height: 56px; --lux-tabs-height: 40px; --lux-fab-size: 48px; --lux-botnav-height: 64px; --lux-margin-screen: 16px; --lux-safe-bottom: env(safe-area-inset-bottom, 0px); /* --- CTA (Client Constitution RULE 9, 2026-07-17): 1 aksi utama lebar-penuh tinggi-56 — amandemen resmi atas sheet V1.0 (radius CTA tetap pakai --lux-radius-card kanonik, BUKAN token radius baru — lihat OSMORPH-CLIENT-CONSTITUTION.md pasal 5 konflik #1). --- */ --lux-cta-height: 56px; /* --- Z-index --- */ --lux-z-header: 30; --lux-z-botnav: 40; --lux-z-fab: 45; --lux-z-modal: 100; --lux-z-toast: 110; } /* -------------------------------------------------------------------------- 2) TOKENS — TERANG (opt-in via data-lux-mode="light"; melayani kerja panjang & silau lapangan, per Buku 14) -------------------------------------------------------------------------- */ [data-lux][data-lux-mode="light"] { /* CATATAN: sheet V1.0 = dark-only. Blok ini = TURUNAN mesin dari palette sheet (bukan sheet langsung): netral MURNI cermin Surface #111111-family + tan satu-hue-eksak dgn Primary #D2B48C (hue 34.3° sat 44%), digelapkan sampai text-safe. Kontras dihitung (bukan tebakan) — angka di komentar tiap baris. */ --lux-bg: #F5F5F5; --lux-bg-elevated: #FAFAFA; --lux-surface: #FFFFFF; /* Card — putih di atas bg abu */ --lux-surface-2: #EDEDED; /* inset/track */ --lux-border: #E4E4E7; --lux-border-strong: #D4D4D8; --lux-fg: #111111; /* cermin Surface gelap — 17.3:1 */ --lux-fg-muted: #52525B; /* 7.1:1 */ --lux-fg-dim: #A1A1AA; /* 2.35:1 — HANYA teks besar/non-esensial */ --lux-gold: #846234; /* tan hue-#D2B48C, text-safe 5.1:1 — flat */ --lux-gold-soft: #9A723C; /* hover/ikon (3.97:1), bukan teks kecil */ --lux-bronze: #6E512B; /* pressed/varian tenang (6.7:1) */ --lux-cta-ink: #FFFFFF; /* putih di atas #846234 = 5.56:1 */ /* status turunan light (aksen dark #6FD08C/#F4C35E tak lolos di bg terang) */ --lux-success: #3E8E58; /* 3.69:1 — badge/ikon (non-teks ≥3:1) */ --lux-warning: #A97B14; /* 3.48:1 — idem */ --lux-glass-bg: rgba(255, 255, 255, 0.72); --lux-glass-border: rgba(17, 17, 17, 0.10); --lux-shadow-card: 0 8px 20px rgba(17, 17, 17, 0.08), 0 1px 0 rgba(255, 255, 255, 0.6) inset; --lux-shadow-elevated: 0 20px 44px rgba(17, 17, 17, 0.14); --lux-shadow-fab: 0 10px 22px rgba(17, 17, 17, 0.16), 0 0 0 1px rgba(132, 98, 52, 0.30); } /* -------------------------------------------------------------------------- 3) BASE — diterapkan langsung ke elemen yang membawa [data-lux] -------------------------------------------------------------------------- */ [data-lux] { background: var(--lux-bg); color: var(--lux-fg); font-family: var(--lux-font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color var(--lux-t-slow) var(--lux-ease-smooth), color var(--lux-t-slow) var(--lux-ease-smooth); } /* Kalau data-lux dipasang di , pastikan ikut latar (bukan putih default) */ [data-lux] body { background: var(--lux-bg); color: var(--lux-fg); min-height: 100dvh; } [data-lux] ::selection { background: var(--lux-gold); color: var(--lux-cta-ink); } /* -------------------------------------------------------------------------- 4) REDUCED MOTION — global safety net (konten tetap muncul, gerak dimatikan) -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { [data-lux], [data-lux] * , [data-lux] *::before, [data-lux] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }