/* ========================================= VARIABLES — Color & Font Tokens Sorol Kothok Personal Brand Website ========================================= */ :root { /* === Color Palette (Dark — default) === */ --color-bg-primary: #0B0B0D; --color-bg-secondary: #161012; --color-bg-card: #110D0F; --color-accent: #8B1E2D; --color-accent-hover: #B3263B; --color-accent-soft: #C25B68; --color-on-accent: #FFFFFF; /* text/icons placed ON the crimson background — always white */ --color-border: #2A1A1D; --color-border-light: #3a2226; --color-text-primary: #F5F5F5; --color-text-secondary: #A8A8A8; --color-text-muted: #6B6B6B; /* === Glow Effects === */ --glow-red: rgba(139, 30, 45, 0.4); --glow-red-strong: rgba(179, 38, 59, 0.6); --glow-red-subtle: rgba(139, 30, 45, 0.15); /* === Navbar Backgrounds (CSS vars — rgba can't reference other CSS vars) === */ --navbar-bg: rgba(11, 11, 13, 0.55); --navbar-bg-scrolled: rgba(11, 11, 13, 0.75); --navbar-mobile-bg: rgba(11, 11, 13, 0.96); /* === Glassmorphism Surfaces === */ --hero-stats-bg: rgba(22, 16, 18, 0.7); --hero-trust-bg: rgba(22, 16, 18, 0.5); /* === Glass Cards === */ --card-bg: linear-gradient(145deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%); --card-border: rgba(255, 255, 255, 0.13); --card-shadow: 0 4px 32px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.2); --card-shadow-hover: 0 12px 48px rgba(0,0,0,0.55), 0 0 32px rgba(139,30,45,0.22), inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.2); /* === Typography === */ --font-heading-en: 'Bebas Neue', sans-serif; --font-body-en: 'DM Sans', sans-serif; --font-bengali: 'Hind Siliguri', sans-serif; /* === Spacing Scale === */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 8rem; /* === Section Padding === */ --section-padding: 6rem 0; /* === Border Radius === */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; /* === Gradient Text === */ --gradient-text: linear-gradient(135deg, #E07A87 0%, #C25B68 45%, #9B2335 100%); /* === Section Dot Grid === */ --dot-color: rgba(139, 30, 45, 0.10); /* === Transitions === */ --transition-fast: 0.2s ease; --transition-base: 0.35s ease; --transition-slow: 0.6s ease; /* === Container === */ --container-max: 1200px; --container-wide: 1400px; --container-pad: clamp(1rem, 5vw, 2.5rem); /* === Navbar === */ --navbar-height: 72px; } /* ========================================= LIGHT THEME OVERRIDES Applied when ========================================= */ [data-theme="light"] { --color-bg-primary: #FBF8F6; --color-bg-secondary: #F0EBEA; --color-bg-card: #FFFFFF; --color-border: #E2D5D7; --color-border-light: #CBBBBD; --color-text-primary: #1A0D10; --color-text-secondary: #5A3D46; --color-text-muted: #9A7E86; --glow-red: rgba(139, 30, 45, 0.18); --glow-red-strong: rgba(179, 38, 59, 0.3); --glow-red-subtle: rgba(139, 30, 45, 0.07); --dot-color: rgba(139, 30, 45, 0.06); --navbar-bg: rgba(251, 248, 246, 0.60); --navbar-bg-scrolled: rgba(251, 248, 246, 0.80); --navbar-mobile-bg: rgba(251, 248, 246, 0.97); --hero-stats-bg: rgba(240, 235, 234, 0.85); --hero-trust-bg: rgba(240, 235, 234, 0.7); /* === Glass Cards (light) === */ --card-bg: rgba(255, 255, 255, 0.68); --card-border: rgba(209, 190, 193, 0.65); --card-shadow: 0 4px 24px rgba(139,30,45,0.07), 0 1px 4px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(139,30,45,0.04); --card-shadow-hover: 0 10px 48px rgba(139,30,45,0.12), 0 4px 12px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(139,30,45,0.06); }