:root { /* ==================================================== NEUMORPHISM (SOFT UI) DESIGN SYSTEM Exact vector aesthetic matching reference: - Continuous sculpted canvas: #EBECF0 - Top-left specular highlight: #FFFFFF - Bottom-right ambient shadow: #C5CAD6 / #B8BFCC - Vibrant gradient accents: Coral-Red & Emerald ==================================================== */ /* Base Canvas & Sculpted Surface */ --bg-dark: #EBECF0; /* Neumorphic Canvas */ --bg-darker: #DFE2E8; /* Deeper debossed base */ --bg-surface: #EBECF0; /* Continuous surface */ --bg-surface-elevated: #EBECF0; /* Elevated surface */ --bg-card: #EBECF0; /* Neumorphic card matches canvas */ --bg-card-hover: #EBECF0; --bg-container-low: #E2E5EB; --bg-container-high: #F4F6F9; /* Neumorphic Dual Shadows (Light Source: Top-Left at 135deg) */ --shadow-light: #FFFFFF; /* Top-left specular highlight */ --shadow-dark: #C5CAD6; /* Bottom-right ambient shadow */ --shadow-dark-deep: #B8BFCC; /* Deeper shadow for higher elevation */ /* Extruded (Raised / Embossed) Surfaces */ --neu-flat: 6px 6px 14px var(--shadow-dark), -6px -6px 14px var(--shadow-light); --neu-flat-sm: 3px 3px 8px var(--shadow-dark), -3px -3px 8px var(--shadow-light); --neu-flat-hover: 8px 8px 18px var(--shadow-dark-deep), -8px -8px 18px var(--shadow-light); --neu-flat-lg: 12px 12px 24px var(--shadow-dark-deep), -12px -12px 24px var(--shadow-light); --neu-dialog: 16px 16px 36px var(--shadow-dark-deep), -16px -16px 36px var(--shadow-light); /* Sunken (Debossed / Inset / Pressed) Surfaces */ --neu-pressed: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light); --neu-inset: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light); --neu-inset-deep: inset 4px 4px 8px var(--shadow-dark-deep), inset -4px -4px 8px var(--shadow-light); /* Vietcap Brand & Primary Tokens (From Brand Guidelines) */ --brand: #00FF0D; /* Vietcap Brand Neon Highlight */ --primary-100: #D7F5DC; --primary-200: #97E5A5; --primary-300: #5ED673; --primary-400: #2CC746; --primary-500: #00B71F; /* Primary Main (Actions, buttons, links) */ --primary-600: #0A9422; --primary-700: #107020; --primary-800: #104D1A; --primary-900: #113D19; /* Primary Accent Aliases */ --primary: #00B71F; /* Vietcap Primary 500 Main */ --brand-primary: #00B71F; --brand-hover: #0A9422; --primary-light: #2CC746; /* Primary 400 */ --primary-lighter: #5ED673; /* Primary 300 */ --primary-dark: #0A9422; /* Primary 600 */ --primary-darker: #107020; /* Primary 700 */ --primary-gradient: linear-gradient(135deg, #12C736 0%, #009E1B 100%); --primary-gradient-hover: linear-gradient(135deg, #24D94B 0%, #00B71F 100%); --primary-gradient-active: linear-gradient(135deg, #0A9422 0%, #107020 100%); --on-primary: #FFFFFF; --primary-glow: rgba(0, 183, 31, 0.35); --neu-primary-fab: 6px 6px 16px var(--shadow-dark-deep), -6px -6px 16px var(--shadow-light), 0 4px 14px var(--primary-glow); --neu-primary-fab-hover: 9px 9px 22px var(--shadow-dark-deep), -9px -9px 22px var(--shadow-light), 0 6px 20px rgba(0, 183, 31, 0.45); /* Secondary Accent (Emerald Jade) */ --secondary: #059669; --secondary-gradient: linear-gradient(135deg, #10B981 0%, #059669 100%); /* Status Colors */ --status-available: #059669; --status-available-bg: #D1FAE5; --status-available-glow: rgba(16, 185, 129, 0.6); --status-borrowed: #D97706; --status-borrowed-bg: #FEF3C7; --status-borrowed-glow: rgba(245, 158, 11, 0.6); --status-overdue: #DC2626; --status-overdue-bg: #FEE2E2; --status-overdue-glow: rgba(239, 68, 68, 0.6); /* Platform Badges */ --ios-color: #BE123C; --ios-bg: #FFE4E6; --android-color: #047857; --android-bg: #D1FAE5; /* Typography (High Contrast Charcoal & Slate on #EBECF0) */ --font-base: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'SF Pro', 'San Francisco', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-rubik: 'Rubik', -apple-system, BlinkMacSystemFont, sans-serif; --text-main: #3D4856; /* Refined Slate */ --text-heading: #1A202C; /* Charcoal Slate 900 */ --text-brand: #314653; /* Vietcap Device Hub Heading Color */ --text-muted: #6B7B8E; /* Slate 500 */ --text-dim: #9AA7B6; /* Slate 400 */ /* Subtle Borders (Translucent specular highlights for tactile definition) */ --border-subtle: rgba(255, 255, 255, 0.85); --border-card: rgba(255, 255, 255, 0.75); --border-focus: #00B71F; /* Shadows aliases */ --shadow-sm: var(--neu-flat-sm); --shadow-md: var(--neu-flat); --shadow-lg: var(--neu-flat-lg); --shadow-glow: 0 0 16px var(--primary-glow); --glass-blur: blur(14px); /* Layout Radii & Smooth Shapes */ --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 9999px; --transition-fast: 0.15s ease; --transition-normal: 0.22s cubic-bezier(0.2, 0, 0, 1); --transition-smooth: 0.3s cubic-bezier(0.2, 0, 0, 1); } /* ==================================================== DARK MODE NEUMORPHISM (OBSIDIAN & CHARCOAL SLATE) ==================================================== */ [data-theme="dark"] { /* Base Canvas & Sculpted Surface */ --bg-dark: #181A1F; /* Obsidian Neumorphic Canvas */ --bg-darker: #111316; /* Deeper debossed base */ --bg-surface: #181A1F; /* Continuous dark surface */ --bg-surface-elevated: #20232A; /* Elevated surface */ --bg-card: #181A1F; /* Neumorphic card matches dark canvas */ --bg-card-hover: #1D2026; --bg-container-low: #131518; --bg-container-high: #242831; /* Neumorphic Dual Shadows in Dark Mode */ --shadow-light: rgba(255, 255, 255, 0.055); /* Subtle top-left specular highlight */ --shadow-dark: #0B0C0E; /* Deep bottom-right ambient shadow */ --shadow-dark-deep: #060709; /* Deeper shadow for higher elevation */ /* Extruded (Raised / Embossed) Surfaces */ --neu-flat: 6px 6px 14px var(--shadow-dark), -4px -4px 12px var(--shadow-light); --neu-flat-sm: 3px 3px 8px var(--shadow-dark), -2px -2px 6px var(--shadow-light); --neu-flat-hover: 8px 8px 18px var(--shadow-dark-deep), -5px -5px 14px var(--shadow-light); --neu-flat-lg: 12px 12px 26px var(--shadow-dark-deep), -6px -6px 18px var(--shadow-light); --neu-dialog: 16px 16px 36px var(--shadow-dark-deep), -8px -8px 24px var(--shadow-light); /* Sunken (Debossed / Inset / Pressed) Surfaces */ --neu-pressed: inset 3px 3px 6px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light); --neu-inset: inset 3px 3px 6px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light); --neu-inset-deep: inset 4px 4px 8px var(--shadow-dark-deep), inset -3px -3px 6px var(--shadow-light); /* Primary Accent & Glow (Vietcap Emerald Pop) */ --brand: #00FF0D; --primary: #00E626; --brand-primary: #00E626; --brand-hover: #00FF33; --primary-gradient: linear-gradient(135deg, #00FF33 0%, #00B71F 100%); --primary-gradient-hover: linear-gradient(135deg, #33FF5C 0%, #00D624 100%); --primary-gradient-active: linear-gradient(135deg, #00B71F 0%, #0A9422 100%); --on-primary: #0D1117; --primary-glow: rgba(0, 230, 38, 0.45); --neu-primary-fab: 6px 6px 16px var(--shadow-dark-deep), -4px -4px 14px var(--shadow-light), 0 4px 16px var(--primary-glow); --neu-primary-fab-hover: 9px 9px 22px var(--shadow-dark-deep), -5px -5px 18px var(--shadow-light), 0 6px 22px rgba(0, 230, 38, 0.6); /* Status Colors in Dark Mode */ --status-available: #10B981; --status-available-bg: rgba(16, 185, 129, 0.16); --status-available-glow: rgba(16, 185, 129, 0.6); --status-borrowed: #F59E0B; --status-borrowed-bg: rgba(245, 158, 11, 0.16); --status-borrowed-glow: rgba(245, 158, 11, 0.6); --status-overdue: #EF4444; --status-overdue-bg: rgba(239, 68, 68, 0.2); --status-overdue-glow: rgba(239, 68, 68, 0.6); /* Platform Badges */ --ios-color: #FB7185; --ios-bg: rgba(251, 113, 133, 0.16); --android-color: #34D399; --android-bg: rgba(52, 211, 153, 0.16); /* Typography in Dark Mode (High Readability) */ --text-main: #CBD5E1; /* Slate 300 */ --text-heading: #F8FAFC; /* Pure White Crisp Heading */ --text-brand: #F1F5F9; /* Vietcap Device Hub Brand Heading in Dark */ --text-muted: #94A3B8; /* Slate 400 */ --text-dim: #64748B; /* Slate 500 */ /* Subtle Borders in Dark Mode */ --border-subtle: rgba(255, 255, 255, 0.08); --border-card: rgba(255, 255, 255, 0.06); --border-focus: #00E626; }