/* ============================================================ RENTIT THEME MODULE Global CSS Variables & Dark/Light Theme System Master Palette (5-Color Foundation): - #000000 Black — Deep backgrounds, footer, hero - #14213D Prussian Blue — Brand, nav, panels, headings, text - #FCA311 Orange — Accent, CTAs, highlights - #E5E5E5 Alabaster Grey — Section backgrounds, borders - #FFFFFF White — Cards, primary background Powered by Innovator Crews ============================================================ */ /* ============================ LIGHT THEME (Default) ============================ */ :root { /* === BRAND COLORS (Master Palette) === */ --brand-primary: #14213D; /* Prussian Blue - Foundation */ --brand-primary-rgb: 20, 33, 61; --brand-primary-light: #1B2A4A; /* Lighter Prussian for gradients */ --brand-primary-dark: #0D1729; /* Darker Prussian for depth */ /* === ACCENT COLORS (Orange) === */ --accent: #FCA311; /* Master Orange */ --accent-rgb: 252, 163, 17; --accent-hover: #E8950F; /* Deeper orange on hover */ --accent-light: #FEE4A8; /* Light orange for backgrounds */ --accent-soft: #FFF3D6; /* Soft orange wash */ --accent-muted: rgba(252, 163, 17, 0.15); /* === SEMANTIC BACKGROUND COLORS === */ --bg-primary: #FFFFFF; /* White - page background */ --bg-secondary: #F0F0F0; /* Alabaster Grey derived */ --bg-tertiary: #E5E5E5; /* Alabaster Grey - inputs */ --bg-card: #FFFFFF; /* White - cards */ --bg-elevated: #FFFFFF; /* White - elevated surfaces */ /* Navigation & Header */ --nav-bg: #14213D; /* Prussian Blue nav */ --nav-bg-scroll: rgba(20, 33, 61, 0.97); /* Hero Section - Dark gradient for impact */ --hero-top: #000000; --hero-bottom: #14213D; /* Panels & Dropdowns */ --panel-bg: #14213D; --panel-border: rgba(255, 255, 255, 0.1); /* Footer */ --footer-bg: #000000; --footer-text: #E5E5E5; /* === TEXT COLORS === */ --text-primary: #14213D; /* Prussian Blue */ --text-secondary: #1B2A4A; /* Lighter Prussian */ --text-tertiary: #555555; /* Derived grey */ --text-muted: #888888; /* Muted grey */ --text-inverse: #FFFFFF; /* White text on dark bg */ --text-on-nav: #FFFFFF; /* White text on nav */ /* === BORDERS === */ --border-light: #E5E5E5; --border-medium: #D0D0D0; --border-dark: rgba(255, 255, 255, 0.1); --border-color: #E5E5E5; /* Default border color */ /* === STATUS COLORS === */ --success: #10B981; --success-bg: #D1FAE5; --success-soft: rgba(16, 185, 129, 0.15); --warning: #FCA311; --warning-bg: #FEF3C7; --warning-soft: rgba(252, 163, 17, 0.15); --danger: #EF4444; --danger-bg: #FEE2E2; --danger-soft: rgba(239, 68, 68, 0.15); --info: #14213D; --info-bg: #DBEAFE; --info-soft: rgba(var(--brand-primary-rgb), 0.15); /* === OVERLAY & EFFECT TOKENS === */ --overlay-light: rgba(255, 255, 255, 0.15); --overlay-light-hover: rgba(255, 255, 255, 0.25); --overlay-light-border: rgba(255, 255, 255, 0.3); --overlay-light-border-strong: rgba(255, 255, 255, 0.5); --overlay-dark: rgba(15, 23, 42, 0.6); --overlay-dark-hover: rgba(15, 23, 42, 0.75); --overlay-dark-border: rgba(15, 23, 42, 0.8); --overlay-dark-border-strong: rgba(15, 23, 42, 0.9); --focus-ring: rgba(var(--accent-rgb), 0.18); --surface-gradient-soft: linear-gradient(180deg, #f8fafc 0%, #edf2f7 100%); /* === STRUCTURAL === */ --container-width: 1440px; --container-width-fluid: calc(100% - 40px); --container-width-auth: 500px; --gutter: 20px; --radius: 12px; --radius-sm: 8px; --radius-lg: 16px; --radius-xl: 24px; /* === TRANSITIONS === */ --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-fast: all 0.15s ease; --transition-speed: 0.3s; --transition-theme: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; /* === SHADOWS === */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15); --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-elevated: 0 8px 30px rgba(0, 0, 0, 0.12); /* === LEGACY ALIASES (Compatibility) === */ --nav-primary: var(--nav-bg); --text: var(--text-inverse); --card-bg: var(--bg-card); --section-light: var(--bg-secondary); --panel: var(--panel-bg); /* === SECTION CONTENT COLORS (Theme-aware) === */ --section-title: #14213D; /* Prussian Blue headings */ --section-text: #555555; /* Derived grey body text */ --card-title: #14213D; /* Card titles */ --card-text: #555555; /* Card body text */ --icon-fill: #14213D; /* Icon fills */ --tab-text: #888888; /* Tab inactive */ --tab-border: #E5E5E5; /* Tab borders */ /* === HEADING COLORS === */ --heading-primary: #14213D; /* Prussian Blue */ --heading-secondary: #1B2A4A; /* Lighter Prussian */ /* === PAGE HEADER (Banner gradient) === */ --page-header-start: #14213D; /* Prussian Blue */ --page-header-end: #1B2A4A; /* Lighter Prussian */ /* === CLIENT TOPBAR (Light Mode) === */ --topbar-bg-start: #F8FAFC; --topbar-bg-end: #EEF2F7; --topbar-border: rgba(20, 33, 61, 0.12); --topbar-fg: #14213D; --topbar-icon: #304060; --topbar-icon-hover-bg: rgba(20, 33, 61, 0.08); /* === DROPDOWN COLORS === */ --dropdown-bg: #FFFFFF; --dropdown-border: rgba(0, 0, 0, 0.1); --dropdown-divider: rgba(0, 0, 0, 0.06); --dropdown-hover: rgba(0, 0, 0, 0.04); --dropdown-text: #14213D; --dropdown-text-muted: #888888; --dropdown-unread-bg: rgba(252, 163, 17, 0.1); /* === LANDING PAGE COLOR TOKENS === */ --landing-bg-dark: #14213D; --landing-bg-light: #FFFFFF; --landing-border-soft: rgba(20, 33, 61, 0.1); --landing-border-mid: rgba(20, 33, 61, 0.16); --landing-accent-tint-8: rgba(252, 163, 17, 0.08); --landing-accent-tint-12: rgba(252, 163, 17, 0.12); --landing-accent-tint-20: rgba(252, 163, 17, 0.2); --landing-accent-tint-30: rgba(252, 163, 17, 0.3); --landing-accent-tint-50: rgba(252, 163, 17, 0.5); --landing-surface-glass: rgba(255, 255, 255, 0.08); --landing-surface-glass-hover: rgba(255, 255, 255, 0.12); --landing-surface-glass-border: rgba(255, 255, 255, 0.12); --landing-surface-glass-border-strong: rgba(255, 255, 255, 0.18); --landing-surface-outline: rgba(255, 255, 255, 0.28); --landing-text-on-dark-primary: #FFFFFF; --landing-text-on-dark-secondary: rgba(255, 255, 255, 0.7); --landing-text-on-dark-muted: rgba(255, 255, 255, 0.55); --landing-text-on-dark-subtle: rgba(255, 255, 255, 0.4); --landing-nav-surface: linear-gradient(120deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 245, 245, 0.94) 100%); --landing-nav-surface-mobile: linear-gradient(180deg, #FFFFFF 0%, #F0F0F0 100%); --landing-card-gradient-dark: linear-gradient(140deg, #14213D 0%, #1B2A4A 100%); --landing-stats-gradient: linear-gradient(135deg, #FCA311 0%, #E8950F 50%, #FCA311 100%); } /* ============================ THEME TOGGLE BUTTON STYLES ============================ */ .theme-toggle { width: 40px; height: 40px; padding: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text-on-nav); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); position: relative; overflow: hidden; } .theme-toggle:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-1px); } .theme-toggle svg { width: 20px; height: 20px; transition: transform 0.3s ease, opacity 0.3s ease; } /* Light-only system: hide all theme toggle controls */ .theme-toggle, .auth-theme-toggle, #sidebarThemeToggle, #themeToggle { display: none !important; }