/* * 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: Orange Bento #F26B3A (Flowayz brand refresh, 2026-07-23). hsl(16, 88%, 59%). Le système reste 100% personnalisable — seul le défaut change. */ --accent-h: 16; /* Hue: 0-360 */ --accent-s: 88%; /* Saturation: 0-100% */ --accent-l: 59%; /* 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%)); /* Premium CTA gradient (accent-aware, dérivé de --accent-h/s/l → suit l'accent courant, les presets ET le custom). Consommé par le bloc premium des boutons primaires (mirror en fin de ce fichier + flowayz_override.css). */ --accent-grad-top: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 7%)); --accent-grad-bottom: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 8%)); --accent-edge: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 16%)); --accent-gradient: linear-gradient(180deg, var(--accent-grad-top) 0%, var(--accent) 52%, var(--accent-grad-bottom) 100%); --accent-gradient-hover: linear-gradient(180deg, hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 9%)) 0%, var(--accent) 50%, hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 11%)) 100%); /* 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); --accent-40: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.40); --accent-50: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.50); /* Contrast text color for accent backgrounds */ --accent-contrast: #1A202C; /* Dark text on coral by default */ } /* Dark mode adjustments */ [data-mode="dark"], html.dark { /* Much brighter accent in dark mode for optimal visibility */ --accent-l: 72%; /* 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 / ORANGE - Default Flowayz Brand (refresh Bento #F26B3A, 2026-07-23) */ [data-accent="coral"], :root:not([data-accent]) { --accent-h: 16; --accent-s: 88%; --accent-l: 59%; --accent-contrast: #1A202C; } /* TEAL - Fresh, Modern */ [data-accent="teal"] { --accent-h: 177; --accent-s: 52%; --accent-l: 46%; --accent-contrast: #FFFFFF; } /* PURPLE - Creative, Premium */ [data-accent="purple"] { --accent-h: 262; --accent-s: 83%; --accent-l: 58%; --accent-contrast: #FFFFFF; } /* BLUE - Professional, Trust */ [data-accent="blue"] { --accent-h: 217; --accent-s: 91%; --accent-l: 60%; --accent-contrast: #FFFFFF; } /* GREEN - Nature, Growth */ [data-accent="green"] { --accent-h: 142; --accent-s: 71%; --accent-l: 45%; --accent-contrast: #FFFFFF; } /* GOLD - Premium, Luxury */ [data-accent="gold"] { --accent-h: 45; --accent-s: 93%; --accent-l: 55%; --accent-contrast: #1A202C; } /* ROSE - Soft, Elegant */ [data-accent="rose"] { --accent-h: 340; --accent-s: 82%; --accent-l: 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-contrast: var(--user-accent-contrast, #1A202C); } /* ======================================== DARK MODE: Boost accent lightness per preset Combined selectors (specificity 0,2,1) beat individual presets (0,1,0) ======================================== */ html.dark[data-accent="coral"], [data-mode="dark"][data-accent="coral"], html.dark:not([data-accent]), [data-mode="dark"]:not([data-accent]) { --accent-l: 75%; } html.dark[data-accent="teal"], [data-mode="dark"][data-accent="teal"] { --accent-l: 68%; } html.dark[data-accent="purple"], [data-mode="dark"][data-accent="purple"] { --accent-l: 72%; } html.dark[data-accent="blue"], [data-mode="dark"][data-accent="blue"] { --accent-l: 72%; } html.dark[data-accent="green"], [data-mode="dark"][data-accent="green"] { --accent-l: 68%; } html.dark[data-accent="gold"], [data-mode="dark"][data-accent="gold"] { --accent-l: 72%; } html.dark[data-accent="rose"], [data-mode="dark"][data-accent="rose"] { --accent-l: 70%; } html.dark[data-accent="custom"], [data-mode="dark"][data-accent="custom"] { --accent-l: max(var(--user-accent-l, 67%), 65%); } /* ======================================== 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: var(--accent-gradient, var(--accent)) !important; color: var(--accent-contrast) !important; box-shadow: var(--btn-accent-shadow); } /* Ensure ALL children inside accent buttons get correct contrast color (text + SVGs) */ .btn-primary *, a.btn-primary *, button.btn-primary *, .btn-accent *, a.btn-accent *, button.btn-accent * { 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: var(--accent-gradient-hover, var(--accent-hover)) !important; box-shadow: var(--btn-accent-hover-shadow); } .btn-primary:hover *, a.btn-primary:hover *, button.btn-primary:hover *, .btn-accent:hover *, a.btn-accent:hover *, button.btn-accent:hover * { 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-gradient, 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-gradient, var(--accent)) !important; color: var(--accent-contrast) !important; } /* Ensure ALL children inside active sidebar links get correct contrast color */ .sidebar-link.active *, a.sidebar-link.active *, html.dark .sidebar-link.active *, [data-theme="dark"] .sidebar-link.active *, [data-mode="dark"] .sidebar-link.active * { color: var(--accent-contrast) !important; } /* Sidebar nav item active (premium design system) */ .sidebar-nav-item.active, a.sidebar-nav-item.active { background: var(--accent-gradient, var(--accent)) !important; color: var(--accent-contrast) !important; } /* ============================================================================ PREMIUM PRIMARY CTA — mirror du bloc de flowayz_override.css, pour les layouts qui chargent accents.css mais PAS flowayz_override.css (editor, chat, client_portal). Garder synchro avec flowayz_override.css. ============================================================================ */ .btn-primary:not(.vt-founder-cta):not(.vt-final-cta-btn), .btn-accent:not(.vt-founder-cta):not(.vt-final-cta-btn), .btn--primary:not(.vt-founder-cta):not(.vt-final-cta-btn), .auth-cta:not(.vt-founder-cta):not(.vt-final-cta-btn) { position: relative; overflow: hidden; border-radius: 12px !important; border: 1px solid var(--accent-edge, transparent) !important; background: var(--accent-gradient, var(--accent)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 22px -8px var(--accent), 0 2px 6px -2px rgba(15, 23, 42, 0.18) !important; transition: box-shadow 0.22s var(--ease-out-premium, cubic-bezier(0.22, 1, 0.36, 1)), transform 0.22s var(--ease-out-premium, cubic-bezier(0.22, 1, 0.36, 1)), background 0.2s ease !important; } .btn-primary:not(.vt-founder-cta):not(.vt-final-cta-btn):hover, .btn-accent:not(.vt-founder-cta):not(.vt-final-cta-btn):hover, .btn--primary:not(.vt-founder-cta):not(.vt-final-cta-btn):hover, .auth-cta:not(.vt-founder-cta):not(.vt-final-cta-btn):hover { background: var(--accent-gradient-hover, var(--accent-hover)) !important; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 12px 30px -8px var(--accent), 0 3px 10px -2px rgba(15, 23, 42, 0.22) !important; } .btn-primary:not(.vt-founder-cta):not(.vt-final-cta-btn):active, .btn-accent:not(.vt-founder-cta):not(.vt-final-cta-btn):active, .btn--primary:not(.vt-founder-cta):not(.vt-final-cta-btn):active, .auth-cta:not(.vt-founder-cta):not(.vt-final-cta-btn):active { transform: translateY(0); box-shadow: inset 0 2px 5px rgba(15, 23, 42, 0.20), 0 4px 12px -6px var(--accent) !important; } .btn-primary:not(.vt-founder-cta):not(.vt-final-cta-btn)::before, .btn-accent:not(.vt-founder-cta):not(.vt-final-cta-btn)::before, .btn--primary:not(.vt-founder-cta):not(.vt-final-cta-btn)::before, .auth-cta:not(.vt-founder-cta):not(.vt-final-cta-btn)::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%); transform: translateX(calc(var(--dir, 1) * -130%)); pointer-events: none; } .btn-primary:not(.vt-founder-cta):not(.vt-final-cta-btn) > *, .btn-accent:not(.vt-founder-cta):not(.vt-final-cta-btn) > *, .btn--primary:not(.vt-founder-cta):not(.vt-final-cta-btn) > *, .auth-cta:not(.vt-founder-cta):not(.vt-final-cta-btn) > * { position: relative; z-index: 1; } @media (prefers-reduced-motion: no-preference) { .btn-primary:not(.vt-founder-cta):not(.vt-final-cta-btn)::before, .btn-accent:not(.vt-founder-cta):not(.vt-final-cta-btn)::before, .btn--primary:not(.vt-founder-cta):not(.vt-final-cta-btn)::before, .auth-cta:not(.vt-founder-cta):not(.vt-final-cta-btn)::before { transition: transform 0.75s var(--ease-out-premium, cubic-bezier(0.22, 1, 0.36, 1)); } .btn-primary:not(.vt-founder-cta):not(.vt-final-cta-btn):hover::before, .btn-accent:not(.vt-founder-cta):not(.vt-final-cta-btn):hover::before, .btn--primary:not(.vt-founder-cta):not(.vt-final-cta-btn):hover::before, .auth-cta:not(.vt-founder-cta):not(.vt-final-cta-btn):hover::before { transform: translateX(calc(var(--dir, 1) * 130%)); } }