/* ============================================ E-Shop - Centrální konfigurace barevných schémat ============================================ Jak používat: 1. Výchozí téma je "cyan" (aktuální design) 2. Pro změnu tématu přidejte atribut na element: 3. Pro dark mode přidejte: 4. Nebo použijte JavaScript: document.documentElement.setAttribute('data-theme', 'orange'); document.documentElement.setAttribute('data-mode', 'dark'); ============================================ */ /* ============================================ BASE COLORS (nezávislé na tématu) ============================================ */ :root { /* Neutrals - Slate palette */ --color-slate-50: #f8fafc; --color-slate-100: #f1f5f9; --color-slate-200: #e2e8f0; --color-slate-300: #cbd5e1; --color-slate-400: #94a3b8; --color-slate-500: #64748b; --color-slate-600: #475569; --color-slate-700: #334155; --color-slate-800: #1e293b; --color-slate-900: #0f172a; --color-slate-950: #020617; /* Status colors */ --color-success: #10b981; --color-success-light: #d1fae5; --color-warning: #f59e0b; --color-warning-light: #fef3c7; --color-error: #ef4444; --color-error-light: #fee2e2; /* Star rating */ --color-star: #fbbf24; } /* ============================================ THEME: CYAN (Výchozí) ============================================ */ :root, [data-theme="cyan"] { /* Primary accent */ --accent-50: #ecfeff; --accent-100: #cffafe; --accent-200: #a5f3fc; --accent-300: #67e8f9; --accent-400: #22d3ee; --accent-500: #06b6d4; --accent-600: #0891b2; --accent-700: #0e7490; --accent-800: #155e75; --accent-900: #164e63; /* RGB values for rgba() usage */ --accent-rgb: 6, 182, 212; /* Secondary accent (for gradients) */ --accent-secondary-500: #14b8a6; --accent-secondary-600: #0d9488; /* Computed theme colors */ --theme-gradient: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-secondary-500) 100%); --theme-gradient-hover: linear-gradient(135deg, var(--accent-600) 0%, var(--accent-secondary-600) 100%); --theme-gradient-dark: linear-gradient(135deg, var(--accent-700) 0%, var(--accent-900) 100%); --theme-shadow: 0 4px 14px 0 rgb(6 182 212 / 0.35); --theme-shadow-lg: 0 10px 25px -5px rgb(6 182 212 / 0.4); --theme-ring: rgb(6 182 212 / 0.2); } /* ============================================ THEME: BLUE ============================================ */ [data-theme="blue"] { --accent-50: #eff6ff; --accent-100: #dbeafe; --accent-200: #bfdbfe; --accent-300: #93c5fd; --accent-400: #60a5fa; --accent-500: #3b82f6; --accent-600: #2563eb; --accent-700: #1d4ed8; --accent-800: #1e40af; --accent-900: #1e3a8a; --accent-rgb: 59, 130, 246; --accent-secondary-500: #6366f1; --accent-secondary-600: #4f46e5; --theme-gradient: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-secondary-500) 100%); --theme-gradient-hover: linear-gradient(135deg, var(--accent-600) 0%, var(--accent-secondary-600) 100%); --theme-gradient-dark: linear-gradient(135deg, var(--accent-700) 0%, var(--accent-900) 100%); --theme-shadow: 0 4px 14px 0 rgb(59 130 246 / 0.35); --theme-shadow-lg: 0 10px 25px -5px rgb(59 130 246 / 0.4); --theme-ring: rgb(59 130 246 / 0.2); } /* ============================================ THEME: ORANGE ============================================ */ [data-theme="orange"] { --accent-50: #fff7ed; --accent-100: #ffedd5; --accent-200: #fed7aa; --accent-300: #fdba74; --accent-400: #fb923c; --accent-500: #f97316; --accent-600: #ea580c; --accent-700: #c2410c; --accent-800: #9a3412; --accent-900: #7c2d12; --accent-rgb: 249, 115, 22; --accent-secondary-500: #ef4444; --accent-secondary-600: #dc2626; --theme-gradient: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-secondary-500) 100%); --theme-gradient-hover: linear-gradient(135deg, var(--accent-600) 0%, var(--accent-secondary-600) 100%); --theme-gradient-dark: linear-gradient(135deg, var(--accent-700) 0%, var(--accent-900) 100%); --theme-shadow: 0 4px 14px 0 rgb(249 115 22 / 0.35); --theme-shadow-lg: 0 10px 25px -5px rgb(249 115 22 / 0.4); --theme-ring: rgb(249 115 22 / 0.2); } /* ============================================ THEME: RED ============================================ */ [data-theme="red"] { --accent-50: #fef2f2; --accent-100: #fee2e2; --accent-200: #fecaca; --accent-300: #fca5a5; --accent-400: #f87171; --accent-500: #ef4444; --accent-600: #dc2626; --accent-700: #b91c1c; --accent-800: #991b1b; --accent-900: #7f1d1d; --accent-rgb: 239, 68, 68; --accent-secondary-500: #f43f5e; --accent-secondary-600: #e11d48; --theme-gradient: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-secondary-500) 100%); --theme-gradient-hover: linear-gradient(135deg, var(--accent-600) 0%, var(--accent-secondary-600) 100%); --theme-gradient-dark: linear-gradient(135deg, var(--accent-700) 0%, var(--accent-900) 100%); --theme-shadow: 0 4px 14px 0 rgb(239 68 68 / 0.35); --theme-shadow-lg: 0 10px 25px -5px rgb(239 68 68 / 0.4); --theme-ring: rgb(239 68 68 / 0.2); } /* ============================================ THEME: GREEN ============================================ */ [data-theme="green"] { --accent-50: #f0fdf4; --accent-100: #dcfce7; --accent-200: #bbf7d0; --accent-300: #86efac; --accent-400: #4ade80; --accent-500: #22c55e; --accent-600: #16a34a; --accent-700: #15803d; --accent-800: #166534; --accent-900: #14532d; --accent-rgb: 34, 197, 94; --accent-secondary-500: #10b981; --accent-secondary-600: #059669; --theme-gradient: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-secondary-500) 100%); --theme-gradient-hover: linear-gradient(135deg, var(--accent-600) 0%, var(--accent-secondary-600) 100%); --theme-gradient-dark: linear-gradient(135deg, var(--accent-700) 0%, var(--accent-900) 100%); --theme-shadow: 0 4px 14px 0 rgb(34 197 94 / 0.35); --theme-shadow-lg: 0 10px 25px -5px rgb(34 197 94 / 0.4); --theme-ring: rgb(34 197 94 / 0.2); } /* ============================================ THEME: PURPLE ============================================ */ [data-theme="purple"] { --accent-50: #faf5ff; --accent-100: #f3e8ff; --accent-200: #e9d5ff; --accent-300: #d8b4fe; --accent-400: #c084fc; --accent-500: #a855f7; --accent-600: #9333ea; --accent-700: #7e22ce; --accent-800: #6b21a8; --accent-900: #581c87; --accent-rgb: 168, 85, 247; --accent-secondary-500: #ec4899; --accent-secondary-600: #db2777; --theme-gradient: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-secondary-500) 100%); --theme-gradient-hover: linear-gradient(135deg, var(--accent-600) 0%, var(--accent-secondary-600) 100%); --theme-gradient-dark: linear-gradient(135deg, var(--accent-700) 0%, var(--accent-900) 100%); --theme-shadow: 0 4px 14px 0 rgb(168 85 247 / 0.35); --theme-shadow-lg: 0 10px 25px -5px rgb(168 85 247 / 0.4); --theme-ring: rgb(168 85 247 / 0.2); } /* ============================================ THEME: GOLD / AMBER ============================================ */ [data-theme="gold"] { --accent-50: #fffbeb; --accent-100: #fef3c7; --accent-200: #fde68a; --accent-300: #fcd34d; --accent-400: #fbbf24; --accent-500: #f7941d; --accent-600: #d97706; --accent-700: #b45309; --accent-800: #92400e; --accent-900: #78350f; --accent-rgb: 247, 148, 29; --accent-secondary-500: #f59e0b; --accent-secondary-600: #d97706; --theme-gradient: linear-gradient(135deg, #f7941d 0%, #f59e0b 100%); --theme-gradient-hover: linear-gradient(135deg, #d97706 0%, #b45309 100%); --theme-gradient-dark: linear-gradient(135deg, var(--accent-700) 0%, var(--accent-900) 100%); --theme-shadow: 0 4px 14px 0 rgb(247 148 29 / 0.35); --theme-shadow-lg: 0 10px 25px -5px rgb(247 148 29 / 0.4); --theme-ring: rgb(247 148 29 / 0.2); } /* ============================================ THEME: ROSE ============================================ */ [data-theme="rose"] { --accent-50: #fff1f2; --accent-100: #ffe4e6; --accent-200: #fecdd3; --accent-300: #fda4af; --accent-400: #fb7185; --accent-500: #f43f5e; --accent-600: #e11d48; --accent-700: #be123c; --accent-800: #9f1239; --accent-900: #881337; --accent-rgb: 244, 63, 94; --accent-secondary-500: #ec4899; --accent-secondary-600: #db2777; --theme-gradient: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-secondary-500) 100%); --theme-gradient-hover: linear-gradient(135deg, var(--accent-600) 0%, var(--accent-secondary-600) 100%); --theme-gradient-dark: linear-gradient(135deg, var(--accent-700) 0%, var(--accent-900) 100%); --theme-shadow: 0 4px 14px 0 rgb(244 63 94 / 0.35); --theme-shadow-lg: 0 10px 25px -5px rgb(244 63 94 / 0.4); --theme-ring: rgb(244 63 94 / 0.2); } /* ============================================ THEME: SWIENTY (Saturated Red) ============================================ */ [data-theme="swienty"] { --accent-50: #fff5f5; --accent-100: #ffe3e3; --accent-200: #ffc9c9; --accent-300: #ffa8a8; --accent-400: #ff6b6b; --accent-500: #ff0000; --accent-600: #e60000; --accent-700: #cc0000; --accent-800: #a30000; --accent-900: #800000; --accent-rgb: 255, 0, 0; --accent-secondary-500: #ff1a1a; --accent-secondary-600: #e60000; --theme-gradient: linear-gradient(135deg, #ff0000 0%, #cc0000 100%); --theme-gradient-hover: linear-gradient(135deg, #e60000 0%, #a30000 100%); --theme-gradient-dark: linear-gradient(135deg, #cc0000 0%, #800000 100%); --theme-shadow: 0 4px 14px 0 rgb(255 0 0 / 0.35); --theme-shadow-lg: 0 10px 25px -5px rgb(255 0 0 / 0.4); --theme-ring: rgb(255 0 0 / 0.2); } /* ============================================ THEME: SEDLACEK (Reality Blue) ============================================ */ [data-theme="sedlacek"] { --accent-50: #e8f4fd; --accent-100: #d1e9fb; --accent-200: #a3d3f7; --accent-300: #86bbf0; --accent-400: #6ba9e6; --accent-500: #4f96dc; --accent-600: #3987d4; --accent-700: #2d6fb3; --accent-800: #255a91; --accent-900: #1d4770; --accent-rgb: 79, 150, 220; --accent-secondary-500: #3987d4; --accent-secondary-600: #2d6fb3; --theme-gradient: linear-gradient(135deg, #4f96dc 0%, #3987d4 100%); --theme-gradient-hover: linear-gradient(135deg, #3987d4 0%, #2d6fb3 100%); --theme-gradient-dark: linear-gradient(135deg, #2d6fb3 0%, #1d4770 100%); --theme-shadow: 0 4px 14px 0 rgb(79 150 220 / 0.35); --theme-shadow-lg: 0 10px 25px -5px rgb(79 150 220 / 0.4); --theme-ring: rgb(79 150 220 / 0.2); } /* ============================================ LIGHT MODE (Výchozí) ============================================ */ :root, [data-mode="light"] { /* Backgrounds */ --bg-primary: #ffffff; --bg-secondary: var(--color-slate-50); --bg-tertiary: var(--color-slate-100); /* Text */ --text-primary: var(--color-slate-900); --text-secondary: var(--color-slate-600); --text-tertiary: var(--color-slate-500); --text-muted: var(--color-slate-400); /* Borders */ --border-primary: var(--color-slate-200); --border-secondary: var(--color-slate-100); /* Header */ --header-bg: #ffffff; --header-top-bg: linear-gradient(to right, var(--color-slate-900), var(--color-slate-800)); --header-top-text: #ffffff; /* Footer */ --footer-bg: linear-gradient(to bottom, var(--color-slate-900), var(--color-slate-950)); --footer-text: var(--color-slate-400); /* Cards */ --card-bg: #ffffff; --card-border: var(--color-slate-100); --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1); } /* ============================================ DARK MODE ============================================ */ [data-mode="dark"] { /* Backgrounds */ --bg-primary: var(--color-slate-900); --bg-secondary: var(--color-slate-800); --bg-tertiary: var(--color-slate-700); /* Text */ --text-primary: var(--color-slate-50); --text-secondary: var(--color-slate-300); --text-tertiary: var(--color-slate-400); --text-muted: var(--color-slate-500); /* Borders */ --border-primary: var(--color-slate-700); --border-secondary: var(--color-slate-800); /* Header */ --header-bg: var(--color-slate-900); --header-top-bg: var(--color-slate-950); --header-top-text: var(--color-slate-300); /* Footer */ --footer-bg: var(--color-slate-950); --footer-text: var(--color-slate-400); /* Cards */ --card-bg: var(--color-slate-800); --card-border: var(--color-slate-700); --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3); } /* Dark mode specific overrides for components */ [data-mode="dark"] .header-main { background: var(--color-slate-900); border-bottom: 1px solid var(--color-slate-800); } [data-mode="dark"] .header-search input { background: var(--color-slate-800); border-color: var(--color-slate-700); color: var(--color-slate-100); } [data-mode="dark"] .header-search input::placeholder { color: var(--color-slate-500); } [data-mode="dark"] .category-sidebar { background: var(--color-slate-800); } [data-mode="dark"] .category-sidebar-header { background: var(--theme-gradient); } [data-mode="dark"] .category-item { color: var(--color-slate-200); border-bottom-color: var(--color-slate-700); } [data-mode="dark"] .category-item:hover { background: var(--accent-900); color: var(--accent-300); } [data-mode="dark"] .product-card { background: var(--color-slate-800); border-color: var(--color-slate-700); } [data-mode="dark"] .product-card:hover { border-color: var(--accent-500); } [data-mode="dark"] .product-card-title { color: var(--color-slate-100); } [data-mode="dark"] .product-price-current { color: var(--color-slate-50); } [data-mode="dark"] .benefit-item { background: var(--color-slate-800); } [data-mode="dark"] .footer-column a { color: var(--color-slate-400); } [data-mode="dark"] .footer-column a:hover { color: var(--accent-400); } [data-mode="dark"] .footer-bottom { border-top-color: var(--color-slate-800); color: var(--color-slate-500); } [data-mode="dark"] body { background-color: var(--color-slate-900); color: var(--color-slate-100); } [data-mode="dark"] .section-title { color: var(--color-slate-100); } [data-mode="dark"] .hero-banner { background: var(--theme-gradient); } /* Theme panel dark mode */ [data-mode="dark"] #theme-panel-toggle { background: var(--color-slate-800); border-color: var(--color-slate-700); } [data-mode="dark"] #theme-panel-toggle svg { color: var(--color-slate-300); } [data-mode="dark"] #theme-panel-content { background: var(--color-slate-800); border-color: var(--color-slate-700); } [data-mode="dark"] #theme-panel-content h4 { color: var(--color-slate-100); } [data-mode="dark"] #theme-panel-content [data-set-mode] { background: var(--color-slate-700); border-color: var(--color-slate-600); color: var(--color-slate-200); } [data-mode="dark"] #theme-panel-content [data-set-mode]:hover { background: var(--color-slate-600); } [data-mode="dark"] #theme-panel-content [data-set-mode].active, [data-mode="dark"] #theme-panel-content [data-set-mode].bg-gray-100 { background: var(--color-slate-600); border-color: var(--accent-500); } /* Header icon styles */ .header-action-icon { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; border-radius: 0.75rem; transition: all 0.15s ease; color: var(--color-slate-900); } .header-action-icon:hover { color: var(--accent-500); background-color: var(--accent-100); } .header-action-icon.active { color: var(--accent-500); background-color: var(--accent-100); } .header-action-icon.active:hover { background-color: var(--accent-500); color: white; } [data-mode="dark"] .header-action-icon { color: var(--color-slate-200); } [data-mode="dark"] .header-action-icon:hover { color: var(--accent-400); background-color: var(--color-slate-700); } [data-mode="dark"] .header-action-icon.active { color: var(--accent-400); background-color: var(--color-slate-700); } [data-mode="dark"] .header-action-icon.active:hover { background-color: var(--accent-500); color: white; } /* Mobile menu button */ .mobile-menu-btn { color: var(--color-slate-900); } [data-mode="dark"] .mobile-menu-btn { color: var(--color-slate-200); } [data-mode="dark"] .mobile-menu-btn:hover { background-color: var(--color-slate-700); } /* Auto dark mode based on system preference */ @media (prefers-color-scheme: dark) { :root:not([data-mode]) { /* Uncomment to enable auto dark mode: --bg-primary: var(--color-slate-900); --bg-secondary: var(--color-slate-800); --bg-tertiary: var(--color-slate-700); --text-primary: var(--color-slate-50); --text-secondary: var(--color-slate-300); --text-tertiary: var(--color-slate-400); --text-muted: var(--color-slate-500); --border-primary: var(--color-slate-700); --border-secondary: var(--color-slate-800); --header-bg: var(--color-slate-900); --header-top-bg: linear-gradient(to right, var(--color-slate-950), var(--color-slate-900)); --header-top-text: var(--color-slate-300); --footer-bg: linear-gradient(to bottom, var(--color-slate-950), #000000); --footer-text: var(--color-slate-500); --card-bg: var(--color-slate-800); --card-border: var(--color-slate-700); --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3); */ } } /* ============================================ UTILITY CLASSES FOR THEMING ============================================ */ /* Backgrounds */ .bg-theme { background: var(--theme-gradient); } .bg-theme-hover:hover { background: var(--theme-gradient-hover); } .bg-theme-light { background-color: var(--accent-100); } .bg-theme-50 { background-color: var(--accent-50); } /* Text colors */ .text-theme { color: var(--accent-500); } .text-theme-hover:hover { color: var(--accent-600); } .text-theme-gradient { background: var(--theme-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Borders */ .border-theme { border-color: var(--accent-500); } .border-theme-light { border-color: var(--accent-200); } /* Shadows */ .shadow-theme { box-shadow: var(--theme-shadow); } .shadow-theme-lg { box-shadow: var(--theme-shadow-lg); } /* Focus ring */ .ring-theme { --tw-ring-color: var(--theme-ring); } /* Hover backgrounds */ .hover\:bg-theme-light:hover { background-color: var(--accent-100); } .hover\:bg-theme:hover { background: var(--theme-gradient); } /* ============================================ COMPONENT STYLES USING THEME VARIABLES ============================================ */ /* Primary button */ .btn-theme { background: var(--theme-gradient); color: white; box-shadow: var(--theme-shadow); transition: all 0.2s ease; } .btn-theme:hover { background: var(--theme-gradient-hover); box-shadow: var(--theme-shadow-lg); transform: translateY(-1px); } /* Ghost button */ .btn-theme-ghost { color: var(--accent-500); background: transparent; } .btn-theme-ghost:hover { background-color: var(--accent-100); color: var(--accent-600); } /* Outline button */ .btn-theme-outline { color: var(--accent-500); border: 2px solid var(--accent-500); background: transparent; } .btn-theme-outline:hover { background: var(--theme-gradient); border-color: transparent; color: white; } /* Badge */ .badge-theme { background: var(--theme-gradient); color: white; box-shadow: var(--theme-shadow); } /* Input focus */ .input-theme:focus { border-color: var(--accent-500); box-shadow: 0 0 0 3px var(--theme-ring); } /* Link */ .link-theme { color: var(--accent-500); transition: color 0.15s ease; } .link-theme:hover { color: var(--accent-600); } /* Card accent */ .card-theme-accent { border-left: 4px solid var(--accent-500); } /* Progress bar */ .progress-theme { background: var(--theme-gradient); } /* Checkbox/Radio when checked */ .checkbox-theme:checked { background: var(--theme-gradient); border-color: var(--accent-500); } /* Tab active */ .tab-theme-active { background: var(--theme-gradient); color: white; } /* Sidebar active item */ .sidebar-item-theme-active { background-color: var(--accent-100); color: var(--accent-600); border-left: 3px solid var(--accent-500); } /* Promo banners - see custom.css for full styles with dark mode support */