/* ═══════════════════════════════════════════════════════════════ Hirono Bamhaus — Design Tokens Tất cả màu/spacing/font = CSS custom properties. KHÔNG hardcode màu trong code khác — luôn dùng var(). Theme switch (GĐ3) chỉ cần đổi data-theme attribute trên . ═══════════════════════════════════════════════════════════════ */ :root { /* ─── Background gradient ─── */ --bg-start: #0a0a0f; --bg-end: #1a1a2e; /* ─── Glass surfaces ─── */ --surface-glass: rgba(255, 255, 255, 0.04); --surface-glass-strong: rgba(255, 255, 255, 0.08); --border-glass: rgba(255, 255, 255, 0.12); /* ─── Glassmorphism (Aurora upgrade) ─── */ --glass-blur: 16px; --glass-border: rgba(255, 255, 255, 0.08); --glass-highlight: rgba(255, 255, 255, 0.04); /* ─── Aurora colors ─── */ --aurora-purple: rgba(140, 60, 220, 0.25); --aurora-blue: rgba(50, 120, 240, 0.20); --aurora-cyan: rgba(40, 200, 200, 0.15); /* ─── Accents ─── Default theme "Midnight Gallery (Ivory)" = dark + white/ivory. Gold + silver được giữ làm alternative themes cho Phase 3B. */ --accent-primary: #f5f5f5; --accent-primary-hover: #ffffff; --accent-primary-glow: rgba(255, 255, 255, 0.28); --accent-primary-soft: rgba(245, 245, 245, 0.08); /* ─── Theme-aware gradients ─── */ --gradient-title: linear-gradient(135deg, #ffffff 0%, #c0c0c0 100%); --gradient-message-user: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 236, 228, 0.95)); --color-message-user-text: #0a0a0f; --dot-grid-color: rgba(255, 255, 255, 0.08); /* Reserved alternative accents (Phase 3B theme switching) */ --accent-gold: #d4af37; --accent-gold-hover: #e8c253; --accent-gold-glow: rgba(212, 175, 55, 0.3); --accent-silver: #c0c0c0; /* ─── Text ─── */ --text-primary: #f5f5f5; --text-secondary: #a0a0a0; --text-muted: #707070; /* ─── Status ─── */ --status-new: #4ade80; --status-used: #fbbf24; --status-instock: #4ade80; --status-reserved: #60a5fa; --status-sold: #ef4444; /* ─── Typography ─── */ --font-display: 'Fraunces', 'Cormorant Garamond', 'Times New Roman', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; /* ─── Spacing (4px base) ─── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ─── Radius ─── */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 9999px; /* ─── Shadows ─── */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.4); --shadow-glow: 0 0 40px var(--accent-gold-glow); /* ─── Motion ─── */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --transition-fast: 0.15s var(--ease); --transition: 0.3s var(--ease); --transition-slow: 0.5s var(--ease); /* ─── Layout ─── */ --container-max: 1400px; --safe-top: env(safe-area-inset-top, 0); --safe-bottom: env(safe-area-inset-bottom, 0); --safe-left: env(safe-area-inset-left, 0); --safe-right: env(safe-area-inset-right, 0); } /* ═══════════════════════════════════════════════════════════════ THEME: Soft Collector — warm beige luxury boutique ═══════════════════════════════════════════════════════════════ */ :root[data-theme="soft"] { --bg-start: #f5f0e8; --bg-end: #ebe4d6; --surface-glass: rgba(0, 0, 0, 0.03); --surface-glass-strong: rgba(0, 0, 0, 0.05); --border-glass: rgba(0, 0, 0, 0.08); --glass-border: rgba(0, 0, 0, 0.06); --glass-highlight: rgba(0, 0, 0, 0.02); --aurora-purple: rgba(180, 140, 60, 0.10); --aurora-blue: rgba(160, 120, 40, 0.07); --aurora-cyan: rgba(200, 170, 80, 0.05); --accent-primary: #6b4c1e; --accent-primary-hover: #4a3210; --accent-primary-glow: rgba(107, 76, 30, 0.2); --accent-primary-soft: rgba(107, 76, 30, 0.06); --text-primary: #2c1810; --text-secondary: #6b5744; --text-muted: #a09080; --gradient-title: linear-gradient(135deg, #4a3210 0%, #8b6914 100%); --gradient-message-user: linear-gradient(135deg, rgba(107, 76, 30, 0.12), rgba(139, 105, 20, 0.08)); --color-message-user-text: #2c1810; --dot-grid-color: rgba(0, 0, 0, 0.04); } /* ═══════════════════════════════════════════════════════════════ THEME: Bamhaus Sketch — manga/comic black white red ═══════════════════════════════════════════════════════════════ */ :root[data-theme="sketch"] { --bg-start: #0a0a0a; --bg-end: #0f0f0f; --surface-glass: rgba(255, 255, 255, 0.03); --surface-glass-strong: rgba(255, 255, 255, 0.06); --border-glass: rgba(255, 255, 255, 0.15); --glass-border: rgba(255, 255, 255, 0.12); --glass-highlight: rgba(255, 255, 255, 0.04); --aurora-purple: rgba(230, 57, 70, 0.12); --aurora-blue: rgba(255, 255, 255, 0.04); --aurora-cyan: rgba(230, 57, 70, 0.06); --accent-primary: #e63946; --accent-primary-hover: #ff4d5a; --accent-primary-glow: rgba(230, 57, 70, 0.3); --accent-primary-soft: rgba(230, 57, 70, 0.08); --text-primary: #ffffff; --text-secondary: #b0b0b0; --text-muted: #666666; --gradient-title: linear-gradient(135deg, #ffffff 0%, #e63946 100%); --gradient-message-user: linear-gradient(135deg, rgba(230, 57, 70, 0.15), rgba(230, 57, 70, 0.08)); --color-message-user-text: #ffffff; --dot-grid-color: rgba(255, 255, 255, 0.06); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }