/* =================================================================== 1page.info brand color override for the admin/provider/seo/team dashboard theme. The vendor tailwind.css build (theme/assets/css/ tailwind.css) ships Tailwind's default sky/blue/purple/indigo/teal/ pink palette as the dashboard's accent colors; this file remaps those exact utility classes to the platform brand palette: sky -> Orange #FF6A00 (Search: primary actions/links) purple / indigo / pink -> Violet #8B5CF6 (Express: identity/AI features) teal / emerald / green -> Green #00C853 (Grow: secondary/success accents) orange (Tailwind's own)-> Orange #FF6A00 (aligns stock Tailwind orange to the exact brand hex) rose -> Error #EF4444 (aliases Tailwind's own red hexes) yellow -> Warning #F59E0B (aliases Tailwind's own amber hexes) slate (plain, non-dark)-> Gray (aliases Tailwind's own gray hexes) `blue-*` is intentionally NOT remapped: Tailwind's native blue-500/blue-50 (#3b82f6 / #eff6ff) already equal the design system's "Information" status color exactly, and several genuine info boxes (2FA notices, unread- notification highlights) rely on it staying blue. An earlier version of this file mapped blue-* to orange alongside sky-*, which incorrectly tinted those info boxes orange — fixed by leaving blue-* alone. red-*, amber-*, and gray-* are also left untouched: they already equal the design system's Error (#EF4444), Warning (#F59E0B/#FFFBEB), and neutral gray scale exactly, so no override is needed. Loaded after tailwind.css / style.css / dark-mode-fixes.css (see layouts/app.blade.php), so every rule below uses !important to win over the single-class vendor selectors, matching the precedent set by dark-mode-fixes.css. dark: variants are written as `html.dark .dark\:...` rather than an OS `@media` query, because the app always adds the `.dark` class on whenever dark mode should be active (see the inline script in layouts/app.blade.php), so the class-based selector alone covers every real case. =================================================================== */ :root { --brand-orange-50: #fff8f2; --brand-orange-100: #ffede0; --brand-orange-200: #ffd2b3; --brand-orange-300: #ffb580; --brand-orange-400: #ff8f40; --brand-orange-500: #ff6a00; --brand-orange-600: #eb6200; --brand-orange-700: #cc5500; --brand-orange-800: #a64500; --brand-orange-900: #803500; --brand-violet-50: #f5f3ff; --brand-violet-100: #ede9fe; --brand-violet-200: #ddd6fe; --brand-violet-300: #c4b5fd; --brand-violet-400: #a78bfa; --brand-violet-500: #8b5cf6; --brand-violet-600: #7c3aed; --brand-violet-700: #6d28d9; --brand-violet-800: #5b21b6; --brand-violet-900: #4c1d95; --brand-green-50: #f2fcf6; --brand-green-100: #e0f8ea; --brand-green-200: #b3efcb; --brand-green-300: #80e4a9; --brand-green-400: #40d67e; --brand-green-500: #00c853; --brand-green-600: #00b84c; --brand-green-700: #00a042; --brand-green-800: #008236; --brand-green-900: #00642a; /* Reference ramps for families we ALIAS rather than rebrand: these are Tailwind's own red/amber/gray hexes, reused as-is because they already equal the design system's Error/Warning/neutral values exactly. */ --ref-red-50: #fef2f2; --ref-red-100: #fee2e2; --ref-red-200: #fecaca; --ref-red-300: #fca5a5; --ref-red-400: #f87171; --ref-red-500: #ef4444; --ref-red-600: #dc2626; --ref-red-700: #b91c1c; --ref-red-800: #991b1b; --ref-red-900: #7f1d1d; --ref-amber-50: #fffbeb; --ref-amber-100: #fef3c7; --ref-amber-200: #fde68a; --ref-amber-300: #fcd34d; --ref-amber-400: #fbbf24; --ref-amber-500: #f59e0b; --ref-amber-600: #d97706; --ref-amber-700: #b45309; --ref-amber-800: #92400e; --ref-amber-900: #78350f; --ref-gray-50: #f9fafb; --ref-gray-100: #f3f4f6; --ref-gray-200: #e5e7eb; --ref-gray-300: #d1d5db; --ref-gray-400: #9ca3af; --ref-gray-500: #6b7280; --ref-gray-600: #4b5563; --ref-gray-700: #374151; --ref-gray-800: #1f2937; --ref-gray-900: #111827; /* The vendor tailwind.css build's OWN semantic "primary" token — consumed by .bg-primary/.text-primary/.border-primary (tailwind.css:598-611) — defaults to sky-600 (rgb 2 132 199). Redefining it here (values are space-separated RGB components, matching the vendor's own format so rgb(var(--color-primary) / ) keeps working) makes every .bg-primary/.text-primary/.border-primary usage platform-wide resolve to brand orange with zero class-list edits needed. */ --color-primary: 255 106 0; --color-primary-soft: 255 237 224; /* Space-separated RGB triplets for the "-900" shade of each brand family, used below to cover Tailwind's opacity-modifier classes (e.g. bg-sky-900/20) that the exact-hex rules above don't match, since each modifier compiles to its own literal class name. */ --brand-orange-900-rgb: 128 53 0; --brand-violet-900-rgb: 76 29 149; --brand-green-900-rgb: 0 100 42; } .dark { --color-primary-soft: 55 65 81; } /* ============================= ORANGE (sky + blue) ============================= */ .accent-sky-600 { accent-color: var(--brand-orange-600) !important; } .accent-blue-600 { accent-color: var(--brand-orange-500) !important; } .has-\[\:checked\]\:border-orange-500:has(:checked) { border-color: var(--brand-orange-500) !important; } .has-\[\:checked\]\:bg-orange-50:has(:checked) { background-color: var(--brand-orange-50) !important; } .bg-sky-50 { background-color: var(--brand-orange-50) !important; } .bg-sky-100 { background-color: var(--brand-orange-100) !important; } .bg-sky-400 { background-color: var(--brand-orange-400) !important; } .bg-sky-500 { background-color: var(--brand-orange-500) !important; } .bg-sky-600 { background-color: var(--brand-orange-600) !important; } .border-sky-100 { border-color: var(--brand-orange-100) !important; } .border-sky-200 { border-color: var(--brand-orange-200) !important; } .border-sky-300 { border-color: var(--brand-orange-300) !important; } .border-sky-400 { border-color: var(--brand-orange-400) !important; } .border-sky-500 { border-color: var(--brand-orange-500) !important; } .ring-sky-200 { --tw-ring-color: var(--brand-orange-200) !important; } .ring-sky-400 { --tw-ring-color: var(--brand-orange-400) !important; } .ring-sky-500 { --tw-ring-color: var(--brand-orange-500) !important; } .from-sky-500 { --tw-gradient-from: var(--brand-orange-500) !important; --tw-gradient-to: rgb(255 106 0 / 0) !important; } .text-sky-300 { color: var(--brand-orange-300) !important; } .text-sky-500 { color: var(--brand-orange-500) !important; } .text-sky-600 { color: var(--brand-orange-600) !important; } .text-sky-700 { color: var(--brand-orange-700) !important; } .text-sky-800 { color: var(--brand-orange-800) !important; } .text-sky-900 { color: var(--brand-orange-900) !important; } .hover\:bg-sky-50:hover { background-color: var(--brand-orange-50) !important; } .hover\:bg-sky-100:hover { background-color: var(--brand-orange-100) !important; } .hover\:bg-sky-700:hover { background-color: var(--brand-orange-700) !important; } .hover\:border-sky-300:hover { border-color: var(--brand-orange-300) !important; } .hover\:border-sky-400:hover { border-color: var(--brand-orange-400) !important; } .hover\:text-sky-600:hover { color: var(--brand-orange-600) !important; } .hover\:text-sky-800:hover { color: var(--brand-orange-800) !important; } .focus\:border-sky-400:focus { border-color: var(--brand-orange-400) !important; } .focus\:border-sky-500:focus { border-color: var(--brand-orange-500) !important; } .focus\:ring-sky-500:focus { --tw-ring-color: var(--brand-orange-500) !important; } html.dark .dark\:bg-sky-900 { background-color: var(--brand-orange-900) !important; } html.dark .dark\:border-sky-500 { border-color: var(--brand-orange-500) !important; } html.dark .dark\:border-sky-700 { border-color: var(--brand-orange-700) !important; } html.dark .dark\:border-sky-800 { border-color: var(--brand-orange-800) !important; } html.dark .dark\:border-sky-900 { border-color: var(--brand-orange-900) !important; } html.dark .dark\:ring-sky-800 { --tw-ring-color: var(--brand-orange-800) !important; } html.dark .dark\:text-sky-200 { color: var(--brand-orange-200) !important; } html.dark .dark\:text-sky-300 { color: var(--brand-orange-300) !important; } html.dark .dark\:text-sky-400 { color: var(--brand-orange-400) !important; } html.dark .dark\:hover\:bg-sky-900:hover { background-color: var(--brand-orange-900) !important; } html.dark .dark\:hover\:border-sky-500:hover { border-color: var(--brand-orange-500) !important; } html.dark .dark\:hover\:border-sky-600:hover { border-color: var(--brand-orange-600) !important; } html.dark .dark\:hover\:text-sky-400:hover { color: var(--brand-orange-400) !important; } .group:hover .group-hover\:bg-sky-100 { background-color: var(--brand-orange-100) !important; } .group:hover .group-hover\:text-sky-600 { color: var(--brand-orange-600) !important; } html.dark .group:hover .dark\:group-hover\:bg-sky-900 { background-color: var(--brand-orange-900) !important; } html.dark .group:hover .dark\:group-hover\:text-sky-400 { color: var(--brand-orange-400) !important; } .file\:bg-sky-50::file-selector-button { background-color: var(--brand-orange-50) !important; } .file\:text-sky-700::file-selector-button { color: var(--brand-orange-700) !important; } .hover\:file\:bg-sky-100:hover::file-selector-button { background-color: var(--brand-orange-100) !important; } .focus-within\:border-sky-400:focus-within { border-color: var(--brand-orange-400) !important; } .focus-within\:border-sky-500:focus-within { border-color: var(--brand-orange-500) !important; } .focus-within\:ring-sky-500:focus-within { --tw-ring-color: var(--brand-orange-500) !important; } .peer:checked ~ .peer-checked\:bg-sky-600 { background-color: var(--brand-orange-600) !important; } .peer:focus ~ .peer-focus\:ring-sky-300 { --tw-ring-color: var(--brand-orange-300) !important; } /* ============================= VIOLET (purple + indigo + pink) ============================= */ .bg-purple-50 { background-color: var(--brand-violet-50) !important; } .bg-purple-100 { background-color: var(--brand-violet-100) !important; } .bg-purple-600 { background-color: var(--brand-violet-600) !important; } .bg-indigo-50 { background-color: var(--brand-violet-50) !important; } .bg-pink-50 { background-color: var(--brand-violet-50) !important; } .border-purple-200 { border-color: var(--brand-violet-200) !important; } .border-indigo-200 { border-color: var(--brand-violet-200) !important; } .to-purple-500 { --tw-gradient-to: var(--brand-violet-500) !important; } .text-purple-500 { color: var(--brand-violet-500) !important; } .text-purple-600 { color: var(--brand-violet-600) !important; } .text-purple-700 { color: var(--brand-violet-700) !important; } .text-purple-800 { color: var(--brand-violet-800) !important; } .text-indigo-500 { color: var(--brand-violet-500) !important; } .text-indigo-600 { color: var(--brand-violet-600) !important; } .text-indigo-700 { color: var(--brand-violet-700) !important; } .text-indigo-800 { color: var(--brand-violet-800) !important; } .text-pink-600 { color: var(--brand-violet-600) !important; } .text-pink-700 { color: var(--brand-violet-700) !important; } .hover\:bg-purple-200:hover { background-color: var(--brand-violet-200) !important; } .hover\:bg-purple-700:hover { background-color: var(--brand-violet-700) !important; } .hover\:bg-indigo-100:hover { background-color: var(--brand-violet-100) !important; } .hover\:text-indigo-800:hover { color: var(--brand-violet-800) !important; } .focus\:border-purple-500:focus { border-color: var(--brand-violet-500) !important; } html.dark .dark\:bg-purple-900 { background-color: var(--brand-violet-900) !important; } html.dark .dark\:bg-indigo-900 { background-color: var(--brand-violet-900) !important; } html.dark .dark\:bg-pink-900 { background-color: var(--brand-violet-900) !important; } html.dark .dark\:border-purple-700 { border-color: var(--brand-violet-700) !important; } html.dark .dark\:border-purple-800 { border-color: var(--brand-violet-800) !important; } html.dark .dark\:border-indigo-700 { border-color: var(--brand-violet-700) !important; } html.dark .dark\:text-purple-300 { color: var(--brand-violet-300) !important; } html.dark .dark\:text-purple-400 { color: var(--brand-violet-400) !important; } html.dark .dark\:text-indigo-300 { color: var(--brand-violet-300) !important; } html.dark .dark\:text-indigo-400 { color: var(--brand-violet-400) !important; } html.dark .dark\:text-pink-300 { color: var(--brand-violet-300) !important; } html.dark .dark\:hover\:bg-indigo-900:hover { background-color: var(--brand-violet-900) !important; } /* ============================= GREEN (teal + emerald + green) ============================= */ .bg-teal-50 { background-color: var(--brand-green-50) !important; } .bg-teal-500 { background-color: var(--brand-green-500) !important; } .bg-teal-600 { background-color: var(--brand-green-600) !important; } .text-teal-600 { color: var(--brand-green-600) !important; } .text-teal-700 { color: var(--brand-green-700) !important; } .to-teal-50 { --tw-gradient-to: var(--brand-green-50) !important; } html.dark .dark\:bg-teal-900 { background-color: var(--brand-green-900) !important; } html.dark .dark\:text-teal-300 { color: var(--brand-green-300) !important; } html.dark .dark\:to-teal-900 { --tw-gradient-to: var(--brand-green-900) !important; } /* emerald-* and green-* (Tailwind's own) get full-ramp coverage — these are the dominant "success"/"verified" color families in the admin views. */ .bg-emerald-50 , .bg-green-50 { background-color: var(--brand-green-50) !important; } .bg-emerald-100 , .bg-green-100 { background-color: var(--brand-green-100) !important; } .bg-emerald-200 , .bg-green-200 { background-color: var(--brand-green-200) !important; } .bg-emerald-300 , .bg-green-300 { background-color: var(--brand-green-300) !important; } .bg-emerald-400 , .bg-green-400 { background-color: var(--brand-green-400) !important; } .bg-emerald-500 , .bg-green-500 { background-color: var(--brand-green-500) !important; } .bg-emerald-600 , .bg-green-600 { background-color: var(--brand-green-600) !important; } .bg-emerald-700 , .bg-green-700 { background-color: var(--brand-green-700) !important; } .bg-emerald-800 , .bg-green-800 { background-color: var(--brand-green-800) !important; } .bg-emerald-900 , .bg-green-900 { background-color: var(--brand-green-900) !important; } .text-emerald-50 , .text-green-50 { color: var(--brand-green-50) !important; } .text-emerald-100 , .text-green-100 { color: var(--brand-green-100) !important; } .text-emerald-200 , .text-green-200 { color: var(--brand-green-200) !important; } .text-emerald-300 , .text-green-300 { color: var(--brand-green-300) !important; } .text-emerald-400 , .text-green-400 { color: var(--brand-green-400) !important; } .text-emerald-500 , .text-green-500 { color: var(--brand-green-500) !important; } .text-emerald-600 , .text-green-600 { color: var(--brand-green-600) !important; } .text-emerald-700 , .text-green-700 { color: var(--brand-green-700) !important; } .text-emerald-800 , .text-green-800 { color: var(--brand-green-800) !important; } .text-emerald-900 , .text-green-900 { color: var(--brand-green-900) !important; } .border-emerald-50 , .border-green-50 { border-color: var(--brand-green-50) !important; } .border-emerald-100 , .border-green-100 { border-color: var(--brand-green-100) !important; } .border-emerald-200 , .border-green-200 { border-color: var(--brand-green-200) !important; } .border-emerald-300 , .border-green-300 { border-color: var(--brand-green-300) !important; } .border-emerald-400 , .border-green-400 { border-color: var(--brand-green-400) !important; } .border-emerald-500 , .border-green-500 { border-color: var(--brand-green-500) !important; } .border-emerald-600 , .border-green-600 { border-color: var(--brand-green-600) !important; } .border-emerald-700 , .border-green-700 { border-color: var(--brand-green-700) !important; } .border-emerald-800 , .border-green-800 { border-color: var(--brand-green-800) !important; } .border-emerald-900 , .border-green-900 { border-color: var(--brand-green-900) !important; } .hover\:bg-emerald-50:hover , .hover\:bg-green-50:hover { background-color: var(--brand-green-50) !important; } .hover\:bg-emerald-100:hover , .hover\:bg-green-100:hover { background-color: var(--brand-green-100) !important; } .hover\:bg-emerald-200:hover , .hover\:bg-green-200:hover { background-color: var(--brand-green-200) !important; } .hover\:bg-emerald-600:hover , .hover\:bg-green-600:hover { background-color: var(--brand-green-600) !important; } .hover\:bg-emerald-700:hover , .hover\:bg-green-700:hover { background-color: var(--brand-green-700) !important; } .hover\:text-emerald-600:hover , .hover\:text-green-600:hover { color: var(--brand-green-600) !important; } .hover\:text-emerald-700:hover , .hover\:text-green-700:hover { color: var(--brand-green-700) !important; } .hover\:text-emerald-800:hover , .hover\:text-green-800:hover { color: var(--brand-green-800) !important; } .hover\:border-emerald-500:hover , .hover\:border-green-500:hover { border-color: var(--brand-green-500) !important; } .focus\:border-emerald-500:focus , .focus\:border-green-500:focus { border-color: var(--brand-green-500) !important; } .focus\:ring-emerald-500:focus , .focus\:ring-green-500:focus { --tw-ring-color: var(--brand-green-500) !important; } html.dark .dark\:bg-emerald-900 , html.dark .dark\:bg-green-900 { background-color: var(--brand-green-900) !important; } html.dark .dark\:border-emerald-700 , html.dark .dark\:border-green-700 { border-color: var(--brand-green-700) !important; } html.dark .dark\:border-emerald-800 , html.dark .dark\:border-green-800 { border-color: var(--brand-green-800) !important; } html.dark .dark\:text-emerald-300 , html.dark .dark\:text-green-300 { color: var(--brand-green-300) !important; } html.dark .dark\:text-emerald-400 , html.dark .dark\:text-green-400 { color: var(--brand-green-400) !important; } html.dark .dark\:text-emerald-500 , html.dark .dark\:text-green-500 { color: var(--brand-green-500) !important; } html.dark .dark\:bg-emerald-950 , html.dark .dark\:bg-green-950 { background-color: var(--brand-green-900) !important; } html.dark .dark\:hover\:bg-emerald-900:hover , html.dark .dark\:hover\:bg-green-900:hover { background-color: var(--brand-green-900) !important; } /* ============================= ORANGE (Tailwind's own orange-*) ============================= */ /* Aligns stock Tailwind orange (e.g. orange-500 #f97316) to the exact brand hex #FF6A00. */ .bg-orange-50 { background-color: var(--brand-orange-50) !important; } .bg-orange-100 { background-color: var(--brand-orange-100) !important; } .bg-orange-400 { background-color: var(--brand-orange-400) !important; } .bg-orange-500 { background-color: var(--brand-orange-500) !important; } .bg-orange-600 { background-color: var(--brand-orange-600) !important; } .text-orange-400 { color: var(--brand-orange-400) !important; } .text-orange-500 { color: var(--brand-orange-500) !important; } .text-orange-600 { color: var(--brand-orange-600) !important; } .text-orange-700 { color: var(--brand-orange-700) !important; } .border-orange-300 { border-color: var(--brand-orange-300) !important; } .border-orange-400 { border-color: var(--brand-orange-400) !important; } .border-orange-500 { border-color: var(--brand-orange-500) !important; } .ring-orange-400 { --tw-ring-color: var(--brand-orange-400) !important; } .ring-orange-500 { --tw-ring-color: var(--brand-orange-500) !important; } .focus\:ring-orange-400:focus { --tw-ring-color: var(--brand-orange-400) !important; } .focus\:border-orange-400:focus { border-color: var(--brand-orange-400) !important; } .from-orange-400 , .from-orange-500 { --tw-gradient-from: var(--brand-orange-500) !important; --tw-gradient-to: rgb(255 106 0 / 0) !important; } .to-orange-500 , .to-orange-600 { --tw-gradient-to: var(--brand-orange-600) !important; } .hover\:bg-orange-50:hover { background-color: var(--brand-orange-50) !important; } .hover\:bg-orange-600:hover { background-color: var(--brand-orange-600) !important; } .hover\:text-orange-500:hover { color: var(--brand-orange-500) !important; } .hover\:text-orange-600:hover { color: var(--brand-orange-600) !important; } .hover\:text-orange-700:hover { color: var(--brand-orange-700) !important; } .hover\:border-orange-400:hover { border-color: var(--brand-orange-400) !important; } .hover\:border-orange-500:hover { border-color: var(--brand-orange-500) !important; } html.dark .dark\:bg-orange-900 { background-color: var(--brand-orange-900) !important; } html.dark .dark\:bg-orange-950 { background-color: var(--brand-orange-900) !important; } html.dark .dark\:text-orange-300 { color: var(--brand-orange-300) !important; } html.dark .dark\:text-orange-400 { color: var(--brand-orange-400) !important; } html.dark .dark\:border-orange-700 { border-color: var(--brand-orange-700) !important; } html.dark .dark\:to-orange-900 { --tw-gradient-to: var(--brand-orange-900) !important; } html.dark .dark\:hover\:text-orange-400:hover { color: var(--brand-orange-400) !important; } /* The recurring "Complete Your Profile" style CTA gradient (orange->yellow, black text) collapses to a flat brand-orange fill with white text, matching the Primary Button spec (solid #FF6A00, no gradients). */ .bg-gradient-to-r.from-orange-500.to-yellow-400 { background: var(--brand-orange-500) !important; color: #fff !important; } /* ============================= ERROR (rose aliased to red) ============================= */ /* rose-* duplicates red-*'s destructive/error role with a different hex family; red-* itself already equals spec Error (#EF4444) exactly and needs no rule. */ .bg-rose-50 { background-color: var(--ref-red-50) !important; } .bg-rose-100 { background-color: var(--ref-red-100) !important; } .bg-rose-500 { background-color: var(--ref-red-500) !important; } .bg-rose-600 { background-color: var(--ref-red-600) !important; } .text-rose-500 { color: var(--ref-red-500) !important; } .text-rose-600 { color: var(--ref-red-600) !important; } .text-rose-700 { color: var(--ref-red-700) !important; } .text-rose-900 { color: var(--ref-red-900) !important; } .border-rose-100 { border-color: var(--ref-red-100) !important; } .border-rose-200 { border-color: var(--ref-red-200) !important; } .border-rose-500 { border-color: var(--ref-red-500) !important; } .hover\:bg-rose-50:hover { background-color: var(--ref-red-50) !important; } .hover\:bg-rose-600:hover { background-color: var(--ref-red-600) !important; } .hover\:bg-rose-700:hover { background-color: var(--ref-red-700) !important; } .hover\:text-rose-600:hover { color: var(--ref-red-600) !important; } .hover\:text-rose-700:hover { color: var(--ref-red-700) !important; } html.dark .dark\:hover\:bg-rose-900:hover { background-color: var(--ref-red-900) !important; } html.dark .dark\:hover\:text-rose-400:hover { color: var(--ref-red-400) !important; } html.dark .dark\:bg-rose-900 { background-color: var(--ref-red-900) !important; } html.dark .dark\:text-rose-300 { color: var(--ref-red-300) !important; } html.dark .dark\:text-rose-400 { color: var(--ref-red-400) !important; } /* ============================= WARNING (yellow aliased to amber) ============================= */ /* yellow-* duplicates amber-*'s warning role; amber-* itself already equals spec Warning (#F59E0B / bg #FFFBEB) exactly and needs no rule. */ .bg-yellow-50 { background-color: var(--ref-amber-50) !important; } .bg-yellow-100 { background-color: var(--ref-amber-100) !important; } .bg-yellow-400 { background-color: var(--ref-amber-400) !important; } .bg-yellow-500 { background-color: var(--ref-amber-500) !important; } .text-yellow-400 { color: var(--ref-amber-400) !important; } .text-yellow-500 { color: var(--ref-amber-500) !important; } .text-yellow-600 { color: var(--ref-amber-600) !important; } .text-yellow-700 { color: var(--ref-amber-700) !important; } .border-yellow-300 { border-color: var(--ref-amber-300) !important; } .border-yellow-400 { border-color: var(--ref-amber-400) !important; } .to-yellow-300 { --tw-gradient-to: var(--ref-amber-300) !important; } html.dark .dark\:bg-yellow-900 { background-color: var(--ref-amber-900) !important; } html.dark .dark\:text-yellow-300 { color: var(--ref-amber-300) !important; } html.dark .dark\:text-yellow-400 { color: var(--ref-amber-400) !important; } /* ============================= NEUTRAL (plain slate-* aliased to gray-*) ============================= */ /* Only bare slate-* (no dark: prefix) — dark:slate-* paired with a light-mode gray-* class is the app's normal dark-mode pattern and is left alone. */ .bg-slate-50 { background-color: var(--ref-gray-50) !important; } .bg-slate-100 { background-color: var(--ref-gray-100) !important; } .bg-slate-200 { background-color: var(--ref-gray-200) !important; } .bg-slate-600 { background-color: var(--ref-gray-600) !important; } .bg-slate-700 { background-color: var(--ref-gray-700) !important; } .text-slate-300 { color: var(--ref-gray-300) !important; } .text-slate-400 { color: var(--ref-gray-400) !important; } .text-slate-500 { color: var(--ref-gray-500) !important; } .text-slate-600 { color: var(--ref-gray-600) !important; } .text-slate-700 { color: var(--ref-gray-700) !important; } .text-slate-900 { color: var(--ref-gray-900) !important; } .border-slate-100 { border-color: var(--ref-gray-100) !important; } .border-slate-200 { border-color: var(--ref-gray-200) !important; } .border-slate-300 { border-color: var(--ref-gray-300) !important; } .placeholder-slate-400::placeholder { color: var(--ref-gray-400) !important; } .placeholder-slate-500::placeholder { color: var(--ref-gray-500) !important; } .hover\:bg-slate-700:hover { background-color: var(--ref-gray-700) !important; } /* ============================= BADGES ============================= */ /* Reusable badge components per the design system's badge spec: Verified = Green, Premium = Black, AI = Violet, Featured = Orange. "Verified" and "AI" already render correctly via the family remaps above (green-*/emerald-* and purple-* respectively) — .badge-premium and .badge-featured are new, since no "Premium"/"Featured" concept exists yet anywhere in the codebase. Not wired to any real data flag; ready to attach a class="badge-premium" / class="badge-featured" span wherever that product concept gets built. */ .badge-premium, .badge-featured, .badge-verified, .badge-ai { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; line-height: 1.4; } .badge-premium { background: #111111; color: #ffffff; } .badge-featured { background: var(--brand-orange-500); color: #ffffff; } .badge-verified { background: var(--brand-green-50); color: var(--brand-green-700); } .badge-ai { background: var(--brand-violet-50); color: var(--brand-violet-700); } html.dark .badge-premium { background: #ffffff; color: #111111; } html.dark .badge-featured { background: var(--brand-orange-600); color: #ffffff; } html.dark .badge-verified { background: var(--brand-green-900); color: var(--brand-green-300); } html.dark .badge-ai { background: var(--brand-violet-900); color: var(--brand-violet-300); } /* ============================= OPACITY-MODIFIER VARIANTS ============================= */ /* Tailwind's bg-{color}-900/20 syntax compiles each opacity fraction to its own literal class, so the exact-hex rules above don't reach these — used throughout for subtle dark-mode tint backgrounds on alerts/badges. */ .bg-sky-900\/20, .bg-orange-900\/20 { background-color: rgb(var(--brand-orange-900-rgb) / .20) !important; } .bg-sky-900\/30, .bg-orange-900\/30 { background-color: rgb(var(--brand-orange-900-rgb) / .30) !important; } .bg-sky-900\/40, .bg-orange-900\/40 { background-color: rgb(var(--brand-orange-900-rgb) / .40) !important; } .bg-sky-900\/50 { background-color: rgb(var(--brand-orange-900-rgb) / .50) !important; } .bg-sky-400\/20 { background-color: rgb(var(--brand-orange-900-rgb) / .20) !important; } .bg-orange-950\/10 { background-color: rgb(var(--brand-orange-900-rgb) / .10) !important; } .bg-orange-50\/40 { background-color: var(--brand-orange-50) !important; } .text-sky-200\/90 { color: var(--brand-orange-200) !important; } .border-sky-400\/30 { border-color: rgb(var(--brand-orange-900-rgb) / .30) !important; } .bg-purple-900\/20, .bg-purple-900\/30, .bg-indigo-900\/30, .bg-pink-900\/30 { background-color: rgb(var(--brand-violet-900-rgb) / .30) !important; } .bg-indigo-900\/50 { background-color: rgb(var(--brand-violet-900-rgb) / .50) !important; } .bg-emerald-900\/20, .bg-emerald-900\/30, .bg-teal-900\/30 { background-color: rgb(var(--brand-green-900-rgb) / .30) !important; } .bg-emerald-900\/50 { background-color: rgb(var(--brand-green-900-rgb) / .50) !important; } .bg-teal-500\/5 { background-color: rgb(var(--brand-green-900-rgb) / .05) !important; } .bg-emerald-400\/20 { background-color: rgb(var(--brand-green-900-rgb) / .20) !important; } .text-emerald-600\/80, .text-emerald-400\/70 { color: var(--brand-green-600) !important; } .border-emerald-400\/40 { border-color: rgb(var(--brand-green-900-rgb) / .40) !important; }