/* --on-accent: warna teks/ikon DI ATAS bidang --accent. Dihitung per palet dengan rasio kontras WCAG (semua >= 4.77:1). Sebelum token ini, kendali beraksen memakai #fff mentah — di palet gelap rasionya cuma 1.67-2.69:1 alias tak terbaca, dan cacat itu SUDAH TAYANG di halaman katalog. JANGAN kembali ke #fff mentah. */ /* ============================================================================ Risos AI — MULTI-PALETTE THEME LAYER Spec: web/design_handoff_full_redesign/01_THEME_SYSTEM.md ---------------------------------------------------------------------------- 3 independent axes (all persisted client-side, no DB schema change): • mode : dark | light -> (theme.js) • palette : 6 curated themes -> (theme.js) • accent : null | 1 of 12 hex -> --accent/--accent-2 override (theme.js inline) This file ONLY retints the *surface + text + line + accent* tokens that the existing token system already exposes (style.css :root + tokens.css). It does NOT invent a second system — it layers palette-specific values on top of the base dark/light tokens via the higher-specificity [data-theme][data-palette] selectors. PAGAR PENGAMAN (§3 of the spec): 1. Palettes override surfaces/text/line/accent — values come straight from the QA'd themes.js table, so every text↔bg pair stays readable. 2. STATUS colors (--ok/--warn/--bad and their legacy --c-success/-warning/ -danger aliases) are NEVER touched here — semantic constants in every theme. "Selesai" stays green even in the Hutan (green) palette. 3. Only these 6 palettes ship. No free color-picker. 4. The accent picker (theme.js) overrides ONLY --accent/--accent-2/--grad — surfaces & text are off-limits, so users cannot break contrast. Translucent overlays (--bg-surface, --bg-surface-hover, --bg-input) are left as mode-dependent white/dark alpha so the glass feel is preserved; they retint automatically because they sit on top of the palette --bg. ============================================================================ */ /* Default palette = samudra. When no data-palette is set, the base tokens in style.css/tokens.css already equal samudra, so nothing breaks for legacy. */ /* ───────────────────────────────────────────────────────────────────────── Helper: each palette block maps themes.js fields onto every theme-driven token the app actually consumes: bg -> --bg, --bg-base s1 -> --surface-1 s2 -> --surface-2, --bg-card, --bg-elevated, --bg-elev, --c-bg-paper s3 -> --surface-3 line -> --line, --c-line, --border-default, --border, --c-line-dark line2-> --line-2, --c-line-strong, --border-strong, --c-line-dark-2 fg -> --fg, --txt, --text-primary, --text, --c-text mut -> --fg-muted, --txt-muted, --text-secondary, --c-text-muted fnt -> --fg-faint, --txt-faint, --text-muted, --c-text-faint, --text-faint a -> --accent, --color-primary, --primary, --c-primary a2 -> --accent-2, --color-secondary, --secondary, --c-accent-bright a/a2 -> --grad, --grad-primary, --grad-app-accent (135deg a→a2) --grad-text (120deg a→a2→a2) --accent-soft / --c-app-accent-soft derived from `a` at low alpha. --shadow / --hl carried from the mode (dark = strong, light = soft). ───────────────────────────────────────────────────────────────────────── */ /* ╔══════════════════════════════════════════════════════════════════════╗ ║ SAMUDRA — biru laut · default brand ║ ╚══════════════════════════════════════════════════════════════════════╝ */ [data-theme="dark"][data-palette="samudra"], body.theme-dark[data-palette="samudra"] { --bg:#0A0E1A; --bg-base:#0A0E1A; --surface-1:#0C1122; --surface-2:#131A2E; --surface-3:#182138; --bg-card:#131A2E; --bg-elevated:#131A2E; --bg-elev:#0F1729; --c-bg-paper:#131A2E; --c-bg-light:#0A0E1A; --c-bg-cream:#0A0E1A; --c-bg-dark:#0A0E1A; --c-bg-deeper:#060914; --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13); --border-default:rgba(255,255,255,.07); --border:rgba(255,255,255,.07); --border-strong:rgba(255,255,255,.13); --c-line:#334155; --c-line-strong:#475569; --c-line-dark:rgba(255,255,255,.08); --c-line-dark-2:rgba(255,255,255,.16); --fg:#EAF0FB; --txt:#EAF0FB; --text-primary:#EAF0FB; --text:#EAF0FB; --c-text:#EAF0FB; --fg-muted:#98A6C0; --txt-muted:#98A6C0; --text-secondary:#98A6C0; --c-text-muted:#CBD5E1; --c-text-soft:#98A6C0; --fg-faint:#5E6E88; --txt-faint:#5E6E88; --text-muted:#5E6E88; --text-faint:#5E6E88; --c-text-faint:#5E6E88; --accent:#38BDF8; --on-accent:#0A0E1A; --accent-2:#22D3EE; --color-primary:#38BDF8; --primary:#38BDF8; --c-primary:#38BDF8; --c-app-accent:var(--accent); --c-accent:var(--accent-2); --accent-primary:var(--accent); --color-accent:var(--accent-2); --c-app-accent-hover:color-mix(in oklab, var(--accent) 82%, #000); --color-secondary:#22D3EE; --secondary:#22D3EE; --c-accent-bright:#22D3EE; --accent-soft:rgba(56,189,248,.10); --c-app-accent-soft:rgba(56,189,248,.18); --grad:linear-gradient(135deg,#38BDF8 0%,#22D3EE 100%); --grad-primary:linear-gradient(135deg,#38BDF8 0%,#22D3EE 100%); --grad-app-accent:linear-gradient(135deg,#38BDF8 0%,#22D3EE 100%); --grad-text:linear-gradient(120deg,#38BDF8 0%,#22D3EE 60%,#22D3EE 100%); --shadow:0 16px 40px -20px rgba(0,0,0,.70); --hl:inset 0 1px 0 rgba(255,255,255,.05); } [data-theme="light"][data-palette="samudra"], body.theme-light[data-palette="samudra"] { --bg:#D6E6FB; --bg-base:#D6E6FB; --surface-1:#E8F1FD; --surface-2:#E8F1FD; --surface-3:#DAE9FB; --bg-card:#E8F1FD; --bg-elevated:#E8F1FD; --bg-elev:#E8F1FD; --c-bg-paper:#E8F1FD; --c-bg-light:#D6E6FB; --c-bg-cream:#D6E6FB; --line:#E5EAF3; --line-2:#D4DCEA; --border-default:#E5EAF3; --border:#E5EAF3; --border-strong:#D4DCEA; --c-line:#E5EAF3; --c-line-strong:#D4DCEA; --c-line-dark:#E5EAF3; --c-line-dark-2:#D4DCEA; --fg:#0F1A2E; --txt:#0F1A2E; --text-primary:#0F1A2E; --text:#0F1A2E; --c-text:#0F1A2E; --fg-muted:#51607A; --txt-muted:#51607A; --text-secondary:#51607A; --c-text-muted:#51607A; --c-text-soft:#51607A; --fg-faint:#8593AB; --txt-faint:#8593AB; --text-muted:#8593AB; --text-faint:#8593AB; --c-text-faint:#8593AB; --accent:#1D6FE0; --on-accent:#FFFFFF; --accent-2:#0891B2; --color-primary:#1D6FE0; --primary:#1D6FE0; --c-primary:#1D6FE0; --c-app-accent:var(--accent); --c-accent:var(--accent-2); --accent-primary:var(--accent); --color-accent:var(--accent-2); --c-app-accent-hover:color-mix(in oklab, var(--accent) 82%, #000); --color-secondary:#0891B2; --secondary:#0891B2; --c-accent-bright:#0891B2; --accent-soft:rgba(29,111,224,.07); --c-app-accent-soft:rgba(29,111,224,.12); --grad:linear-gradient(135deg,#1D6FE0 0%,#0891B2 100%); --grad-primary:linear-gradient(135deg,#1D6FE0 0%,#0891B2 100%); --grad-app-accent:linear-gradient(135deg,#1D6FE0 0%,#0891B2 100%); --grad-text:linear-gradient(120deg,#1D6FE0 0%,#0891B2 60%,#0891B2 100%); --shadow:0 14px 38px -22px rgba(15,30,60,.28),0 4px 12px -8px rgba(15,30,60,.10); --hl:none; } /* ╔══════════════════════════════════════════════════════════════════════╗ ║ HUTAN — hijau zamrud · tenang ║ ╚══════════════════════════════════════════════════════════════════════╝ */ [data-theme="dark"][data-palette="hutan"], body.theme-dark[data-palette="hutan"] { --bg:#07120D; --bg-base:#07120D; --surface-1:#091711; --surface-2:#0F2118; --surface-3:#163022; --bg-card:#0F2118; --bg-elevated:#0F2118; --bg-elev:#0B1A12; --c-bg-paper:#0F2118; --c-bg-light:#07120D; --c-bg-cream:#07120D; --c-bg-dark:#07120D; --c-bg-deeper:#040C08; --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13); --border-default:rgba(255,255,255,.07); --border:rgba(255,255,255,.07); --border-strong:rgba(255,255,255,.13); --c-line:#2A4738; --c-line-strong:#3A5A48; --c-line-dark:rgba(255,255,255,.08); --c-line-dark-2:rgba(255,255,255,.16); --fg:#E6F3EC; --txt:#E6F3EC; --text-primary:#E6F3EC; --text:#E6F3EC; --c-text:#E6F3EC; --fg-muted:#94B4A4; --txt-muted:#94B4A4; --text-secondary:#94B4A4; --c-text-muted:#C2D9CD; --c-text-soft:#94B4A4; --fg-faint:#5C7A6B; --txt-faint:#5C7A6B; --text-muted:#5C7A6B; --text-faint:#5C7A6B; --c-text-faint:#5C7A6B; --accent:#34D399; --on-accent:#0A0E1A; --accent-2:#10B981; --color-primary:#34D399; --primary:#34D399; --c-primary:#34D399; --c-app-accent:var(--accent); --c-accent:var(--accent-2); --accent-primary:var(--accent); --color-accent:var(--accent-2); --c-app-accent-hover:color-mix(in oklab, var(--accent) 82%, #000); --color-secondary:#10B981; --secondary:#10B981; --c-accent-bright:#10B981; --accent-soft:rgba(52,211,153,.10); --c-app-accent-soft:rgba(52,211,153,.18); --grad:linear-gradient(135deg,#34D399 0%,#10B981 100%); --grad-primary:linear-gradient(135deg,#34D399 0%,#10B981 100%); --grad-app-accent:linear-gradient(135deg,#34D399 0%,#10B981 100%); --grad-text:linear-gradient(120deg,#34D399 0%,#10B981 60%,#10B981 100%); --shadow:0 16px 40px -20px rgba(0,0,0,.70); --hl:inset 0 1px 0 rgba(255,255,255,.05); } [data-theme="light"][data-palette="hutan"], body.theme-light[data-palette="hutan"] { --bg:#D2EEDD; --bg-base:#D2EEDD; --surface-1:#E5F6EC; --surface-2:#E5F6EC; --surface-3:#D6EEDE; --bg-card:#E5F6EC; --bg-elevated:#E5F6EC; --bg-elev:#E5F6EC; --c-bg-paper:#E5F6EC; --c-bg-light:#D2EEDD; --c-bg-cream:#D2EEDD; --line:#DCEBE3; --line-2:#C8DED2; --border-default:#DCEBE3; --border:#DCEBE3; --border-strong:#C8DED2; --c-line:#DCEBE3; --c-line-strong:#C8DED2; --c-line-dark:#DCEBE3; --c-line-dark-2:#C8DED2; --fg:#0C1F16; --txt:#0C1F16; --text-primary:#0C1F16; --text:#0C1F16; --c-text:#0C1F16; --fg-muted:#4C6457; --txt-muted:#4C6457; --text-secondary:#4C6457; --c-text-muted:#4C6457; --c-text-soft:#4C6457; --fg-faint:#7E988A; --txt-faint:#7E988A; --text-muted:#7E988A; --text-faint:#7E988A; --c-text-faint:#7E988A; --accent:#047857; --on-accent:#FFFFFF; --accent-2:#059669; --color-primary:#047857; --primary:#047857; --c-primary:#047857; --c-app-accent:var(--accent); --c-accent:var(--accent-2); --accent-primary:var(--accent); --color-accent:var(--accent-2); --c-app-accent-hover:color-mix(in oklab, var(--accent) 82%, #000); --color-secondary:#059669; --secondary:#059669; --c-accent-bright:#059669; --accent-soft:rgba(4,120,87,.08); --c-app-accent-soft:rgba(4,120,87,.12); --grad:linear-gradient(135deg,#047857 0%,#059669 100%); --grad-primary:linear-gradient(135deg,#047857 0%,#059669 100%); --grad-app-accent:linear-gradient(135deg,#047857 0%,#059669 100%); --grad-text:linear-gradient(120deg,#047857 0%,#059669 60%,#059669 100%); --shadow:0 14px 38px -22px rgba(15,30,60,.28),0 4px 12px -8px rgba(15,30,60,.10); --hl:none; } /* ╔══════════════════════════════════════════════════════════════════════╗ ║ SENJA — ungu lembayung · kreatif ║ ╚══════════════════════════════════════════════════════════════════════╝ */ [data-theme="dark"][data-palette="senja"], body.theme-dark[data-palette="senja"] { --bg:#110A1B; --bg-base:#110A1B; --surface-1:#160C22; --surface-2:#1E122F; --surface-3:#28193E; --bg-card:#1E122F; --bg-elevated:#1E122F; --bg-elev:#180E26; --c-bg-paper:#1E122F; --c-bg-light:#110A1B; --c-bg-cream:#110A1B; --c-bg-dark:#110A1B; --c-bg-deeper:#0B0612; --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.14); --border-default:rgba(255,255,255,.07); --border:rgba(255,255,255,.07); --border-strong:rgba(255,255,255,.14); --c-line:#3A2C4C; --c-line-strong:#4C3A60; --c-line-dark:rgba(255,255,255,.08); --c-line-dark-2:rgba(255,255,255,.16); --fg:#F0EAF9; --txt:#F0EAF9; --text-primary:#F0EAF9; --text:#F0EAF9; --c-text:#F0EAF9; --fg-muted:#AC9DC4; --txt-muted:#AC9DC4; --text-secondary:#AC9DC4; --c-text-muted:#D0C4E2; --c-text-soft:#AC9DC4; --fg-faint:#736288; --txt-faint:#736288; --text-muted:#736288; --text-faint:#736288; --c-text-faint:#736288; --accent:#C084FC; --on-accent:#0A0E1A; --accent-2:#A78BFA; --color-primary:#C084FC; --primary:#C084FC; --c-primary:#C084FC; --c-app-accent:var(--accent); --c-accent:var(--accent-2); --accent-primary:var(--accent); --color-accent:var(--accent-2); --c-app-accent-hover:color-mix(in oklab, var(--accent) 82%, #000); --color-secondary:#A78BFA; --secondary:#A78BFA; --c-accent-bright:#A78BFA; --accent-soft:rgba(192,132,252,.10); --c-app-accent-soft:rgba(192,132,252,.18); --grad:linear-gradient(135deg,#C084FC 0%,#A78BFA 100%); --grad-primary:linear-gradient(135deg,#C084FC 0%,#A78BFA 100%); --grad-app-accent:linear-gradient(135deg,#C084FC 0%,#A78BFA 100%); --grad-text:linear-gradient(120deg,#C084FC 0%,#A78BFA 60%,#A78BFA 100%); --shadow:0 16px 40px -20px rgba(0,0,0,.70); --hl:inset 0 1px 0 rgba(255,255,255,.05); } [data-theme="light"][data-palette="senja"], body.theme-light[data-palette="senja"] { --bg:#E3D9FB; --bg-base:#E3D9FB; --surface-1:#EEE8FE; --surface-2:#EEE8FE; --surface-3:#DFD6FB; --bg-card:#EEE8FE; --bg-elevated:#EEE8FE; --bg-elev:#EEE8FE; --c-bg-paper:#EEE8FE; --c-bg-light:#E3D9FB; --c-bg-cream:#E3D9FB; --line:#E9E2F5; --line-2:#D9CEEC; --border-default:#E9E2F5; --border:#E9E2F5; --border-strong:#D9CEEC; --c-line:#E9E2F5; --c-line-strong:#D9CEEC; --c-line-dark:#E9E2F5; --c-line-dark-2:#D9CEEC; --fg:#1A1026; --txt:#1A1026; --text-primary:#1A1026; --text:#1A1026; --c-text:#1A1026; --fg-muted:#5E5176; --txt-muted:#5E5176; --text-secondary:#5E5176; --c-text-muted:#5E5176; --c-text-soft:#5E5176; --fg-faint:#8E80A8; --txt-faint:#8E80A8; --text-muted:#8E80A8; --text-faint:#8E80A8; --c-text-faint:#8E80A8; --accent:#7C3AED; --on-accent:#FFFFFF; --accent-2:#9333EA; --color-primary:#7C3AED; --primary:#7C3AED; --c-primary:#7C3AED; --c-app-accent:var(--accent); --c-accent:var(--accent-2); --accent-primary:var(--accent); --color-accent:var(--accent-2); --c-app-accent-hover:color-mix(in oklab, var(--accent) 82%, #000); --color-secondary:#9333EA; --secondary:#9333EA; --c-accent-bright:#9333EA; --accent-soft:rgba(124,58,237,.08); --c-app-accent-soft:rgba(124,58,237,.12); --grad:linear-gradient(135deg,#7C3AED 0%,#9333EA 100%); --grad-primary:linear-gradient(135deg,#7C3AED 0%,#9333EA 100%); --grad-app-accent:linear-gradient(135deg,#7C3AED 0%,#9333EA 100%); --grad-text:linear-gradient(120deg,#7C3AED 0%,#9333EA 60%,#9333EA 100%); --shadow:0 14px 38px -22px rgba(15,30,60,.28),0 4px 12px -8px rgba(15,30,60,.10); --hl:none; } /* ╔══════════════════════════════════════════════════════════════════════╗ ║ BARA — amber hangat · fokus ║ ╚══════════════════════════════════════════════════════════════════════╝ */ [data-theme="dark"][data-palette="bara"], body.theme-dark[data-palette="bara"] { --bg:#150F08; --bg-base:#150F08; --surface-1:#1A130B; --surface-2:#241A0F; --surface-3:#312416; --bg-card:#241A0F; --bg-elevated:#241A0F; --bg-elev:#1E160C; --c-bg-paper:#241A0F; --c-bg-light:#150F08; --c-bg-cream:#150F08; --c-bg-dark:#150F08; --c-bg-deeper:#0E0A05; --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13); --border-default:rgba(255,255,255,.07); --border:rgba(255,255,255,.07); --border-strong:rgba(255,255,255,.13); --c-line:#473A28; --c-line-strong:#5A4A34; --c-line-dark:rgba(255,255,255,.08); --c-line-dark-2:rgba(255,255,255,.16); --fg:#F5EEE2; --txt:#F5EEE2; --text-primary:#F5EEE2; --text:#F5EEE2; --c-text:#F5EEE2; --fg-muted:#BBA88C; --txt-muted:#BBA88C; --text-secondary:#BBA88C; --c-text-muted:#DBC9AD; --c-text-soft:#BBA88C; --fg-faint:#7E6E54; --txt-faint:#7E6E54; --text-muted:#7E6E54; --text-faint:#7E6E54; --c-text-faint:#7E6E54; --accent:#FBBF24; --on-accent:#0A0E1A; --accent-2:#FB923C; --color-primary:#FBBF24; --primary:#FBBF24; --c-primary:#FBBF24; --c-app-accent:var(--accent); --c-accent:var(--accent-2); --accent-primary:var(--accent); --color-accent:var(--accent-2); --c-app-accent-hover:color-mix(in oklab, var(--accent) 82%, #000); --color-secondary:#FB923C; --secondary:#FB923C; --c-accent-bright:#FB923C; --accent-soft:rgba(251,191,36,.10); --c-app-accent-soft:rgba(251,191,36,.18); --grad:linear-gradient(135deg,#FBBF24 0%,#FB923C 100%); --grad-primary:linear-gradient(135deg,#FBBF24 0%,#FB923C 100%); --grad-app-accent:linear-gradient(135deg,#FBBF24 0%,#FB923C 100%); --grad-text:linear-gradient(120deg,#FBBF24 0%,#FB923C 60%,#FB923C 100%); --shadow:0 16px 40px -20px rgba(0,0,0,.70); --hl:inset 0 1px 0 rgba(255,255,255,.05); } [data-theme="light"][data-palette="bara"], body.theme-light[data-palette="bara"] { --bg:#FBE7CB; --bg-base:#FBE7CB; --surface-1:#FDF1DE; --surface-2:#FDF1DE; --surface-3:#FAE3C5; --bg-card:#FDF1DE; --bg-elevated:#FDF1DE; --bg-elev:#FDF1DE; --c-bg-paper:#FDF1DE; --c-bg-light:#FBE7CB; --c-bg-cream:#FBE7CB; --line:#EEE5D6; --line-2:#E0D2BD; --border-default:#EEE5D6; --border:#EEE5D6; --border-strong:#E0D2BD; --c-line:#EEE5D6; --c-line-strong:#E0D2BD; --c-line-dark:#EEE5D6; --c-line-dark-2:#E0D2BD; --fg:#231A0E; --txt:#231A0E; --text-primary:#231A0E; --text:#231A0E; --c-text:#231A0E; --fg-muted:#665841; --txt-muted:#665841; --text-secondary:#665841; --c-text-muted:#665841; --c-text-soft:#665841; --fg-faint:#998A6E; --txt-faint:#998A6E; --text-muted:#998A6E; --text-faint:#998A6E; --c-text-faint:#998A6E; --accent:#B45309; --on-accent:#FFFFFF; --accent-2:#C2410C; --color-primary:#B45309; --primary:#B45309; --c-primary:#B45309; --c-app-accent:var(--accent); --c-accent:var(--accent-2); --accent-primary:var(--accent); --color-accent:var(--accent-2); --c-app-accent-hover:color-mix(in oklab, var(--accent) 82%, #000); --color-secondary:#C2410C; --secondary:#C2410C; --c-accent-bright:#C2410C; --accent-soft:rgba(180,83,9,.08); --c-app-accent-soft:rgba(180,83,9,.12); --grad:linear-gradient(135deg,#B45309 0%,#C2410C 100%); --grad-primary:linear-gradient(135deg,#B45309 0%,#C2410C 100%); --grad-app-accent:linear-gradient(135deg,#B45309 0%,#C2410C 100%); --grad-text:linear-gradient(120deg,#B45309 0%,#C2410C 60%,#C2410C 100%); --shadow:0 14px 38px -22px rgba(15,30,60,.28),0 4px 12px -8px rgba(15,30,60,.10); --hl:none; } /* ╔══════════════════════════════════════════════════════════════════════╗ ║ MAWAR — merah jambu · ramah ║ ╚══════════════════════════════════════════════════════════════════════╝ */ [data-theme="dark"][data-palette="mawar"], body.theme-dark[data-palette="mawar"] { --bg:#160A10; --bg-base:#160A10; --surface-1:#1B0E15; --surface-2:#26131D; --surface-3:#331926; --bg-card:#26131D; --bg-elevated:#26131D; --bg-elev:#1F0F18; --c-bg-paper:#26131D; --c-bg-light:#160A10; --c-bg-cream:#160A10; --c-bg-dark:#160A10; --c-bg-deeper:#0F060B; --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13); --border-default:rgba(255,255,255,.07); --border:rgba(255,255,255,.07); --border-strong:rgba(255,255,255,.13); --c-line:#4A2E3A; --c-line-strong:#5E3A4A; --c-line-dark:rgba(255,255,255,.08); --c-line-dark-2:rgba(255,255,255,.16); --fg:#F7E9EF; --txt:#F7E9EF; --text-primary:#F7E9EF; --text:#F7E9EF; --c-text:#F7E9EF; --fg-muted:#C29DAC; --txt-muted:#C29DAC; --text-secondary:#C29DAC; --c-text-muted:#E0C2CF; --c-text-soft:#C29DAC; --fg-faint:#846473; --txt-faint:#846473; --text-muted:#846473; --text-faint:#846473; --c-text-faint:#846473; --accent:#FB7185; --on-accent:#0A0E1A; --accent-2:#F472B6; --color-primary:#FB7185; --primary:#FB7185; --c-primary:#FB7185; --c-app-accent:var(--accent); --c-accent:var(--accent-2); --accent-primary:var(--accent); --color-accent:var(--accent-2); --c-app-accent-hover:color-mix(in oklab, var(--accent) 82%, #000); --color-secondary:#F472B6; --secondary:#F472B6; --c-accent-bright:#F472B6; --accent-soft:rgba(251,113,133,.10); --c-app-accent-soft:rgba(251,113,133,.18); --grad:linear-gradient(135deg,#FB7185 0%,#F472B6 100%); --grad-primary:linear-gradient(135deg,#FB7185 0%,#F472B6 100%); --grad-app-accent:linear-gradient(135deg,#FB7185 0%,#F472B6 100%); --grad-text:linear-gradient(120deg,#FB7185 0%,#F472B6 60%,#F472B6 100%); --shadow:0 16px 40px -20px rgba(0,0,0,.70); --hl:inset 0 1px 0 rgba(255,255,255,.05); } [data-theme="light"][data-palette="mawar"], body.theme-light[data-palette="mawar"] { --bg:#FCD9E6; --bg-base:#FCD9E6; --surface-1:#FFE9F0; --surface-2:#FFE9F0; --surface-3:#FBD5E3; --bg-card:#FFE9F0; --bg-elevated:#FFE9F0; --bg-elev:#FFE9F0; --c-bg-paper:#FFE9F0; --c-bg-light:#FCD9E6; --c-bg-cream:#FCD9E6; --line:#F1E1E7; --line-2:#E6CDD6; --border-default:#F1E1E7; --border:#F1E1E7; --border-strong:#E6CDD6; --c-line:#F1E1E7; --c-line-strong:#E6CDD6; --c-line-dark:#F1E1E7; --c-line-dark-2:#E6CDD6; --fg:#26101A; --txt:#26101A; --text-primary:#26101A; --text:#26101A; --c-text:#26101A; --fg-muted:#6E4F5A; --txt-muted:#6E4F5A; --text-secondary:#6E4F5A; --c-text-muted:#6E4F5A; --c-text-soft:#6E4F5A; --fg-faint:#A07F8B; --txt-faint:#A07F8B; --text-muted:#A07F8B; --text-faint:#A07F8B; --c-text-faint:#A07F8B; --accent:#BE123C; --on-accent:#FFFFFF; --accent-2:#DB2777; --color-primary:#BE123C; --primary:#BE123C; --c-primary:#BE123C; --c-app-accent:var(--accent); --c-accent:var(--accent-2); --accent-primary:var(--accent); --color-accent:var(--accent-2); --c-app-accent-hover:color-mix(in oklab, var(--accent) 82%, #000); --color-secondary:#DB2777; --secondary:#DB2777; --c-accent-bright:#DB2777; --accent-soft:rgba(190,18,60,.08); --c-app-accent-soft:rgba(190,18,60,.12); --grad:linear-gradient(135deg,#BE123C 0%,#DB2777 100%); --grad-primary:linear-gradient(135deg,#BE123C 0%,#DB2777 100%); --grad-app-accent:linear-gradient(135deg,#BE123C 0%,#DB2777 100%); --grad-text:linear-gradient(120deg,#BE123C 0%,#DB2777 60%,#DB2777 100%); --shadow:0 14px 38px -22px rgba(15,30,60,.28),0 4px 12px -8px rgba(15,30,60,.10); --hl:none; } /* ╔══════════════════════════════════════════════════════════════════════╗ ║ GRAFIT — netral monokrom · minim distraksi ║ ╚══════════════════════════════════════════════════════════════════════╝ */ [data-theme="dark"][data-palette="grafit"], body.theme-dark[data-palette="grafit"] { --bg:#0C0D10; --bg-base:#0C0D10; --surface-1:#0F1014; --surface-2:#16181D; --surface-3:#1F2229; --bg-card:#16181D; --bg-elevated:#16181D; --bg-elev:#121317; --c-bg-paper:#16181D; --c-bg-light:#0C0D10; --c-bg-cream:#0C0D10; --c-bg-dark:#0C0D10; --c-bg-deeper:#08090B; --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13); --border-default:rgba(255,255,255,.07); --border:rgba(255,255,255,.07); --border-strong:rgba(255,255,255,.13); --c-line:#2A2E36; --c-line-strong:#3A3F49; --c-line-dark:rgba(255,255,255,.08); --c-line-dark-2:rgba(255,255,255,.16); --fg:#E9ECF2; --txt:#E9ECF2; --text-primary:#E9ECF2; --text:#E9ECF2; --c-text:#E9ECF2; --fg-muted:#9AA3B2; --txt-muted:#9AA3B2; --text-secondary:#9AA3B2; --c-text-muted:#C3CAD6; --c-text-soft:#9AA3B2; --fg-faint:#646C7B; --txt-faint:#646C7B; --text-muted:#646C7B; --text-faint:#646C7B; --c-text-faint:#646C7B; --accent:#8FA0BD; --on-accent:#0A0E1A; --accent-2:#B6C2D6; --color-primary:#8FA0BD; --primary:#8FA0BD; --c-primary:#8FA0BD; --c-app-accent:var(--accent); --c-accent:var(--accent-2); --accent-primary:var(--accent); --color-accent:var(--accent-2); --c-app-accent-hover:color-mix(in oklab, var(--accent) 82%, #000); --color-secondary:#B6C2D6; --secondary:#B6C2D6; --c-accent-bright:#B6C2D6; --accent-soft:rgba(143,160,189,.12); --c-app-accent-soft:rgba(143,160,189,.18); --grad:linear-gradient(135deg,#8FA0BD 0%,#B6C2D6 100%); --grad-primary:linear-gradient(135deg,#8FA0BD 0%,#B6C2D6 100%); --grad-app-accent:linear-gradient(135deg,#8FA0BD 0%,#B6C2D6 100%); --grad-text:linear-gradient(120deg,#8FA0BD 0%,#B6C2D6 60%,#B6C2D6 100%); --shadow:0 16px 40px -20px rgba(0,0,0,.70); --hl:inset 0 1px 0 rgba(255,255,255,.05); } [data-theme="light"][data-palette="grafit"], body.theme-light[data-palette="grafit"] { --bg:#E2E8F1; --bg-base:#E2E8F1; --surface-1:#EFF3F9; --surface-2:#EFF3F9; --surface-3:#DFE5EF; --bg-card:#EFF3F9; --bg-elevated:#EFF3F9; --bg-elev:#EFF3F9; --c-bg-paper:#EFF3F9; --c-bg-light:#E2E8F1; --c-bg-cream:#E2E8F1; --line:#E5E8EE; --line-2:#D5DAE3; --border-default:#E5E8EE; --border:#E5E8EE; --border-strong:#D5DAE3; --c-line:#E5E8EE; --c-line-strong:#D5DAE3; --c-line-dark:#E5E8EE; --c-line-dark-2:#D5DAE3; --fg:#15181F; --txt:#15181F; --text-primary:#15181F; --text:#15181F; --c-text:#15181F; --fg-muted:#525A68; --txt-muted:#525A68; --text-secondary:#525A68; --c-text-muted:#525A68; --c-text-soft:#525A68; --fg-faint:#88909E; --txt-faint:#88909E; --text-muted:#88909E; --text-faint:#88909E; --c-text-faint:#88909E; --accent:#475569; --on-accent:#FFFFFF; --accent-2:#64748B; --color-primary:#475569; --primary:#475569; --c-primary:#475569; --c-app-accent:var(--accent); --c-accent:var(--accent-2); --accent-primary:var(--accent); --color-accent:var(--accent-2); --c-app-accent-hover:color-mix(in oklab, var(--accent) 82%, #000); --color-secondary:#64748B; --secondary:#64748B; --c-accent-bright:#64748B; --accent-soft:rgba(71,85,105,.08); --c-app-accent-soft:rgba(71,85,105,.12); --grad:linear-gradient(135deg,#475569 0%,#64748B 100%); --grad-primary:linear-gradient(135deg,#475569 0%,#64748B 100%); --grad-app-accent:linear-gradient(135deg,#475569 0%,#64748B 100%); --grad-text:linear-gradient(120deg,#475569 0%,#64748B 60%,#64748B 100%); --shadow:0 14px 38px -22px rgba(15,30,60,.28),0 4px 12px -8px rgba(15,30,60,.10); --hl:none; } /* ╔══════════════════════════════════════════════════════════════════════╗ ║ HIGH CONTRAST (a11y) — §3.4: kill background tint, punch up text+lines ║ ║ Toggled via by theme.js. Works on top of any ║ ║ palette+mode. STATUS colors stay untouched. ║ ╚══════════════════════════════════════════════════════════════════════╝ */ [data-theme="dark"][data-a11y="on"], body.theme-dark[data-a11y="on"] { --fg-muted:#D6DEEC; --txt-muted:#D6DEEC; --text-secondary:#D6DEEC; --c-text-muted:#D6DEEC; --c-text-soft:#D6DEEC; --line:rgba(255,255,255,.18); --line-2:rgba(255,255,255,.30); --border-default:rgba(255,255,255,.18); --border:rgba(255,255,255,.18); --border-strong:rgba(255,255,255,.30); --c-line:rgba(255,255,255,.18); --c-line-strong:rgba(255,255,255,.30); --c-line-dark:rgba(255,255,255,.18); --c-line-dark-2:rgba(255,255,255,.30); } [data-theme="light"][data-a11y="on"], body.theme-light[data-a11y="on"] { --fg-muted:#27303F; --txt-muted:#27303F; --text-secondary:#27303F; --c-text-muted:#27303F; --c-text-soft:#27303F; --line:#B9C2D2; --line-2:#94A0B5; --border-default:#B9C2D2; --border:#B9C2D2; --border-strong:#94A0B5; --c-line:#B9C2D2; --c-line-strong:#94A0B5; --c-line-dark:#B9C2D2; --c-line-dark-2:#94A0B5; } /* ╔══════════════════════════════════════════════════════════════════════════╗ ║ WAJAH PASAR (risos.id) — aksen navy merek, satu keluarga dengan risos.ai ║ ╚══════════════════════════════════════════════════════════════════════════╝ KENAPA ADA risos.ai dan risos.id adalah dua wajah dari satu mesin. Kalau warnanya persis sama, pembeli tidak pernah tahu ia sudah berpindah dari "tempat memakai" ke "tempat membeli"; kalau warnanya lompat keluar keluarga, dua wajah itu tidak lagi terbaca sebagai perusahaan yang sama. Jadi yang digeser HANYA sumbu aksen, dan hanya di dalam biru: risos.ai memakai langit/sian samudra (#38BDF8 / #1D6FE0), risos.id memakai NAVY MEREK yang sudah lama tercatat di tokens.css — #60A5FA (--c-brand-soft) di gelap, #1D4ED8 (--c-app-accent) di terang. Bukan tema baru, bukan ungu: dua nada dari satu keluarga biru. KENAPA BUKAN "SEMUA PALET" Palet adalah pilihan pribadi pengguna (6 palet, themes.js). Menimpanya di risos.id berarti mencabut pilihan yang sengaja dibuat orang. Jadi lapisan ini HANYA berlaku pada palet bawaan/merek `samudra` — yaitu semua pengunjung anonim (mayoritas mutlak di pasar) dan siapa pun yang belum pernah menyentuh pemilih palet. Pengguna yang memilih hutan/senja/bara/mawar/grafit tetap mendapat paletnya utuh, dan aksen kustom (theme.js menulis INLINE di + ) tetap menang karena inline mengalahkan stylesheet. KENAPA DUA SELEKTOR PER MODE `data-palette` dipasang di baru saat theme.js jalan (bootstrap no-flash di base.html hanya menyentuh ). Tanpa cabang `:not([data-palette])`, cat pertama memakai aksen tokens.css lalu berkedip ke aksen pasar. Keduanya berspesifisitas (0,3,1) — LEBIH TINGGI dari blok palet `body.theme-*[data-palette="samudra"]` (0,2,1) — jadi kemenangannya tidak bergantung pada urutan baris, dan aman kalau ada yang menambah blok palet baru di bawah sini. PERMUKAAN, TEKS, GARIS, DAN STATUS TIDAK DISENTUH — sama seperti janji di kepala berkas ini. Yang berubah cuma aksen dan turunannya. KONTRAS (WCAG 2.1, dihitung, bukan dikira) gelap : #0A0E1A di atas #60A5FA = 7,57:1 · #60A5FA sbg teks di atas --bg #0A0E1A = 7,57:1 terang: #FFFFFF di atas #1D4ED8 = 6,70:1 · #1D4ED8 sbg teks di atas --bg #D6E6FB = 5,29:1 (di atas kartu #E8F1FD = 5,88:1) Semua >= 4,5:1 untuk teks kecil. JANGAN mengganti --accent di sini tanpa menghitung ulang --on-accent-nya. */ body.wajah-pasar.theme-dark[data-palette="samudra"], body.wajah-pasar.theme-dark:not([data-palette]) { --accent:#60A5FA; --on-accent:#0A0E1A; --accent-2:#38BDF8; --color-primary:#60A5FA; --primary:#60A5FA; --c-primary:#60A5FA; --c-app-accent:var(--accent); --c-accent:var(--accent-2); --accent-primary:var(--accent); --color-accent:var(--accent-2); --c-app-accent-hover:color-mix(in oklab, var(--accent) 82%, #000); --color-secondary:#38BDF8; --secondary:#38BDF8; --c-accent-bright:#38BDF8; --accent-soft:rgba(96,165,250,.12); --c-app-accent-soft:rgba(96,165,250,.20); --grad:linear-gradient(135deg,#60A5FA 0%,#38BDF8 100%); --grad-primary:linear-gradient(135deg,#60A5FA 0%,#38BDF8 100%); --grad-app-accent:linear-gradient(135deg,#60A5FA 0%,#38BDF8 100%); --grad-text:linear-gradient(120deg,#60A5FA 0%,#38BDF8 60%,#38BDF8 100%); } body.wajah-pasar.theme-light[data-palette="samudra"], body.wajah-pasar.theme-light:not([data-palette]) { --accent:#1D4ED8; --on-accent:#FFFFFF; --accent-2:#1D6FE0; --color-primary:#1D4ED8; --primary:#1D4ED8; --c-primary:#1D4ED8; --c-app-accent:var(--accent); --c-accent:var(--accent-2); --accent-primary:var(--accent); --color-accent:var(--accent-2); --c-app-accent-hover:color-mix(in oklab, var(--accent) 82%, #000); --color-secondary:#1D6FE0; --secondary:#1D6FE0; --c-accent-bright:#1D6FE0; --accent-soft:rgba(29,78,216,.08); --c-app-accent-soft:rgba(29,78,216,.12); --grad:linear-gradient(135deg,#1D4ED8 0%,#1D6FE0 100%); --grad-primary:linear-gradient(135deg,#1D4ED8 0%,#1D6FE0 100%); --grad-app-accent:linear-gradient(135deg,#1D4ED8 0%,#1D6FE0 100%); --grad-text:linear-gradient(120deg,#1D4ED8 0%,#1D6FE0 60%,#1D6FE0 100%); }