/* ============================================================ Reclaim — Theme System v2 10 dark themes + 5 light themes. Applied via data-theme="" on . ============================================================ */ /* ══════════════════════════════════════════════════════ 1. STRUCTURAL VARIABLES (backgrounds, borders, text) ══════════════════════════════════════════════════════ */ /* ── Shared dark base ── */ :root { --bg: #0a0a0f; --bg-rgb: 10, 10, 15; --bg-sec: #0f0f1a; --bg-sec-rgb: 15, 15, 26; --bg-card: #13131f; --border: #1e1e2e; --text: #e2e8f0; --text-muted: #94a3b8; --text-subtle: #64748b; } /* ── Light theme structural override ── */ [data-theme^="light-"] { --bg: #f8fafc; --bg-rgb: 248, 250, 252; --bg-sec: #f1f5f9; --bg-sec-rgb: 241, 245, 249; --bg-card: #ffffff; --border: #e2e8f0; --text: #0f172a; --text-muted: #475569; --text-subtle: #94a3b8; } /* ══════════════════════════════════════════════════════ 2. ACCENT VARIABLES per theme --accent-text = couleur de texte accent adaptée au fond ══════════════════════════════════════════════════════ */ :root, [data-theme="indigo"] { --accent: #6366f1; --accent-light: #818cf8; --accent-dark: #4f46e5; --accent-rgb: 99, 102, 241; --accent-glow: rgba(99,102,241,0.30); --accent-subtle: rgba(99,102,241,0.12); --accent-subtle2: rgba(99,102,241,0.20); --accent-text: #818cf8; } [data-theme="violet"] { --accent: #8b5cf6; --accent-light: #a78bfa; --accent-dark: #7c3aed; --accent-rgb: 139, 92, 246; --accent-glow: rgba(139,92,246,0.30); --accent-subtle: rgba(139,92,246,0.12); --accent-subtle2: rgba(139,92,246,0.20); --accent-text: #a78bfa; } [data-theme="rose"] { --accent: #f43f5e; --accent-light: #fb7185; --accent-dark: #e11d48; --accent-rgb: 244, 63, 94; --accent-glow: rgba(244,63,94,0.30); --accent-subtle: rgba(244,63,94,0.12); --accent-subtle2: rgba(244,63,94,0.20); --accent-text: #fb7185; } [data-theme="pink"] { --accent: #ec4899; --accent-light: #f472b6; --accent-dark: #db2777; --accent-rgb: 236, 72, 153; --accent-glow: rgba(236,72,153,0.30); --accent-subtle: rgba(236,72,153,0.12); --accent-subtle2: rgba(236,72,153,0.20); --accent-text: #f472b6; } [data-theme="amber"] { --accent: #f59e0b; --accent-light: #fbbf24; --accent-dark: #d97706; --accent-rgb: 245, 158, 11; --accent-glow: rgba(245,158,11,0.30); --accent-subtle: rgba(245,158,11,0.12); --accent-subtle2: rgba(245,158,11,0.20); --accent-text: #fbbf24; } [data-theme="orange"] { --accent: #f97316; --accent-light: #fb923c; --accent-dark: #ea580c; --accent-rgb: 249, 115, 22; --accent-glow: rgba(249,115,22,0.30); --accent-subtle: rgba(249,115,22,0.12); --accent-subtle2: rgba(249,115,22,0.20); --accent-text: #fb923c; } [data-theme="emerald"] { --accent: #10b981; --accent-light: #34d399; --accent-dark: #059669; --accent-rgb: 16, 185, 129; --accent-glow: rgba(16,185,129,0.30); --accent-subtle: rgba(16,185,129,0.12); --accent-subtle2: rgba(16,185,129,0.20); --accent-text: #34d399; } [data-theme="teal"] { --accent: #14b8a6; --accent-light: #2dd4bf; --accent-dark: #0d9488; --accent-rgb: 20, 184, 166; --accent-glow: rgba(20,184,166,0.30); --accent-subtle: rgba(20,184,166,0.12); --accent-subtle2: rgba(20,184,166,0.20); --accent-text: #2dd4bf; } [data-theme="cyan"] { --accent: #06b6d4; --accent-light: #22d3ee; --accent-dark: #0891b2; --accent-rgb: 6, 182, 212; --accent-glow: rgba(6,182,212,0.30); --accent-subtle: rgba(6,182,212,0.12); --accent-subtle2: rgba(6,182,212,0.20); --accent-text: #22d3ee; } [data-theme="sky"] { --accent: #0ea5e9; --accent-light: #38bdf8; --accent-dark: #0284c7; --accent-rgb: 14, 165, 233; --accent-glow: rgba(14,165,233,0.30); --accent-subtle: rgba(14,165,233,0.12); --accent-subtle2: rgba(14,165,233,0.20); --accent-text: #38bdf8; } /* ── Light theme accents (darker text variant) ── */ [data-theme="light-indigo"] { --accent: #6366f1; --accent-light: #818cf8; --accent-dark: #4f46e5; --accent-rgb: 99, 102, 241; --accent-glow: rgba(99,102,241,0.20); --accent-subtle: rgba(99,102,241,0.08); --accent-subtle2: rgba(99,102,241,0.14); --accent-text: #4f46e5; } [data-theme="light-rose"] { --accent: #f43f5e; --accent-light: #fb7185; --accent-dark: #e11d48; --accent-rgb: 244, 63, 94; --accent-glow: rgba(244,63,94,0.20); --accent-subtle: rgba(244,63,94,0.08); --accent-subtle2: rgba(244,63,94,0.14); --accent-text: #e11d48; } [data-theme="light-emerald"] { --accent: #10b981; --accent-light: #34d399; --accent-dark: #059669; --accent-rgb: 16, 185, 129; --accent-glow: rgba(16,185,129,0.20); --accent-subtle: rgba(16,185,129,0.08); --accent-subtle2: rgba(16,185,129,0.14); --accent-text: #059669; } [data-theme="light-amber"] { --accent: #f59e0b; --accent-light: #fbbf24; --accent-dark: #d97706; --accent-rgb: 245, 158, 11; --accent-glow: rgba(245,158,11,0.20); --accent-subtle: rgba(245,158,11,0.08); --accent-subtle2: rgba(245,158,11,0.14); --accent-text: #b45309; } [data-theme="light-sky"] { --accent: #0ea5e9; --accent-light: #38bdf8; --accent-dark: #0284c7; --accent-rgb: 14, 165, 233; --accent-glow: rgba(14,165,233,0.20); --accent-subtle: rgba(14,165,233,0.08); --accent-subtle2: rgba(14,165,233,0.14); --accent-text: #0284c7; } /* ══════════════════════════════════════════════════════ 3. UTILITY CLASSES ══════════════════════════════════════════════════════ */ /* ── Backgrounds ── */ .t-bg { background: var(--bg); } .t-bg-sec { background: var(--bg-sec); } .t-bg-card { background: var(--bg-card); } /* ── Card ── */ .t-card, .card { background: var(--bg-card); border: 1px solid var(--border); } /* ── Sidebar ── */ .t-sidebar { background: var(--bg-sec); border-right: 1px solid var(--border); } /* ── Floating sidebar (desktop) ── */ @media (min-width: 1024px) { .t-sidebar { top: 0.75rem !important; left: 0.75rem !important; height: calc(100% - 1.5rem) !important; width: 4.5rem !important; border-radius: 1.25rem; border: 1px solid var(--border); border-right: 1px solid var(--border); background: rgba(var(--bg-sec-rgb), 0.82); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.04); overflow: hidden; transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .t-sidebar:hover { width: 15.5rem !important; } /* Nav icons — centered when collapsed */ .t-sidebar .sidebar-icon { flex-shrink: 0; width: 1.5rem; text-align: center; } /* Nav text labels — fade in/out */ .t-sidebar .sidebar-label { opacity: 0; max-width: 0; overflow: hidden; white-space: nowrap; transition: opacity 0.15s ease, max-width 0.25s ease; } .t-sidebar:hover .sidebar-label { opacity: 1; max-width: 13rem; transition: opacity 0.25s ease 0.1s, max-width 0.35s ease 0.05s; } /* Collapsible sections (quota, admin label, user details) */ .t-sidebar .sidebar-collapse { opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.15s ease, max-height 0.2s ease; } .t-sidebar:hover .sidebar-collapse { opacity: 1; max-height: 250px; transition: opacity 0.25s ease 0.15s, max-height 0.35s ease 0.1s; } /* Logo text — hide when collapsed */ .t-sidebar .sidebar-logo-full { opacity: 0; max-width: 0; overflow: hidden; transition: opacity 0.2s ease, max-width 0.25s ease; } .t-sidebar:hover .sidebar-logo-full { opacity: 1; max-width: 10rem; transition: opacity 0.25s ease 0.12s, max-width 0.35s ease 0.05s; } /* Language switcher — scales with sidebar */ .sidebar-lang-btn { font-size: 9px; padding: 2px 5px; line-height: 1; transition: font-size 0.25s ease, padding 0.25s ease; } .t-sidebar:hover .sidebar-lang-btn { font-size: 11px; padding: 3px 8px; } /* Main content push — only collapsed width */ .sidebar-main-push { padding-left: 6rem; } } @media (max-width: 1023px) { .sidebar-main-push { padding-left: 0; } } /* ── Topbar ── */ .t-topbar { background: rgba(var(--bg-rgb), 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } /* ── Borders ── */ .t-border { border-color: var(--border) !important; } .t-border-top { border-top-color: var(--border) !important; } .t-border-bottom { border-bottom-color: var(--border) !important; } .t-divide > * + * { border-top: 1px solid var(--border); } /* ── Text ── */ .t-text { color: var(--text); } .t-text-muted { color: var(--text-muted); } .t-text-subtle { color: var(--text-subtle); } .t-text-accent { color: var(--accent-text); } .t-text-accent-hover:hover { color: var(--accent-text); } /* ── Accent backgrounds ── */ .t-accent-bg { background: linear-gradient(135deg, var(--accent), var(--accent-light)); } .t-accent-bg-subtle { background: var(--accent-subtle); } /* ── Sidebar nav items ── */ .t-sidebar-item { transition: background .15s, color .15s; } .t-sidebar-item:hover, .t-sidebar-item.active { background: var(--accent-subtle); color: var(--accent-text); } /* Desktop: center icons when sidebar is collapsed */ @media (min-width: 1024px) { .t-sidebar-item { justify-content: center; padding-left: 0; padding-right: 0; gap: 0 !important; transition: background .15s, color .15s, gap .25s, padding .25s; } .t-sidebar:hover .t-sidebar-item { justify-content: flex-start; padding-left: 0.75rem; padding-right: 0.75rem; gap: 0.75rem !important; } } /* ── Buttons ── */ .t-btn-primary, .btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-light)); color: #fff; transition: opacity .2s, transform .2s, box-shadow .2s; } .t-btn-primary:hover, .btn-primary:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 8px 25px var(--accent-glow); } /* ── Focus ── */ .t-focus:focus { outline: none; box-shadow: 0 0 0 3px var(--accent-glow); } /* ── Inputs (focus — all themes) ── */ input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-glow) !important; } /* ── Progress bar ── */ .t-progress { background: var(--accent); } /* ── Glass ── */ .t-glass, .glass { background: rgba(var(--bg-sec-rgb), 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--accent-subtle); } /* ── Gradient text ── */ .t-gradient-text, .gradient-text { background: linear-gradient(135deg, var(--accent), var(--accent-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Skeleton ── */ .t-skeleton, .skeleton { background: linear-gradient(90deg, var(--bg-card) 25%, var(--border) 50%, var(--bg-card) 75%); background-size: 200% 100%; animation: t-shimmer 1.5s infinite; border-radius: 8px; } @keyframes t-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } } /* ── Pulse glow ── */ .t-pulse-glow { animation: t-pulseGlow 2s ease-in-out infinite; } @keyframes t-pulseGlow { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 20px 4px var(--accent-glow); } } /* ── Divider / separator line ── */ .t-border-line { background: var(--border); height: 1px; } /* ── Auth brand buttons (Google/Microsoft/LinkedIn) — always white text ── */ .auth-brand-btn { color: #fff !important; } .auth-brand-btn span { color: #fff !important; } /* ── Scrollbar ── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent-subtle2); } /* ── Selection ── */ ::selection { background: var(--accent-subtle2); color: var(--text); } /* ── Theme swatch (picker) ── */ .theme-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; transition: transform .15s, border-color .15s, box-shadow .15s; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 10px; } .theme-swatch:hover { transform: scale(1.18); } .theme-swatch.is-active { border-color: white; box-shadow: 0 0 0 2px var(--accent); } /* ══════════════════════════════════════════════════════ 4. LIGHT MODE — Global overrides for Tailwind classes Ensures existing views render correctly in light mode ══════════════════════════════════════════════════════ */ [data-theme^="light-"] { color-scheme: light; } /* Body default */ [data-theme^="light-"] body { background: var(--bg); color: var(--text); } /* Override Tailwind dark text classes */ [data-theme^="light-"] .text-white, [data-theme^="light-"] .text-slate-50, [data-theme^="light-"] .text-slate-100, [data-theme^="light-"] .text-slate-200 { color: var(--text) !important; } /* Exception: FullCalendar block events always keep white text (colored bg) */ [data-theme^="light-"] .fc .fc-daygrid-block-event .fc-event-title, [data-theme^="light-"] .fc .fc-daygrid-block-event .fc-event-time, [data-theme^="light-"] .fc .fc-h-event .fc-event-title, [data-theme^="light-"] .fc .fc-h-event .fc-event-time, [data-theme^="light-"] .fc .fc-v-event .fc-event-title, [data-theme^="light-"] .fc .fc-v-event .fc-event-time { color: #fff !important; } [data-theme^="light-"] .text-slate-300, [data-theme^="light-"] .text-slate-400 { color: var(--text-muted) !important; } [data-theme^="light-"] .text-slate-500, [data-theme^="light-"] .text-slate-600 { color: var(--text-subtle) !important; } /* Override dark backgrounds to card background */ [data-theme^="light-"] .bg-white\/5 { background: rgba(0,0,0,0.04) !important; } [data-theme^="light-"] .bg-white\/10 { background: rgba(0,0,0,0.06) !important; } [data-theme^="light-"] .hover\:bg-white\/5:hover { background: rgba(0,0,0,0.04) !important; } [data-theme^="light-"] .hover\:bg-white\/10:hover { background: rgba(0,0,0,0.06) !important; } /* Override black overlay on mobile sidebar */ [data-theme^="light-"] .bg-black\/60 { background: rgba(0,0,0,0.4) !important; } /* Accent text classes */ [data-theme^="light-"] .text-indigo-300, [data-theme^="light-"] .text-indigo-400 { color: var(--accent-text) !important; } /* Status badges — light mode variants */ [data-theme^="light-"] .status-draft { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; } [data-theme^="light-"] .status-generated { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; } [data-theme^="light-"] .status-sent { background: #faf5ff; color: #9333ea; border-color: #e9d5ff; } [data-theme^="light-"] .status-resolved { background: #f0fdfa; color: #0d9488; border-color: #99f6e4; } [data-theme^="light-"] .status-archived { background: #f8fafc; color: #475569; border-color: #e2e8f0; } /* Flash messages background in light mode */ [data-theme^="light-"] .bg-green-900\/30 { background: rgba(220,252,231,0.8) !important; } [data-theme^="light-"] .bg-red-900\/30 { background: rgba(254,226,226,0.8) !important; } [data-theme^="light-"] .text-green-300 { color: #15803d !important; } [data-theme^="light-"] .text-red-300 { color: #b91c1c !important; } [data-theme^="light-"] .border-green-800 { border-color: #86efac !important; } [data-theme^="light-"] .border-red-800 { border-color: #fca5a5 !important; } /* Toast overrides for light mode */ [data-theme^="light-"] .bg-green-900\/90 { background: rgba(220,252,231,0.95) !important; } [data-theme^="light-"] .bg-red-900\/90 { background: rgba(254,226,226,0.95) !important; } [data-theme^="light-"] .border-green-700 { border-color: #86efac !important; } [data-theme^="light-"] .border-red-700 { border-color: #fca5a5 !important; } [data-theme^="light-"] .text-green-200 { color: #166534 !important; } [data-theme^="light-"] .text-red-200 { color: #991b1b !important; } /* Plan badge in light mode */ [data-theme^="light-"] .bg-slate-800 { background: #f1f5f9 !important; } [data-theme^="light-"] .border-slate-700 { border-color: #cbd5e1 !important; } [data-theme^="light-"] .text-slate-400 { color: var(--text-subtle) !important; } /* Logout button in light mode */ [data-theme^="light-"] .hover\:bg-red-900\/20:hover { background: rgba(254,226,226,0.6) !important; } [data-theme^="light-"] .text-red-400 { color: #dc2626 !important; } /* ══════════════════════════════════════════════════════ 5. LIGHT MODE — Inputs & form elements Covers all inputs regardless of how they're styled (Tailwind arbitrary values, inline styles, etc.) ══════════════════════════════════════════════════════ */ /* ── Base reset for all inputs in light mode ── */ [data-theme^="light-"] input, [data-theme^="light-"] input[type="text"], [data-theme^="light-"] input[type="email"], [data-theme^="light-"] input[type="password"], [data-theme^="light-"] input[type="number"], [data-theme^="light-"] input[type="search"], [data-theme^="light-"] input[type="tel"], [data-theme^="light-"] input[type="url"], [data-theme^="light-"] input[type="date"], [data-theme^="light-"] input[type="datetime-local"], [data-theme^="light-"] textarea, [data-theme^="light-"] select { background: var(--bg-card) !important; border-color: var(--border) !important; color: var(--text) !important; } /* ── Checkboxes & radios — accent color ── */ [data-theme^="light-"] input[type="checkbox"], [data-theme^="light-"] input[type="radio"] { accent-color: var(--accent); } /* ── Placeholders ── */ [data-theme^="light-"] input::placeholder, [data-theme^="light-"] textarea::placeholder { color: var(--text-subtle) !important; opacity: 1; } /* ── Select arrow ── */ [data-theme^="light-"] select option { background: var(--bg-card); color: var(--text); } /* ── Labels ── */ [data-theme^="light-"] label { color: var(--text) !important; } /* ── Override common Tailwind bg classes used on inputs/containers ── */ [data-theme^="light-"] .bg-\[\#0a0a0f\], [data-theme^="light-"] .bg-\[\#0f0f1a\], [data-theme^="light-"] .bg-\[\#13131f\], [data-theme^="light-"] .bg-\[\#08080f\], [data-theme^="light-"] .bg-\[\#0d0d18\] { background: var(--bg-card) !important; color: var(--text) !important; } /* ── #1e1e2e used as bg (divider lines, view-toggles) ── */ [data-theme^="light-"] .bg-\[\#1e1e2e\] { background: var(--border) !important; } /* Common Tailwind slate dark bg overrides */ [data-theme^="light-"] .bg-slate-900, [data-theme^="light-"] .bg-slate-800, [data-theme^="light-"] .bg-slate-700 { background: var(--bg-sec) !important; color: var(--text) !important; } /* ── Border color overrides on inputs ── */ [data-theme^="light-"] .border-\[\#1e1e2e\], [data-theme^="light-"] .border-slate-700, [data-theme^="light-"] .border-slate-600 { border-color: var(--border) !important; } /* ── Ring/focus overrides ── */ [data-theme^="light-"] .ring-\[\#1e1e2e\], [data-theme^="light-"] .focus\:ring-slate-700:focus { --tw-ring-color: var(--accent-glow) !important; } /* ── Disabled state ── */ [data-theme^="light-"] input:disabled, [data-theme^="light-"] textarea:disabled, [data-theme^="light-"] select:disabled { background: var(--bg-sec) !important; color: var(--text-subtle) !important; cursor: not-allowed; opacity: 0.6; } /* ── Read-only state ── */ [data-theme^="light-"] input:read-only, [data-theme^="light-"] textarea:read-only { background: rgba(var(--bg-sec-rgb), 0.6) !important; color: var(--text-muted) !important; } /* ══════════════════════════════════════════════════════ 6. LIGHT MODE — Inline style overrides CSS attribute selectors override inline style="" (author !important > inline without !important) ══════════════════════════════════════════════════════ */ /* ── Dark background hex values (card/container level) ── */ [data-theme^="light-"] [style*="background:#0a0a0f"], [data-theme^="light-"] [style*="background: #0a0a0f"], [data-theme^="light-"] [style*="background:#08080f"], [data-theme^="light-"] [style*="background: #08080f"] { background: var(--bg) !important; color: var(--text) !important; } [data-theme^="light-"] [style*="background:#0f0f1a"], [data-theme^="light-"] [style*="background: #0f0f1a"] { background: var(--bg-sec) !important; color: var(--text) !important; } [data-theme^="light-"] [style*="background:#13131f"], [data-theme^="light-"] [style*="background: #13131f"] { background: var(--bg-card) !important; color: var(--text) !important; } [data-theme^="light-"] [style*="background:#1e1e2e"], [data-theme^="light-"] [style*="background: #1e1e2e"] { background: var(--border) !important; } /* ── rgba() dark backgrounds ── */ [data-theme^="light-"] [style*="background:rgba(10,10,15"], [data-theme^="light-"] [style*="background: rgba(10,10,15"], [data-theme^="light-"] [style*="background:rgba(10, 10, 15"], [data-theme^="light-"] [style*="background:rgba(8,8,15"], [data-theme^="light-"] [style*="background: rgba(8,8,15"] { background: rgba(var(--bg-rgb), 0.92) !important; } /* ── Dark gradient backgrounds ── */ [data-theme^="light-"] [style*="background:radial-gradient"], [data-theme^="light-"] [style*="background: radial-gradient"] { background: radial-gradient(ellipse at top, var(--bg-card) 0%, var(--bg) 70%) !important; } /* ── border-color inline overrides ── */ [data-theme^="light-"] [style*="border:1px solid #1e1e2e"], [data-theme^="light-"] [style*="border: 1px solid #1e1e2e"] { border-color: var(--border) !important; } [data-theme^="light-"] [style*="border-right:1px solid #1e1e2e"], [data-theme^="light-"] [style*="border-right: 1px solid #1e1e2e"], [data-theme^="light-"] [style*="border-bottom:1px solid #1e1e2e"], [data-theme^="light-"] [style*="border-bottom: 1px solid #1e1e2e"] { border-color: var(--border) !important; } /* ── Inline color overrides ── */ [data-theme^="light-"] [style*="color:#fff"], [data-theme^="light-"] [style*="color: #fff"], [data-theme^="light-"] [style*="color:#ffffff"], [data-theme^="light-"] [style*="color: #ffffff"], [data-theme^="light-"] [style*="color:#e2e8f0"], [data-theme^="light-"] [style*="color: #e2e8f0"], [data-theme^="light-"] [style*="color:#cbd5e1"], [data-theme^="light-"] [style*="color: #cbd5e1"] { color: var(--text) !important; } [data-theme^="light-"] [style*="color:#94a3b8"], [data-theme^="light-"] [style*="color: #94a3b8"] { color: var(--text-muted) !important; } /* ── Exception: gradient text & accent elements keep white text ── */ [data-theme^="light-"] .t-accent-bg [style*="color:#fff"], [data-theme^="light-"] .t-accent-bg [style*="color: #fff"], [data-theme^="light-"] .btn-primary [style*="color:#fff"] { color: #fff !important; }