/* ============================================================ Warung 4 Putra — Theme System (canonical, reusable) Light + Dark via CSS variables. Drop-in: Toggle: add/remove class "dark" on . For NEW pages use the .hc-* utility classes. ============================================================ */ /* ---------- LIGHT tokens (default) ---------- */ :root { --hc-canvas: #f8fafc; --hc-surface: #ffffff; --hc-surface-raised: #f1f5f9; --hc-primary: #0f172a; --hc-secondary: #475569; --hc-tertiary: #16a34a; --hc-tertiary-muted: #22c55e; --hc-on-tertiary: #ffffff; --hc-danger: #dc2626; --hc-border: #e2e8f0; --hc-border-subtle: #cbd5e1; --hc-warning: #b45309; --hc-info: #0284c7; --hc-shadow: 0 1px 2px rgba(15,23,42,.08), 0 4px 12px -4px rgba(15,23,42,.12); --hc-radius-xl: 24px; --hc-radius-lg: 16px; --hc-radius-md: 12px; --hc-radius-sm: 8px; --hc-overlay: rgba(15,23,42,.45); --hc-overlay-strong: rgba(15,23,42,.65); } /* ---------- DARK tokens (DESIGN.md Hermes Console) ---------- */ html.dark { --hc-canvas: #020617; --hc-surface: #0f172a; --hc-surface-raised: #1e293b; --hc-primary: #e2e8f0; --hc-secondary: #64748b; --hc-tertiary: #22c55e; --hc-tertiary-muted: #10b981; --hc-on-tertiary: #020617; --hc-danger: #f87171; --hc-border: #334155; --hc-border-subtle: #1e293b; --hc-warning: #fbbf24; --hc-info: #38bdf8; --hc-shadow: 0 1px 2px rgba(0,0,0,.45), 0 10px 30px -12px rgba(0,0,0,.65); --hc-overlay: rgba(0,0,0,.6); --hc-overlay-strong: rgba(0,0,0,.8); } /* ============================================================ Bridge for EXISTING Tailwind-custom-class pages (admin.html) so they get light mode without a refactor. ============================================================ */ html:not(.dark) body { background: var(--hc-canvas) !important; color: var(--hc-primary) !important; } html:not(.dark) .bg-dark-bg { background-color: var(--hc-canvas) !important; } html:not(.dark) .bg-dark-surface { background-color: var(--hc-surface-raised) !important; } html:not(.dark) .bg-dark-card, html:not(.dark) .card { background-color: var(--hc-surface) !important; } html:not(.dark) .text-white { color: var(--hc-primary) !important; } html:not(.dark) .text-slate-400 { color: var(--hc-secondary) !important; } html:not(.dark) .text-slate-300 { color: #334155 !important; } html:not(.dark) .text-slate-500 { color: var(--hc-secondary) !important; } html:not(.dark) .border-slate-700 { border-color: var(--hc-border) !important; } html:not(.dark) .border-slate-800 { border-color: var(--hc-border-subtle) !important; } html:not(.dark) .bg-black\/60 { background-color: var(--hc-overlay) !important; } html:not(.dark) .bg-black\/80 { background-color: var(--hc-overlay-strong) !important; } /* ============================================================ Canonical utility classes for NEW pages (tinggal pakai) ============================================================ */ .hc-body { background: var(--hc-canvas); color: var(--hc-primary); font-family: Inter, system-ui, -apple-system, sans-serif; min-height: 100vh; } .hc-card { background: var(--hc-surface); border: 1px solid var(--hc-border-subtle); border-radius: var(--hc-radius-xl); padding: 24px; } .hc-surface { background: var(--hc-surface-raised); } .hc-text-secondary { color: var(--hc-secondary); } .hc-danger { color: var(--hc-danger); } .hc-tertiary { color: var(--hc-tertiary); } .hc-btn { background: var(--hc-tertiary); color: var(--hc-on-tertiary); border: none; border-radius: var(--hc-radius-md); padding: 12px 16px; font-weight: 600; cursor: pointer; transition: background .15s ease; } .hc-btn:hover { background: var(--hc-tertiary-muted); } .hc-btn-ghost { background: transparent; color: var(--hc-primary); border: 1px solid var(--hc-border); border-radius: var(--hc-radius-sm); padding: 10px; cursor: pointer; } .hc-btn-ghost:hover { border-color: var(--hc-tertiary); } .hc-input { background: var(--hc-surface-raised); border: 1px solid var(--hc-border); color: var(--hc-primary); border-radius: var(--hc-radius-md); padding: 10px 14px; width: 100%; font-family: inherit; } .hc-input::placeholder { color: var(--hc-secondary); } .hc-input:focus { outline: none; border-color: var(--hc-tertiary); } /* Theme toggle button (fixed top-right) */ .theme-toggle { position: fixed; top: 12px; right: 12px; z-index: 90; width: 40px; height: 40px; border-radius: 9999px; background: var(--hc-surface-raised); color: var(--hc-primary); border: 1px solid var(--hc-border); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem; box-shadow: var(--hc-shadow); transition: transform .1s ease, background .15s ease; } .theme-toggle:active { transform: scale(.95); } /* ============================================================ Mobile PoS readability — large fonts + big touch targets Applied on phone/tablet viewports (the PoS is HP-first). ============================================================ */ @media (max-width: 820px) { html { font-size: 19px; } body { line-height: 1.55; } /* Bigger Tailwind text helpers so PoS copy is easy to read */ .text-xs { font-size: 0.9rem !important; } .text-sm { font-size: 1rem !important; } .text-base{ font-size: 1.05rem!important; } .text-lg { font-size: 1.25rem!important; } .text-xl { font-size: 1.5rem !important; } .text-2xl { font-size: 1.75rem!important; } /* Minimum 48px touch targets on inputs & buttons */ input, select, textarea, button, .hc-btn, .hc-input, .hc-btn-ghost { font-size: 1rem !important; min-height: 48px; } input[type="text"], input[type="password"], input[type="number"] { padding: 12px 16px; } /* Admin: bottom nav becomes fixed bar on mobile */ body { padding-bottom: 76px; } .admin-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; margin: 0; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: var(--hc-surface, #0f172a); border-top: 1px solid var(--hc-border-subtle, #1e293b); box-shadow: 0 -4px 16px rgba(0,0,0,.35); justify-content: space-around; } .admin-nav .tab-btn { flex: 1; border-radius: 14px; background: transparent; border-color: transparent; padding: 6px 4px; } /* Buyer: summary becomes sticky bottom bar on mobile */ #summary-section { position: fixed; left: 0; right: 0; bottom: 0; z-index: 75; margin: 0; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px rgba(0,0,0,.4); max-width: 100%; } #summary-section .space-y-2 { gap: 8px; } #summary-section .space-y-2 > button { padding: 12px 8px; font-size: 0.95rem; } } /* Empty-state helper (used across admin/buyer/scanner) */ .hc-empty { text-align: center; padding: 32px 16px; color: var(--hc-secondary); } .hc-empty .hc-empty-icon { font-size: 2.5rem; line-height: 1; margin-bottom: 8px; } .hc-empty .hc-empty-title { font-weight: 600; color: var(--hc-primary); font-size: 1.05rem; } .hc-empty .hc-empty-sub { font-size: 0.9rem; margin-top: 4px; }