/* ========================================================================== PTCCB Color Themes Each theme overrides the primary color palette from design-tokens.css. Applied via etc. Stored in browser cookie: ptccb_color_theme ========================================================================== */ /* ----- Teal (default - matches design-tokens.css) ----- */ html.theme-teal { --color-primary-50: #f0fdfa; --color-primary-100: #ccfbf1; --color-primary-200: #99f6e4; --color-primary-300: #5eead4; --color-primary-400: #2dd4bf; --color-primary-500: #14b8a6; --color-primary-600: #0d9488; --color-primary-700: #0f766e; --color-primary-800: #115e59; --color-primary-900: #134e4a; --color-primary: var(--color-primary-600); --color-primary-hover: var(--color-primary-700); --color-primary-light: var(--color-primary-50); --color-primary-ring: rgba(13, 148, 136, 0.2); /* Sidebar */ --sidebar-bg: #0b3533; --sidebar-border: #145c55; --sidebar-active-bg: rgba(13, 148, 136, 0.18); --sidebar-active-text: var(--color-primary-300); --sidebar-active-icon: var(--color-primary-400); --color-link: var(--color-primary-600); --color-link-hover: var(--color-primary-700); } /* ----- Blue ----- */ html.theme-blue { --color-primary-50: #eff6ff; --color-primary-100: #dbeafe; --color-primary-200: #bfdbfe; --color-primary-300: #93c5fd; --color-primary-400: #60a5fa; --color-primary-500: #3b82f6; --color-primary-600: #2563eb; --color-primary-700: #1d4ed8; --color-primary-800: #1e40af; --color-primary-900: #1e3a8a; --color-primary: var(--color-primary-600); --color-primary-hover: var(--color-primary-700); --color-primary-light: var(--color-primary-50); --color-primary-ring: rgba(37, 99, 235, 0.2); /* Sidebar */ --sidebar-bg: #0c1e42; --sidebar-border: #183868; --sidebar-active-bg: rgba(37, 99, 235, 0.18); --sidebar-active-text: var(--color-primary-300); --sidebar-active-icon: var(--color-primary-400); --color-link: var(--color-primary-600); --color-link-hover: var(--color-primary-700); } /* ----- Purple ----- */ html.theme-purple { --color-primary-50: #f5f3ff; --color-primary-100: #ede9fe; --color-primary-200: #ddd6fe; --color-primary-300: #c4b5fd; --color-primary-400: #a78bfa; --color-primary-500: #8b5cf6; --color-primary-600: #7c3aed; --color-primary-700: #6d28d9; --color-primary-800: #5b21b6; --color-primary-900: #4c1d95; --color-primary: var(--color-primary-600); --color-primary-hover: var(--color-primary-700); --color-primary-light: var(--color-primary-50); --color-primary-ring: rgba(124, 58, 237, 0.2); /* Sidebar */ --sidebar-bg: #1a0e3a; --sidebar-border: #2e1a60; --sidebar-active-bg: rgba(124, 58, 237, 0.18); --sidebar-active-text: var(--color-primary-300); --sidebar-active-icon: var(--color-primary-400); --color-link: var(--color-primary-600); --color-link-hover: var(--color-primary-700); } /* ----- Rose ----- */ html.theme-rose { --color-primary-50: #fff1f2; --color-primary-100: #ffe4e6; --color-primary-200: #fecdd3; --color-primary-300: #fda4af; --color-primary-400: #fb7185; --color-primary-500: #f43f5e; --color-primary-600: #e11d48; --color-primary-700: #be123c; --color-primary-800: #9f1239; --color-primary-900: #881337; --color-primary: var(--color-primary-600); --color-primary-hover: var(--color-primary-700); --color-primary-light: var(--color-primary-50); --color-primary-ring: rgba(225, 29, 72, 0.2); /* Sidebar */ --sidebar-bg: #2c0c1a; --sidebar-border: #4d1530; --sidebar-active-bg: rgba(225, 29, 72, 0.18); --sidebar-active-text: var(--color-primary-300); --sidebar-active-icon: var(--color-primary-400); --color-link: var(--color-primary-600); --color-link-hover: var(--color-primary-700); } /* ----- Amber ----- */ html.theme-amber { --color-primary-50: #fffbeb; --color-primary-100: #fef3c7; --color-primary-200: #fde68a; --color-primary-300: #fcd34d; --color-primary-400: #fbbf24; --color-primary-500: #f59e0b; --color-primary-600: #d97706; --color-primary-700: #b45309; --color-primary-800: #92400e; --color-primary-900: #78350f; --color-primary: var(--color-primary-600); --color-primary-hover: var(--color-primary-700); --color-primary-light: var(--color-primary-50); --color-primary-ring: rgba(217, 119, 6, 0.2); /* Sidebar */ --sidebar-bg: #271708; --sidebar-border: #462c12; --sidebar-active-bg: rgba(217, 119, 6, 0.18); --sidebar-active-text: var(--color-primary-300); --sidebar-active-icon: var(--color-primary-400); --color-link: var(--color-primary-600); --color-link-hover: var(--color-primary-700); } /* ----- Cyan ----- */ html.theme-cyan { --color-primary-50: #ecfeff; --color-primary-100: #cffafe; --color-primary-200: #a5f3fc; --color-primary-300: #67e8f9; --color-primary-400: #22d3ee; --color-primary-500: #06b6d4; --color-primary-600: #0891b2; --color-primary-700: #0e7490; --color-primary-800: #155e75; --color-primary-900: #164e63; --color-primary: var(--color-primary-600); --color-primary-hover: var(--color-primary-700); --color-primary-light: var(--color-primary-50); --color-primary-ring: rgba(8, 145, 178, 0.2); /* Sidebar */ --sidebar-bg: #0a2a35; --sidebar-border: #134a5c; --sidebar-active-bg: rgba(8, 145, 178, 0.18); --sidebar-active-text: var(--color-primary-300); --sidebar-active-icon: var(--color-primary-400); --color-link: var(--color-primary-600); --color-link-hover: var(--color-primary-700); }