/* Accent overrides: remap emerald utilities based on */ /* Fallback base (emerald) so the bar is visible even before accent class applies */ .accent-bar { background: repeating-linear-gradient(45deg, #34D399, #34D399 10px, #0b0b0f 10px, #0b0b0f 20px) !important; } /* Cyan */ html.accent-cyan .bg-emerald-400 { background-color: #22D3EE !important; } html.accent-cyan .hover\:bg-emerald-300:hover { background-color: #67E8F9 !important; } html.accent-cyan .focus\:border-emerald-300:focus { border-color: #67E8F9 !important; } html.accent-cyan .bg-emerald-400\/20 { background-color: rgba(34,211,238,0.2) !important; } html.accent-cyan input.accent-emerald-400 { accent-color: #22D3EE; } html.accent-cyan .text-emerald-400 { color: #22D3EE !important; } html.accent-cyan .from-emerald-300 { --tw-gradient-from: #7dd3fc !important; --tw-gradient-to: rgb(125 211 252 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } html.accent-cyan .to-teal-400 { --tw-gradient-to: #60a5fa !important; } html.accent-cyan .accent-bar { background: repeating-linear-gradient(45deg, #22D3EE, #22D3EE 10px, #0b0b0f 10px, #0b0b0f 20px) !important; } html.accent-cyan .hover\:text-emerald-400:hover { color: #22D3EE !important; } /* Blue alias (map to cyan) */ html.accent-blue .bg-emerald-400 { background-color: #22D3EE !important; } html.accent-blue .hover\:bg-emerald-300:hover { background-color: #67E8F9 !important; } html.accent-blue .focus\:border-emerald-300:focus { border-color: #67E8F9 !important; } html.accent-blue .bg-emerald-400\/20 { background-color: rgba(34,211,238,0.2) !important; } html.accent-blue input.accent-emerald-400 { accent-color: #22D3EE; } html.accent-blue .text-emerald-400 { color: #22D3EE !important; } html.accent-blue .from-emerald-300 { --tw-gradient-from: #7dd3fc !important; --tw-gradient-to: rgb(125 211 252 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } html.accent-blue .to-teal-400 { --tw-gradient-to: #60a5fa !important; } html.accent-blue .accent-bar { background: repeating-linear-gradient(45deg, #22D3EE, #22D3EE 10px, #0b0b0f 10px, #0b0b0f 20px) !important; } html.accent-blue .hover\:text-emerald-400:hover { color: #22D3EE !important; } /* Emerald (default) */ html.accent-emerald .text-emerald-400 { color: #34D399 !important; } html.accent-emerald .accent-bar { background: repeating-linear-gradient(45deg, #34D399, #34D399 10px, #0b0b0f 10px, #0b0b0f 20px) !important; } html.accent-emerald .hover\:text-emerald-400:hover { color: #34D399 !important; } /* Fuchsia */ html.accent-fuchsia .bg-emerald-400 { background-color: #D946EF !important; } html.accent-fuchsia .hover\:bg-emerald-300:hover { background-color: #E879F9 !important; } html.accent-fuchsia .focus\:border-emerald-300:focus { border-color: #E879F9 !important; } html.accent-fuchsia .bg-emerald-400\/20 { background-color: rgba(217,70,239,0.2) !important; } html.accent-fuchsia input.accent-emerald-400 { accent-color: #D946EF; } html.accent-fuchsia .text-emerald-400 { color: #D946EF !important; } html.accent-fuchsia .from-emerald-300 { --tw-gradient-from: #D946EF !important; --tw-gradient-to: rgb(217 70 239 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } html.accent-fuchsia .to-teal-400 { --tw-gradient-to: #A855F7 !important; } html.accent-fuchsia .accent-bar { background: repeating-linear-gradient(45deg, #D946EF, #D946EF 10px, #0b0b0f 10px, #0b0b0f 20px) !important; } html.accent-fuchsia .hover\:text-emerald-400:hover { color: #D946EF !important; } /* Orange (brand #FF5E00) */ html.accent-orange .bg-emerald-400 { background-color: #FF5E00 !important; } html.accent-orange .hover\:bg-emerald-300:hover { background-color: #FF7A2E !important; } html.accent-orange .focus\:border-emerald-300:focus { border-color: #FF7A2E !important; } html.accent-orange .bg-emerald-400\/20 { background-color: rgba(255,94,0,0.2) !important; } html.accent-orange input.accent-emerald-400 { accent-color: #FF5E00; } html.accent-orange .text-emerald-400 { color: #FF5E00 !important; } html.accent-orange .from-emerald-300 { --tw-gradient-from: #FF5E00 !important; --tw-gradient-to: rgb(255 94 0 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } html.accent-orange .to-teal-400 { --tw-gradient-to: #F59E0B !important; } html.accent-orange .accent-bar { background: repeating-linear-gradient(45deg, #FF5E00, #FF5E00 10px, #0b0b0f 10px, #0b0b0f 20px) !important; } html.accent-orange .hover\:text-emerald-400:hover { color: #FF5E00 !important; }