/* ========================================================================== bSmart - Theme Configuration Dark, sophisticated theme inspired by modern minimalist design. Clean blacks, whites, and subtle warm accents. ========================================================================== */ :root { /* ====================================================================== Primary Brand Colors ====================================================================== */ --color-primary: #ffffff; --color-primary-rgb: 255, 255, 255; --color-primary-dark: #e5e5e5; --color-primary-light: #ffffff; /* Secondary / Warm Gray */ --color-secondary: #a3a3a3; --color-secondary-rgb: 163, 163, 163; --color-secondary-dark: #737373; --color-secondary-light: #d4d4d4; /* Accent / Warm Cream */ --color-accent: #ffffff; --color-accent-rgb: 255, 255, 255; --color-accent-hover: #f5f5f5; --color-accent-light: #ffffff; /* Dark Colors */ --color-dark: #111111; --color-dark-rgb: 17, 17, 17; --color-darker: #0a0a0a; --color-dark-elevated: #1a1a1a; /* ====================================================================== Background Colors ====================================================================== */ --bg-body: #111111; --bg-card: #1a1a1a; --bg-muted: #262626; --bg-elevated: #2a2a2a; /* ====================================================================== Text Colors ====================================================================== */ --text-primary: #ffffff; --text-secondary: #a3a3a3; --text-muted: #737373; --text-light: #ffffff; --text-on-accent: #111111; /* ====================================================================== Navbar ====================================================================== */ --navbar-bg: #111111; --navbar-shadow: none; --navbar-link-hover-bg: rgba(255, 255, 255, 0.08); --navbar-link-active-bg: rgba(255, 255, 255, 0.12); /* ====================================================================== Hero Banner ====================================================================== */ --hero-bg: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #111111 100%); --hero-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); --hero-text: #ffffff; --hero-highlight: #ffffff; --hero-orb-accent: rgba(255, 255, 255, 0.03); --hero-orb-secondary: rgba(255, 255, 255, 0.02); /* ====================================================================== Buttons ====================================================================== */ --btn-primary-bg: #ffffff; --btn-primary-text: #111111; --btn-primary-hover-bg: #e5e5e5; /* ====================================================================== Badges ====================================================================== */ --badge-bg: rgba(255, 255, 255, 0.1); --badge-text: #ffffff; --badge-border: rgba(255, 255, 255, 0.2); /* ====================================================================== Borders & Shadows ====================================================================== */ --border-color: #2a2a2a; --border-radius-sm: 0; --border-radius-md: 0; --border-radius-lg: 0; --shadow-sm: none; --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.4); /* ====================================================================== Transitions ====================================================================== */ --transition-fast: 0.15s ease; --transition-normal: 0.25s ease; --transition-slow: 0.4s ease; } /* ========================================================================== Light Theme (optional - activate by adding class="light-theme" to ) ========================================================================== */ .light-theme { --color-dark: #ffffff; --color-dark-rgb: 255, 255, 255; --bg-body: #ffffff; --bg-card: #fafafa; --bg-muted: #f5f5f5; --text-primary: #111111; --text-secondary: #525252; --text-muted: #737373; --text-on-accent: #ffffff; --color-accent: #111111; --btn-primary-bg: #111111; --btn-primary-text: #ffffff; --btn-primary-hover-bg: #262626; --navbar-bg: #ffffff; --navbar-link-hover-bg: rgba(0, 0, 0, 0.05); --navbar-link-active-bg: rgba(0, 0, 0, 0.08); --border-color: #e5e5e5; --badge-bg: rgba(0, 0, 0, 0.05); --badge-text: #111111; --badge-border: rgba(0, 0, 0, 0.1); --hero-bg: linear-gradient(135deg, #f5f5f5 0%, #fafafa 50%, #ffffff 100%); --hero-text: #111111; --hero-highlight: #111111; --hero-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); }