/* * FLOWAYZ THEME SYSTEM - ACCENT COLORS * * This file defines accent color presets using HSL for automatic shade generation. * Usage: Set data-accent="coral|teal|purple|blue|green|gold|custom" on * * The accent color is used for: * - Primary buttons * - Active navigation items * - Focus rings * - Interactive elements * - Links and highlights */ /* ======================================== BASE ACCENT VARIABLES (HSL-based) ======================================== */ :root { /* Default accent: Coral (Flowayz brand) */ --accent-h: 14; /* Hue: 0-360 */ --accent-s: 100%; /* Saturation: 0-100% */ --accent-l: 67%; /* Lightness base: 0-100% */ /* Generated accent palette */ --accent-50: hsl(var(--accent-h), var(--accent-s), 97%); --accent-100: hsl(var(--accent-h), var(--accent-s), 94%); --accent-200: hsl(var(--accent-h), var(--accent-s), 86%); --accent-300: hsl(var(--accent-h), var(--accent-s), 76%); --accent-400: hsl(var(--accent-h), var(--accent-s), 66%); --accent-500: hsl(var(--accent-h), var(--accent-s), 56%); --accent-600: hsl(var(--accent-h), var(--accent-s), 46%); --accent-700: hsl(var(--accent-h), var(--accent-s), 36%); --accent-800: hsl(var(--accent-h), var(--accent-s), 26%); --accent-900: hsl(var(--accent-h), var(--accent-s), 16%); /* Primary accent (used in components) */ --accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l)); --accent-hover: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 8%)); --accent-active: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 12%)); /* Accent with alpha channel for backgrounds */ --accent-5: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.05); --accent-10: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.10); --accent-20: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.20); --accent-30: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.30); /* Contrast text color for accent backgrounds */ --accent-contrast: #1A202C; /* Dark text on coral by default */ } /* Dark mode adjustments */ [data-mode="dark"], html.dark { /* Slightly brighter accent in dark mode for visibility */ --accent-l: 62%; /* Adjusted shades for dark mode */ --accent-50: hsl(var(--accent-h), var(--accent-s), 12%); --accent-100: hsl(var(--accent-h), var(--accent-s), 18%); --accent-200: hsl(var(--accent-h), var(--accent-s), 28%); --accent-300: hsl(var(--accent-h), var(--accent-s), 38%); } /* ======================================== ACCENT PRESETS ======================================== */ /* CORAL - Default Flowayz Brand */ [data-accent="coral"], :root:not([data-accent]) { --accent-h: 14; --accent-s: 100%; --accent-l: 67%; --accent: hsl(14, 100%, 67%); --accent-contrast: #1A202C; } /* TEAL - Fresh, Modern */ [data-accent="teal"] { --accent-h: 177; --accent-s: 52%; --accent-l: 46%; --accent: hsl(177, 52%, 46%); --accent-contrast: #FFFFFF; } /* PURPLE - Creative, Premium */ [data-accent="purple"] { --accent-h: 262; --accent-s: 83%; --accent-l: 58%; --accent: hsl(262, 83%, 58%); --accent-contrast: #FFFFFF; } /* BLUE - Professional, Trust */ [data-accent="blue"] { --accent-h: 217; --accent-s: 91%; --accent-l: 60%; --accent: hsl(217, 91%, 60%); --accent-contrast: #FFFFFF; } /* GREEN - Nature, Growth */ [data-accent="green"] { --accent-h: 142; --accent-s: 71%; --accent-l: 45%; --accent: hsl(142, 71%, 45%); --accent-contrast: #FFFFFF; } /* GOLD - Premium, Luxury */ [data-accent="gold"] { --accent-h: 45; --accent-s: 93%; --accent-l: 55%; --accent: hsl(45, 93%, 55%); --accent-contrast: #1A202C; } /* ROSE - Soft, Elegant */ [data-accent="rose"] { --accent-h: 340; --accent-s: 82%; --accent-l: 52%; --accent: hsl(340, 82%, 52%); --accent-contrast: #FFFFFF; } /* CUSTOM - User-defined via --user-accent-h and --user-accent-s */ [data-accent="custom"] { --accent-h: var(--user-accent-h, 14); --accent-s: var(--user-accent-s, 100%); --accent-l: var(--user-accent-l, 67%); --accent: hsl(var(--user-accent-h, 14), var(--user-accent-s, 100%), var(--user-accent-l, 67%)); --accent-contrast: var(--user-accent-contrast, #1A202C); } /* ======================================== COMPONENT OVERRIDES WITH ACCENT ======================================== */ /* Primary Button - Uses accent color */ :root { --btn-accent-bg: var(--accent); --btn-accent-text: var(--accent-contrast); --btn-accent-hover-bg: var(--accent-hover); --btn-accent-active-bg: var(--accent-active); --btn-accent-shadow: 0 4px 14px 0 var(--accent-30); --btn-accent-hover-shadow: 0 6px 20px var(--accent-30); /* Focus ring using accent */ --focus-ring-color: var(--accent-30); /* Active/selected states */ --active-bg: var(--accent); --active-text: var(--accent-contrast); --active-border: var(--accent); /* Links */ --link-color: var(--accent); --link-hover-color: var(--accent-hover); /* Selection */ --selection-bg: var(--accent-20); --selection-text: inherit; } /* ======================================== UTILITY: Override btn-primary with accent Element-qualified selectors for higher specificity ======================================== */ /* Map existing btn-primary to accent system */ /* Using element-qualified selectors to match compiled Tailwind specificity */ .btn-primary, a.btn-primary, button.btn-primary, input.btn-primary, .btn-accent, a.btn-accent, button.btn-accent { background-color: var(--accent) !important; color: var(--accent-contrast) !important; box-shadow: var(--btn-accent-shadow); } /* Ensure text inside buttons is also correct color */ .btn-primary span, .btn-primary :not(svg):not(path), a.btn-primary span, a.btn-primary :not(svg):not(path), button.btn-primary span, button.btn-primary :not(svg):not(path) { color: var(--accent-contrast) !important; } .btn-primary:hover, a.btn-primary:hover, button.btn-primary:hover, input.btn-primary:hover, .btn-accent:hover, a.btn-accent:hover, button.btn-accent:hover { background-color: var(--accent-hover) !important; box-shadow: var(--btn-accent-hover-shadow); } .btn-primary:hover span, .btn-primary:hover :not(svg):not(path), a.btn-primary:hover span, a.btn-primary:hover :not(svg):not(path), button.btn-primary:hover span, button.btn-primary:hover :not(svg):not(path) { color: var(--accent-contrast) !important; } .btn-primary:active, a.btn-primary:active, button.btn-primary:active, input.btn-primary:active, .btn-accent:active, a.btn-accent:active, button.btn-accent:active { background-color: var(--accent-active) !important; } .btn-primary:focus, a.btn-primary:focus, button.btn-primary:focus, input.btn-primary:focus, .btn-accent:focus, a.btn-accent:focus, button.btn-accent:focus { box-shadow: 0 0 0 3px var(--focus-ring-color); } /* Ghost button with accent */ .btn-ghost, a.btn-ghost, button.btn-ghost { color: var(--accent) !important; } .btn-ghost:hover, a.btn-ghost:hover, button.btn-ghost:hover { background-color: var(--accent-10) !important; } /* ======================================== SIDEBAR ACTIVE STATE WITH ACCENT Element-qualified selectors for higher specificity ======================================== */ .sidebar-link.active, a.sidebar-link.active, button.sidebar-link.active { background: var(--accent) !important; color: var(--accent-contrast) !important; } /* Dark mode sidebar active states */ html.dark .sidebar-link.active, html.dark a.sidebar-link.active, [data-theme="dark"] .sidebar-link.active, [data-theme="dark"] a.sidebar-link.active, [data-mode="dark"] .sidebar-link.active, [data-mode="dark"] a.sidebar-link.active { background: var(--accent) !important; color: var(--accent-contrast) !important; } /* Ensure text inside active sidebar links is correct color */ .sidebar-link.active span, .sidebar-link.active :not(svg):not(path), a.sidebar-link.active span, a.sidebar-link.active :not(svg):not(path), html.dark .sidebar-link.active span, html.dark .sidebar-link.active :not(svg):not(path), [data-theme="dark"] .sidebar-link.active span, [data-theme="dark"] .sidebar-link.active :not(svg):not(path), [data-mode="dark"] .sidebar-link.active span, [data-mode="dark"] .sidebar-link.active :not(svg):not(path) { color: var(--accent-contrast) !important; } /* Sidebar nav item active (premium design system) */ .sidebar-nav-item.active, a.sidebar-nav-item.active { background: var(--accent) !important; color: var(--accent-contrast) !important; }