/* * 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); --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 - Default Flowayz Brand */ [data-accent="coral"], :root:not([data-accent]) { --accent-h: 14; --accent-s: 100%; --accent-l: 67%; --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-color: 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-color: 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) !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 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) !important; color: var(--accent-contrast) !important; } :root, [data-theme="light"], [data-mode="light"] { --shadow-xl: 0 12px 60px rgba(0, 0, 0, 0.20); /* === BUTTONS === */ /* Primary Button - Uses accent color system */ --btn-primary-bg: var(--accent); --btn-primary-text: var(--accent-contrast); --btn-primary-shadow: var(--btn-accent-shadow); --btn-primary-hover-bg: var(--accent-hover); --btn-primary-hover-shadow: var(--btn-accent-hover-shadow); /* Secondary Button */ --btn-secondary-bg: var(--flowayz-teal); --btn-secondary-text: var(--text-inverse); --btn-secondary-shadow: var(--shadow-teal); --btn-secondary-hover-bg: #2d9a94; /* Slightly darker teal */ --btn-secondary-hover-shadow: 0 6px 20px rgba(56, 178, 172, 0.4); /* Outline Button */ --btn-outline-bg: transparent; --btn-outline-text: var(--text-primary); --btn-outline-border: var(--border-default); --btn-outline-hover-bg: var(--bg-surface-hover); --btn-outline-hover-text: var(--text-primary); --btn-outline-hover-border: var(--border-default); /* Ghost Button - Uses accent color */ --btn-ghost-bg: transparent; --btn-ghost-text: var(--accent); --btn-ghost-hover-bg: var(--accent-10); /* === SIDEBAR === */ /* --sidebar-width is set in layouts/sidebar.css (256px / 64px collapsed) */ --sidebar-bg: #FFFFFF; /* Fond blanc pour sidebar en light mode */ --sidebar-border: #E2E8F0; /* Border claire */ --sidebar-header-border: #E2E8F0; /* Border pour header sidebar */ --logo-text-color: var(--text-primary); --sidebar-toggle-bg: var(--bg-surface-hover); --sidebar-toggle-color: var(--text-primary); --sidebar-toggle-hover-bg: var(--bg-accent); --sidebar-scrollbar-thumb: var(--border-default); --nav-item-color: var(--text-secondary); --nav-item-hover-bg: var(--bg-surface-hover); --nav-item-hover-color: var(--flowayz-navy); --nav-item-active-bg: var(--accent); --nav-item-active-color: var(--accent-contrast); --nav-item-active-accent-color: var(--accent); --nav-action-bg: var(--accent-20); --nav-action-color: var(--accent); --nav-action-border: var(--accent); --nav-action-hover-bg: var(--accent); --nav-action-hover-color: var(--accent-contrast); /* === CARDS === */ --card-bg: var(--bg-secondary); --card-text-color: var(--text-primary); --card-shadow: var(--shadow-md); --card-border: var(--border); --card-hover-shadow: var(--shadow-lg); --card-flat-border: var(--border-default); --card-flat-hover-border: var(--accent); --card-premium-bg: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); --card-premium-text-color: var(--text-primary); --card-premium-border: 2px solid #bae6fd; /* Sky blue border */ --card-premium-heading-color: var(--text-primary); --card-selected-border: var(--accent); --card-selected-shadow: var(--btn-accent-shadow); /* === FORMS === */ --form-input-color: var(--text-primary); --form-input-bg: var(--bg-tertiary); --form-input-border: var(--border); --form-input-focus-border: var(--accent); --form-input-focus-shadow: 0 0 0 3px var(--accent-10); --form-input-placeholder-color: var(--text-tertiary); --form-label-color: var(--text-primary); --form-error-color: #e53e3e; /* Red error color */ /* Form Section Headers */ --form-section-header-bg: linear-gradient(to right, var(--flowayz-cream), rgba(255, 245, 228, 0.9)); --form-section-header-color: var(--flowayz-navy); --form-section-header-border: 2px solid rgba(26, 60, 107, 0.2); --form-section-header-navy-bg: linear-gradient(to right, var(--flowayz-cream), rgba(255, 245, 228, 0.9)); --form-section-header-navy-color: var(--flowayz-navy); --form-section-header-navy-border: 2px solid rgba(26, 60, 107, 0.2); --form-section-header-teal-bg: linear-gradient(to right, var(--flowayz-cream), rgba(255, 245, 228, 0.9)); --form-section-header-teal-color: var(--flowayz-navy); --form-section-header-teal-border: 2px solid rgba(56, 178, 172, 0.2); --form-section-header-gold-bg: linear-gradient(to right, var(--flowayz-cream), rgba(255, 245, 228, 0.9)); --form-section-header-gold-color: var(--flowayz-navy); --form-section-header-gold-border: 2px solid rgba(255, 209, 102, 0.2); /* === MODALS === */ --modal-backdrop-bg: rgba(0, 0, 0, 0.5); --modal-bg: var(--bg-secondary); --modal-shadow: var(--shadow-xl); --modal-border: var(--border); --modal-text-color: var(--text-primary); /* === TABLES === */ --table-bg: var(--bg-surface); --table-text-color: var(--text-primary); --table-shadow: none; /* Tables usually don't need heavy shadows */ --table-border-color: var(--border); --table-cell-border-color: var(--border-light); --table-header-bg: var(--bg-surface-hover); --table-header-text-color: var(--text-primary); --table-row-hover-bg: var(--bg-surface-hover); /* Prose table specific variables (light mode) */ --prose-table-header-bg: linear-gradient(to bottom, var(--bg-surface-hover) 0%, var(--bg-surface) 100%); --prose-table-row-hover-bg: var(--bg-surface-hover); /* === DROPDOWNS === */ --dropdown-menu-bg: var(--bg-secondary); --dropdown-menu-shadow: var(--shadow-lg); --dropdown-menu-border: var(--border); --dropdown-item-color: var(--text-secondary); --dropdown-item-hover-bg: var(--bg-accent); --dropdown-item-hover-color: var(--accent); --dropdown-divider-bg: var(--flowayz-gray-200); /* === BREADCRUMBS === */ --breadcrumb-color: var(--flowayz-gray-600); --breadcrumb-link-color: var(--flowayz-gray-600); --breadcrumb-link-hover-color: var(--accent); --breadcrumb-active-color: var(--flowayz-navy); /* === TABS === */ --tabs-border-color: var(--flowayz-gray-200); --tab-color: var(--flowayz-gray-600); --tab-hover-color: var(--accent); --tab-active-color: var(--accent); --tab-active-border-color: var(--accent); /* === AVATARS === */ --avatar-bg: var(--accent); --avatar-text-color: var(--accent-contrast); /* === TOASTS === */ --toast-bg: var(--bg-secondary); --toast-shadow: var(--shadow-lg); --toast-border: var(--border); --toast-text-color: var(--text-primary); --toast-success-border-color: var(--flowayz-teal); --toast-error-border-color: var(--flowayz-coral); --toast-info-border-color: var(--flowayz-navy); /* === TOOLTIPS === */ --tooltip-bg: var(--flowayz-gray-900); --tooltip-text-color: white; /* === LOADING === */ --skeleton-bg-gradient: linear-gradient(90deg, var(--flowayz-gray-200) 25%, var(--flowayz-gray-100) 50%, var(--flowayz-gray-200) 75%); --loading-wave-color: var(--accent); /* === DRAG & DROP === */ --dropzone-border-color: var(--flowayz-gray-300); --dropzone-hover-border-color: var(--accent); --dropzone-hover-bg: var(--accent-5); /* === MARKDOWN PROSE === */ --markdown-preview-bg: var(--bg-surface); --markdown-preview-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); --prose-code-block-border: 1px solid rgba(203, 213, 224, 0.3); --prose-code-block-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --prose-blockquote-bg: linear-gradient(to right, rgba(56, 178, 172, 0.05) 0%, transparent 100%); --prose-blockquote-icon-color: rgba(56, 178, 172, 0.2); --prose-inline-code-border: 1px solid rgba(203, 213, 224, 0.5); --prose-inline-code-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* === LOGO VISIBILITY === */ --logo-light-display: block; --logo-dark-display: none; /* === QUOTE AI BUILDER === */ --mode-btn-ripple-bg: rgba(255, 255, 255, 0.2); --mode-btn-ai-glow-start: 0 0 20px rgba(56, 178, 172, 0.3); --mode-btn-ai-glow-end: 0 0 40px rgba(56, 178, 172, 0.6); --confidence-badge-bg-gradient: linear-gradient(135deg, var(--flowayz-teal), var(--flowayz-gold)); --mode-btn-manual-dark-border: var(--flowayz-gray-600); /* Only for dark mode */ --mode-btn-manual-dark-hover-bg: var(--flowayz-gray-700); /* Only for dark mode */ --mode-btn-manual-dark-hover-border: var(--flowayz-teal); /* Only for dark mode */ --quote-item-row-bg: var(--bg-surface); --quote-item-row-border: var(--border); --quote-item-row-hover-border: var(--flowayz-teal); --quote-item-row-hover-shadow: 0 4px 12px rgba(56, 178, 172, 0.1); /* === BADGES === */ --badge-coral-bg: rgba(255, 123, 84, 0.1); --badge-coral-text: var(--flowayz-coral); --badge-teal-bg: rgba(56, 178, 172, 0.1); --badge-teal-text: var(--flowayz-teal); --badge-gold-bg: rgba(255, 209, 102, 0.2); --badge-gold-text: var(--flowayz-gold); --badge-navy-bg: rgba(26, 60, 107, 0.1); --badge-navy-text: var(--flowayz-navy); } html.dark, [data-theme="dark"], [data-mode="dark"] { --flowayz-gold: #FDE68A; /* Amber 200 - éclairci pour contraste optimal */ /* === BUTTONS === */ /* Primary Button - Uses accent color system */ --btn-primary-bg: var(--accent); --btn-primary-text: var(--accent-contrast); --btn-primary-shadow: var(--btn-accent-shadow); --btn-primary-hover-bg: var(--accent-hover); --btn-primary-hover-shadow: var(--btn-accent-hover-shadow); /* Secondary Button */ --btn-secondary-bg: var(--flowayz-teal); --btn-secondary-text: var(--text-inverse); --btn-secondary-shadow: var(--shadow-teal); --btn-secondary-hover-bg: #2d9a94; /* Slightly darker teal */ --btn-secondary-hover-shadow: 0 6px 20px rgba(56, 178, 172, 0.4); /* Outline Button */ --btn-outline-bg: transparent; --btn-outline-text: var(--text-primary); --btn-outline-border: var(--border-default); --btn-outline-hover-bg: var(--bg-surface-hover); --btn-outline-hover-text: var(--text-primary); --btn-outline-hover-border: var(--border-default); /* Ghost Button - Uses accent color */ --btn-ghost-bg: transparent; --btn-ghost-text: var(--accent); --btn-ghost-hover-bg: var(--accent-10); /* === SIDEBAR === */ /* --sidebar-width is set in layouts/sidebar.css (256px / 64px collapsed) */ --sidebar-bg: #0A0F1C; /* Fond plus sombre pour sidebar en dark mode */ --sidebar-border: #1E293B; /* Border plus sombre */ --sidebar-header-border: #1E293B; /* Border pour header sidebar */ --logo-text-color: var(--text-primary); --sidebar-toggle-bg: var(--bg-surface-hover); --sidebar-toggle-color: var(--text-primary); --sidebar-toggle-hover-bg: var(--bg-accent); --sidebar-scrollbar-thumb: var(--border-default); --nav-item-color: var(--text-secondary); --nav-item-hover-bg: rgba(255, 255, 255, 0.05); --nav-item-hover-color: var(--text-primary); --nav-item-active-bg: var(--accent); --nav-item-active-color: var(--accent-contrast); --nav-item-active-accent-color: var(--accent); --nav-action-bg: var(--accent-20); --nav-action-color: var(--accent); --nav-action-border: var(--accent); --nav-action-hover-bg: var(--accent); --nav-action-hover-color: var(--accent-contrast); /* === CARDS === */ --card-bg: var(--bg-secondary); --card-text-color: var(--text-primary); --card-shadow: var(--shadow-md); --card-border: var(--border); --card-hover-shadow: var(--shadow-lg); --card-flat-border: var(--border-default); --card-flat-hover-border: var(--accent); --card-premium-bg: linear-gradient(135deg, var(--flowayz-navy) 0%, #2a5a9a 100%); --card-premium-text-color: var(--text-inverse); --card-premium-border: none; --card-premium-heading-color: var(--text-inverse); --card-selected-border: var(--accent); --card-selected-shadow: var(--btn-accent-shadow); /* === FORMS === */ --form-input-color: var(--text-primary); --form-input-bg: var(--bg-tertiary); --form-input-border: var(--border); --form-input-focus-border: var(--accent); --form-input-focus-shadow: 0 0 0 3px var(--accent-20); --form-input-placeholder-color: var(--text-tertiary); --form-label-color: var(--text-primary); --form-error-color: #e53e3e; /* Red error color */ /* Form Section Headers */ --form-section-header-bg: linear-gradient(to right, var(--flowayz-navy), rgba(26, 60, 107, 0.8)); --form-section-header-color: #FFFFFF; --form-section-header-border: none; --form-section-header-navy-bg: linear-gradient(to right, var(--flowayz-navy), rgba(26, 60, 107, 0.8)); --form-section-header-navy-color: #FFFFFF; --form-section-header-navy-border: none; --form-section-header-teal-bg: linear-gradient(to right, var(--flowayz-teal), rgba(56, 178, 172, 0.8)); --form-section-header-teal-color: #FFFFFF; --form-section-header-teal-border: none; --form-section-header-gold-bg: linear-gradient(to right, var(--flowayz-gold), rgba(255, 209, 102, 0.8)); --form-section-header-gold-color: #FFFFFF; --form-section-header-gold-border: none; /* === MODALS === */ --modal-backdrop-bg: rgba(0, 0, 0, 0.7); --modal-bg: var(--bg-secondary); --modal-shadow: var(--shadow-xl); --modal-border: var(--border); --modal-text-color: var(--text-primary); /* === TABLES === */ --table-bg: var(--bg-surface); --table-text-color: var(--text-primary); --table-shadow: none; --table-border-color: var(--border); --table-cell-border-color: var(--border-light); --table-header-bg: var(--bg-surface-hover); --table-header-text-color: var(--text-primary); --table-row-hover-bg: var(--bg-surface-hover); /* Prose table specific variables (dark mode) */ --prose-table-header-bg: linear-gradient(to bottom, #2d3748 0%, #1a202c 100%); --prose-table-row-hover-bg: rgba(45, 55, 72, 0.5); /* === DROPDOWNS === */ --dropdown-menu-bg: var(--bg-secondary); --dropdown-menu-shadow: var(--shadow-lg); --dropdown-menu-border: var(--border); --dropdown-item-color: var(--text-secondary); --dropdown-item-hover-bg: var(--bg-accent); --dropdown-item-hover-color: var(--accent); --dropdown-divider-bg: var(--flowayz-gray-700); /* === BREADCRUMBS === */ --breadcrumb-color: var(--text-secondary); --breadcrumb-link-color: var(--text-secondary); --breadcrumb-link-hover-color: var(--accent); --breadcrumb-active-color: var(--text-primary); /* === TABS === */ --tabs-border-color: var(--border-default); --tab-color: var(--text-secondary); --tab-hover-color: var(--accent); --tab-active-color: var(--accent); --tab-active-border-color: var(--accent); /* === AVATARS === */ --avatar-bg: var(--accent); --avatar-text-color: var(--accent-contrast); /* === TOASTS === */ --toast-bg: var(--bg-secondary); --toast-shadow: var(--shadow-lg); --toast-border: var(--border); --toast-text-color: var(--text-primary); --toast-success-border-color: var(--flowayz-teal); --toast-error-border-color: var(--flowayz-coral); --toast-info-border-color: var(--flowayz-navy); /* === TOOLTIPS === */ --tooltip-bg: var(--flowayz-gray-900); --tooltip-text-color: white; /* === LOADING === */ --skeleton-bg-gradient: linear-gradient(90deg, var(--flowayz-gray-700) 25%, var(--flowayz-gray-800) 50%, var(--flowayz-gray-700) 75%); --loading-wave-color: var(--accent); /* === DRAG & DROP === */ --dropzone-border-color: var(--flowayz-gray-600); --dropzone-hover-border-color: var(--flowayz-teal); --dropzone-hover-bg: rgba(56, 178, 172, 0.1); /* === MARKDOWN PROSE === */ --markdown-preview-bg: var(--bg-surface); --markdown-preview-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); --prose-code-block-border: 1px solid rgba(107, 114, 128, 0.3); --prose-code-block-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3); --prose-blockquote-bg: linear-gradient(to right, rgba(56, 178, 172, 0.1) 0%, transparent 100%); --prose-blockquote-icon-color: rgba(56, 178, 172, 0.4); --prose-inline-code-border: 1px solid rgba(107, 114, 128, 0.5); --prose-inline-code-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* === LOGO VISIBILITY === */ --logo-light-display: none; --logo-dark-display: block; /* === QUOTE AI BUILDER === */ --mode-btn-ripple-bg: rgba(255, 255, 255, 0.2); /* Same as light mode */ --mode-btn-ai-glow-start: 0 0 20px rgba(56, 178, 172, 0.3); /* Same as light mode */ --mode-btn-ai-glow-end: 0 0 40px rgba(56, 178, 172, 0.6); /* Same as light mode */ --confidence-badge-bg-gradient: linear-gradient(135deg, var(--flowayz-teal), var(--flowayz-gold)); /* Same as light mode */ --mode-btn-manual-dark-border: var(--flowayz-gray-600); --mode-btn-manual-dark-hover-bg: var(--flowayz-gray-700); --mode-btn-manual-dark-hover-border: var(--flowayz-teal); --quote-item-row-bg: var(--bg-surface); /* Same as light mode */ --quote-item-row-border: var(--border); /* Same as light mode */ --quote-item-row-hover-border: var(--flowayz-teal); /* Same as light mode */ --quote-item-row-hover-shadow: 0 4px 12px rgba(56, 178, 172, 0.1); /* Same as light mode */ } /* * FLOWAYZ THEME SYSTEM - UTILITY CLASSES * * Auto-adaptive utility classes for theming. * These classes automatically respond to mode (light/dark) and accent changes. * * GUIDELINES FOR DEVELOPERS: * - Use these utilities instead of hardcoded colors * - bg-accent, text-accent, border-accent adapt to user's chosen accent * - bg-surface, text-primary etc. adapt to light/dark mode */ /* ======================================== ACCENT COLOR UTILITIES ======================================== */ /* Background with accent — automatically sets contrasting text color. * GLOBAL RULE: .bg-accent always provides readable text via --accent-contrast. * To override, use an explicit color class or inline style. */ .bg-accent { background-color: var(--accent) !important; color: var(--accent-contrast) !important; } /* Ensure SVGs inside accent backgrounds inherit the contrast color */ .bg-accent svg, .bg-accent path { color: var(--accent-contrast); stroke: currentColor; } .bg-accent-50 { background-color: var(--accent-50) !important; } .bg-accent-100 { background-color: var(--accent-100) !important; } .bg-accent-200 { background-color: var(--accent-200) !important; } .bg-accent-300 { background-color: var(--accent-300) !important; } .bg-accent-400 { background-color: var(--accent-400) !important; } .bg-accent-500 { background-color: var(--accent-500) !important; } .bg-accent-600 { background-color: var(--accent-600) !important; } .bg-accent-700 { background-color: var(--accent-700) !important; } .bg-accent-800 { background-color: var(--accent-800) !important; } .bg-accent-900 { background-color: var(--accent-900) !important; } /* Semi-transparent accent backgrounds */ .bg-accent\/5 { background-color: var(--accent-5) !important; } .bg-accent\/10 { background-color: var(--accent-10) !important; } .bg-accent\/20 { background-color: var(--accent-20) !important; } .bg-accent\/30 { background-color: var(--accent-30) !important; } /* Text with accent */ .text-accent { color: var(--accent) !important; } .text-accent-50 { color: var(--accent-50) !important; } .text-accent-100 { color: var(--accent-100) !important; } .text-accent-200 { color: var(--accent-200) !important; } .text-accent-300 { color: var(--accent-300) !important; } .text-accent-400 { color: var(--accent-400) !important; } .text-accent-500 { color: var(--accent-500) !important; } .text-accent-600 { color: var(--accent-600) !important; } .text-accent-700 { color: var(--accent-700) !important; } .text-accent-800 { color: var(--accent-800) !important; } .text-accent-900 { color: var(--accent-900) !important; } .text-accent-contrast { color: var(--accent-contrast) !important; } /* Border with accent */ .border-accent { border-color: var(--accent) !important; } .border-accent-100 { border-color: var(--accent-100) !important; } .border-accent-200 { border-color: var(--accent-200) !important; } .border-accent-300 { border-color: var(--accent-300) !important; } .border-accent-500 { border-color: var(--accent-500) !important; } .border-accent-700 { border-color: var(--accent-700) !important; } /* Ring with accent (for focus states) */ .ring-accent { --tw-ring-color: var(--accent) !important; } .ring-accent-200 { --tw-ring-color: var(--accent-200) !important; } .ring-accent-500 { --tw-ring-color: var(--accent-500) !important; } /* Focus utilities */ .focus\:ring-accent:focus { --tw-ring-color: var(--accent) !important; } .focus\:border-accent:focus { border-color: var(--accent) !important; } .focus\:text-accent:focus { color: var(--accent) !important; } /* Hover utilities */ .hover\:bg-accent:hover { background-color: var(--accent) !important; color: var(--accent-contrast) !important; } .hover\:bg-accent-hover:hover { background-color: var(--accent-hover) !important; color: var(--accent-contrast) !important; } .hover\:bg-accent\/10:hover { background-color: var(--accent-10) !important; } .hover\:bg-accent\/20:hover { background-color: var(--accent-20) !important; } .hover\:text-accent:hover { color: var(--accent) !important; } .hover\:text-accent-600:hover { color: var(--accent-600) !important; } .hover\:text-accent-700:hover { color: var(--accent-700) !important; } .hover\:border-accent:hover { border-color: var(--accent) !important; } /* ======================================== SEMANTIC MODE UTILITIES (Light/Dark) ======================================== */ /* Already defined in design_tokens.css, extending here */ /* Divide colors */ .divide-default > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-default); } /* Placeholder colors */ .placeholder-tertiary::placeholder { color: var(--text-tertiary); } /* ======================================== GRADIENT UTILITIES WITH ACCENT ======================================== */ .from-accent { --tw-gradient-from: var(--accent) !important; } .to-accent { --tw-gradient-to: var(--accent) !important; } .via-accent { --tw-gradient-via: var(--accent) !important; } .from-accent-400 { --tw-gradient-from: var(--accent-400) !important; } .to-accent-600 { --tw-gradient-to: var(--accent-600) !important; } /* Brand gradient utilities - using CSS variables with fallbacks */ .bg-gradient-coral { background: linear-gradient(135deg, var(--flowayz-coral, #FF7B54) 0%, color-mix(in srgb, var(--flowayz-coral, #FF7B54) 80%, white) 100%); } .bg-gradient-teal { background: linear-gradient(135deg, var(--flowayz-teal, #38B2AC) 0%, color-mix(in srgb, var(--flowayz-teal, #38B2AC) 80%, white) 100%); } .bg-gradient-navy { background: linear-gradient(135deg, var(--flowayz-navy, #1A3C6B) 0%, color-mix(in srgb, var(--flowayz-navy, #1A3C6B) 70%, #3B82F6) 100%); } /* ======================================== SHADOW UTILITIES WITH ACCENT ======================================== */ .shadow-accent { box-shadow: 0 4px 14px 0 var(--accent-30) !important; } .shadow-accent-lg { box-shadow: 0 6px 20px var(--accent-30) !important; } /* ======================================== INTERACTIVE ELEMENT UTILITIES ======================================== */ /* Link styled with accent */ .link-accent { color: var(--accent); text-decoration: none; transition: color 0.2s ease; } .link-accent:hover { color: var(--accent-hover); text-decoration: underline; } /* Badge with accent */ .badge-accent { background-color: var(--accent-10); color: var(--accent); padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.8125rem; font-weight: 600; } /* Chip/Tag with accent */ .chip-accent { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; background-color: var(--accent-10); color: var(--accent); border-radius: 0.375rem; font-size: 0.8125rem; font-weight: 500; } /* Indicator dot with accent */ .dot-accent { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background-color: var(--accent); } /* ======================================== FORM ELEMENTS WITH ACCENT ======================================== */ /* Checkbox styled with accent */ .checkbox-accent:checked { background-color: var(--accent); border-color: var(--accent); } .checkbox-accent:focus { --tw-ring-color: var(--accent-30); } /* Radio styled with accent */ .radio-accent:checked { background-color: var(--accent); border-color: var(--accent); } /* Switch/Toggle styled with accent */ .switch-accent:checked { background-color: var(--accent); } /* Input focus with accent */ .input-accent:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-10); } /* ======================================== NAVIGATION WITH ACCENT ======================================== */ /* Nav item active state */ .nav-accent-active { background-color: var(--accent); color: var(--accent-contrast); } /* Tab active state */ .tab-accent-active { color: var(--accent); border-bottom-color: var(--accent); } /* ======================================== SELECTION COLOR ======================================== */ ::selection { background-color: var(--accent-20); } ::-moz-selection { background-color: var(--accent-20); } /* ======================================== SCROLLBAR WITH ACCENT (WebKit) ======================================== */ .scrollbar-accent::-webkit-scrollbar-thumb { background-color: var(--accent-300); border-radius: 9999px; } .scrollbar-accent::-webkit-scrollbar-thumb:hover { background-color: var(--accent-400); } /* ======================================== ANIMATIONS WITH ACCENT ======================================== */ @keyframes pulse-accent { 0%, 100% { box-shadow: 0 0 0 0 var(--accent-30); } 50% { box-shadow: 0 0 0 8px transparent; } } .animate-pulse-accent { animation: pulse-accent 2s infinite; } @keyframes ping-accent { 75%, 100% { transform: scale(2); opacity: 0; } } .animate-ping-accent { animation: ping-accent 1s cubic-bezier(0, 0, 0.2, 1) infinite; background-color: var(--accent); }