/* Module: core/variables.css — Design Tokens */ /* -------------------------------------------------------------------------- 1. CSS Custom Properties (Design Tokens) -------------------------------------------------------------------------- */ :root { /* Liquid Hub — light glass theme (selaras global.css) */ --and-bg-base: #dbeafe; --and-theme-color: #dbeafecc; --and-statusbar-tint: rgba(219, 234, 254, 0.8); --and-bg-surface: rgba(255, 255, 255, 0.65); --and-bg-card: rgba(255, 255, 255, 0.7); --and-bg-card-alt: rgba(255, 255, 255, 0.5); --and-bg-input: rgba(255, 255, 255, 0.4); --and-bg-overlay: rgba(219, 234, 254, 0.85); /* Colors — Borders */ --and-border: rgba(255, 255, 255, 0.45); --and-border-focus: rgba(255, 90, 0, 0.45); /* Colors — Text */ --and-text-primary: #0f172a; --and-text-secondary: #475569; --and-text-muted: #64748b; --and-text-inverse: #ffffff; /* Font Al-Qur'an (Arab) */ --and-font-quran: "Amiri Quran", "Scheherazade New", "Noto Naskh Arabic", "Traditional Arabic", "Times New Roman", serif; /* Colors — Brand / Accent (primary orange) */ --and-accent: #ff5a00; --and-accent-light: #ff5a00; --and-accent-dark: #e04e00; --and-accent-glow: rgba(255, 90, 0, 0.28); --and-accent-surface: rgba(255, 90, 0, 0.1); /* Colors — Semantic */ --and-success: #10b981; --and-warning: #f59e0b; --and-danger: #ef4444; --and-info: #2563eb; /* Colors — AI / Special */ --and-ai-start: #7c3aed; --and-ai-end: #ec4899; --and-mcp-start: #0891b2; --and-mcp-end: #6366f1; /* Status Badge Colors */ --and-status-dipinjam: rgba(37, 99, 235, 0.12); --and-status-dipinjam-text: #2563eb; --and-status-telat: rgba(239, 68, 68, 0.12); --and-status-telat-text: #dc2626; --and-status-kembali: rgba(16, 185, 129, 0.12); --and-status-kembali-text: #059669; --and-status-parsial: rgba(245, 158, 11, 0.12); --and-status-parsial-text: #d97706; /* Spacing */ --and-space-xs: 4px; --and-space-sm: 8px; --and-space-md: 16px; --and-space-lg: 24px; --and-space-xl: 32px; /* Lebar konten — selaras pengaturan-pwa (landscape tidak melar) */ --and-content-max: 640px; /* Border Radius */ --and-radius-sm: 8px; --and-radius-md: 12px; --and-radius-lg: 16px; --and-radius-xl: 24px; --and-radius-2xl: 44px; --and-radius-pill: 48px; --and-radius-full: 9999px; /* Shadows — soft elevation (border + surface first) */ --and-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --and-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.05); --and-shadow-lg: 0 10px 28px -12px rgba(15, 23, 42, 0.08); --and-shadow-glass: 0 8px 24px -12px rgba(15, 23, 42, 0.06); --and-shadow-nav: 0 -1px 0 rgba(15, 23, 42, 0.04), 0 -4px 16px -8px rgba(15, 23, 42, 0.06); --and-shadow-accent: 0 6px 16px -6px rgba(255, 90, 0, 0.18); --and-shadow-ai: 0 2px 12px rgba(124, 58, 237, 0.12); --and-elev-0: none; --and-elev-1: 0 1px 2px rgba(15, 23, 42, 0.04); --and-elev-2: 0 2px 8px rgba(15, 23, 42, 0.05); --and-elev-nav: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 10px 40px -8px rgba(255, 174, 110, 0.32), 0 4px 24px -6px rgba(42, 28, 20, 0.2); --and-elev-fab: 0 2px 8px rgba(255, 90, 0, 0.22), 0 0 0 2px rgba(61, 43, 34, 0.55); --and-nav-ease: 180ms cubic-bezier(0.25, 0.1, 0.25, 1); --and-nav-ease-out: 220ms cubic-bezier(0.22, 1, 0.36, 1); /* Transitions */ --and-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1); --and-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1); /* Bottom Nav — row ikon + FAB mengambang */ --and-nav-height: 36px; --and-nav-float-gap: 0px; --and-nav-row: 44px; --and-nav-shell-pt: 10px; --and-nav-shell-pb: 8px; --and-nav-fab-size: 48px; --and-nav-fab-rise: 18px; --and-nav-total: calc(var(--and-nav-shell-pt) + var(--and-nav-row) + var(--and-nav-shell-pb) + var(--and-nav-fab-rise) + var(--and-safe-bottom)); --and-top-nav-row: 40px; --and-top-nav-shell-pt: 4px; --and-top-nav-shell-pb: 6px; --and-top-nav-total: calc(var(--and-safe-top) + var(--and-top-nav-shell-pt) + var(--and-top-nav-row) + var(--and-top-nav-shell-pb)); --and-nav-shell-bg: rgba(255, 255, 255, 0.72); --and-nav-shell-blur: 16px; --and-nav-shell-saturate: 1.2; --and-nav-shell-border: rgba(15, 23, 42, 0.06); --and-nav-shell-fallback-bg: rgba(255, 255, 255, 0.94); --and-nav-chip-bg: rgba(255, 255, 255, 0.72); --and-nav-chip-blur: 10px; --and-nav-chip-border: rgba(194, 65, 12, 0.34); --and-nav-chip-active-bg: #fff7ed; --and-nav-chip-active-border: rgba(194, 65, 12, 0.46); --and-nav-icon: #c2410c; --and-nav-icon-active: #9a3412; --and-top-nav-icon: var(--and-nav-icon); --and-top-nav-chip-bg: var(--and-nav-chip-bg); --and-top-nav-chip-border: var(--and-nav-chip-border); --and-page-inset-top: var(--and-safe-top); --and-buku-nav-row: 52px; --and-buku-nav-total: calc(8px + var(--and-buku-nav-row) + 8px + var(--and-safe-bottom)); /* Nav chrome — warm brown, soft surface (sidebar + bottom bar) */ --and-nav-brown-0: #8f6b52; --and-nav-brown-1: #7d5c45; --and-nav-brown-2: #6b4e3b; --and-nav-brown-glow: rgba(255, 174, 110, 0.12); --and-nav-brown-glow-soft: rgba(255, 196, 140, 0.08); --and-nav-brown-border: rgba(255, 236, 210, 0.16); --and-nav-brown-text: rgba(255, 251, 245, 0.96); --and-nav-brown-text-muted: rgba(254, 228, 196, 0.72); --and-nav-brown-icon: rgba(254, 228, 196, 0.78); --and-nav-brown-surface: rgba(255, 255, 255, 0.08); --and-nav-brown-gradient: linear-gradient(180deg, #8f6b52 0%, #7d5c45 48%, #6b4e3b 100%); --and-bottom-nav-shell-bg: var(--and-nav-shell-bg); --and-bottom-nav-shell-blur: var(--and-nav-shell-blur); --and-bottom-nav-shell-saturate: var(--and-nav-shell-saturate); --and-bottom-nav-shell-border: var(--and-nav-shell-border); --and-bottom-nav-shell-shadow: var(--and-elev-1); --and-bottom-nav-shell-fallback-bg: var(--and-nav-shell-fallback-bg); --and-bottom-nav-chip-bg: var(--and-nav-chip-bg); --and-bottom-nav-chip-blur: var(--and-nav-chip-blur); --and-bottom-nav-chip-border: var(--and-nav-chip-border); --and-bottom-nav-chip-active-bg: var(--and-nav-chip-active-bg); --and-bottom-nav-chip-active-border: var(--and-nav-chip-active-border); --and-bottom-nav-icon: var(--and-nav-icon); --and-bottom-nav-icon-active: var(--and-nav-icon-active); /* Al-Qur'an reading nav — transparan 30% */ --and-qrn-reading-nav-shell-bg: rgba(255, 255, 255, 0.3); --and-qrn-reading-nav-shell-border: rgba(255, 255, 255, 0.22); --and-qrn-reading-nav-shell-tint-top: rgba(255, 255, 255, 0.34); --and-qrn-reading-nav-shell-tint-bottom: rgba(255, 255, 255, 0.22); --and-qrn-reading-nav-shell-fallback-bg: rgba(255, 255, 255, 0.92); --and-qrn-reading-nav-chip-bg: rgba(255, 255, 255, 0.26); --and-qrn-reading-nav-chip-border: rgba(255, 255, 255, 0.2); --and-qrn-reading-nav-chip-active-bg: rgba(255, 247, 237, 0.42); --and-qrn-reading-nav-chip-active-border: rgba(194, 65, 12, 0.28); /* Al-Qur'an drawer menu — solid agar stabil di mobile (hindari blur bertumpuk) */ --and-qrn-drawer-panel-bg: rgba(255, 252, 245, 0.97); --and-qrn-drawer-panel-blur: 0px; --and-qrn-drawer-panel-border: rgba(93, 78, 58, 0.12); --and-qrn-drawer-head-bg: rgba(255, 252, 245, 0.98); --and-qrn-drawer-item-bg: #FFFFFF; --and-qrn-drawer-item-border: rgba(93, 78, 58, 0.1); --and-qrn-reading-nav-icon: #c2410c; --and-qrn-reading-nav-icon-active: #9a3412; --and-qrn-reading-nav-label: rgba(71, 85, 105, 0.28); --and-qrn-reading-nav-label-active: rgba(154, 52, 18, 0.58); --and-nav-brown-glow-radial: radial-gradient(circle at 50% 0%, rgba(255, 196, 140, 0.1) 0%, transparent 55%); --and-nav-brown-mesh: none; --and-nav-brown-mesh-drawer: none; --and-nav-active: #ff8a1a; --and-nav-sidebar-bg: #35261f; --and-nav-sidebar-border: #2a1f19; --and-nav-text: #f7efe6; --and-nav-text-muted: #b59a82; --and-nav-icon-bg: #4a382e; --and-nav-icon-fg: #f0dfc8; --and-nav-group-bg: #2f221c; --and-nav-group-open-bg: #241912; --and-nav-sub-text: #dcc9ba; --and-nav-sub-icon: #cdb5a4; --and-nav-nested-text: #c4b0a0; --and-nav-parent-bg: #4a3428; --and-nav-nested-bg: var(--and-nav-parent-bg); --and-nav-nested-panel-bg: var(--and-nav-parent-bg); --and-nav-parent-fg: #ffb347; --and-nav-active-bg: #ff8a1a; --and-nav-active-fg: #ffffff; --and-nav-active-icon-bg: #ffffff; --and-nav-active-icon-fg: #c2410c; /* Safe area (notch) */ --and-safe-top: env(safe-area-inset-top, 0px); --and-safe-bottom: env(safe-area-inset-bottom, 0px); }