/** * Primary CTA overrides — load LAST in (after Tailwind + bridge). * Tailwind bg-blue-600 uses tokens via inline tailwind.config (see login.html after cdn.tailwindcss.com). * Extra rules here beat any remaining utility/specificity issues. * Colours: assets/snigg-tokens.css → :root --app-primary-fill*; light → --app-light-primary-* */ /* ---------- Auth pages (login, register, …) ---------- */ html[data-reading-theme='light'] body.snigg-public-auth button.bg-blue-600, html[data-reading-theme='light'] body.snigg-public-auth button[type='submit'].bg-blue-600, html[data-reading-theme='light'] body.snigg-public-auth a.bg-blue-600, html[data-reading-theme='light'] body.snigg-public-auth button.bg-blue-600.text-white, html[data-reading-theme='light'] body.snigg-public-auth a.bg-blue-600.text-white, html[data-reading-theme='light'] body.snigg-public-auth button[type='submit'].bg-blue-600.text-white { background: var(--app-light-primary-fill, #1d4ed8) !important; background-color: var(--app-light-primary-fill, #1d4ed8) !important; background-image: none !important; color: var(--app-light-primary-fg, #fff) !important; box-shadow: var(--app-light-primary-shadow, 0 1px 2px rgba(15, 23, 42, 0.12)) !important; border: none !important; border-color: transparent !important; } html[data-reading-theme='light'] body.snigg-public-auth button.hover\:bg-blue-700:hover, html[data-reading-theme='light'] body.snigg-public-auth a.hover\:bg-blue-700:hover, html[data-reading-theme='light'] body.snigg-public-auth button[type='submit'].hover\:bg-blue-700:hover, html[data-reading-theme='light'] body.snigg-public-auth button.bg-blue-600.hover\:bg-blue-700:hover { background: var(--app-light-primary-fill-hover, #1e40af) !important; background-color: var(--app-light-primary-fill-hover, #1e40af) !important; background-image: none !important; color: var(--app-light-primary-fg, #fff) !important; } html[data-reading-theme='dark'] body.snigg-public-auth button.bg-blue-600, html[data-reading-theme='dark'] body.snigg-public-auth button[type='submit'].bg-blue-600, html[data-reading-theme='dark'] body.snigg-public-auth a.bg-blue-600, html[data-reading-theme='dark'] body.snigg-public-auth button.bg-blue-600.text-white, html[data-reading-theme='dark'] body.snigg-public-auth a.bg-blue-600.text-white { background: var(--app-primary-fill, #1d4ed8) !important; background-color: var(--app-primary-fill, #1d4ed8) !important; background-image: none !important; color: var(--app-primary-on-fill, #fff) !important; border: none !important; border-color: transparent !important; } html[data-reading-theme='dark'] body.snigg-public-auth button.hover\:bg-blue-700:hover, html[data-reading-theme='dark'] body.snigg-public-auth a.hover\:bg-blue-700:hover, html[data-reading-theme='dark'] body.snigg-public-auth button[type='submit'].hover\:bg-blue-700:hover { background: var(--app-primary-fill-hover, #1e40af) !important; background-color: var(--app-primary-fill-hover, #1e40af) !important; color: var(--app-primary-on-fill, #fff) !important; } /* ---------- Index (custom .snigg-btn-primary, not Tailwind) ---------- */ html[data-reading-theme='light'] body.snigg-public-index .snigg-btn-primary:not(.snigg-btn-secondary) { background: var(--app-light-primary-fill, #1d4ed8) !important; background-color: var(--app-light-primary-fill, #1d4ed8) !important; background-image: none !important; color: var(--app-light-primary-fg, #fff) !important; box-shadow: var(--app-light-primary-shadow, 0 1px 2px rgba(15, 23, 42, 0.12)) !important; border: none !important; } html[data-reading-theme='light'] body.snigg-public-index .snigg-btn-primary:not(.snigg-btn-secondary):hover { background: var(--app-light-primary-fill-hover, #1e40af) !important; background-color: var(--app-light-primary-fill-hover, #1e40af) !important; color: var(--app-light-primary-fg, #fff) !important; box-shadow: var(--app-light-primary-shadow, 0 1px 2px rgba(15, 23, 42, 0.12)) !important; transform: none; } /* ---------- Installer chrome (body[data-installer-chrome='1']): hub, dashboard, admin, settings, … ---------- */ html[data-reading-theme='light'] body[data-installer-chrome='1'] .btn-primary:not(.btn-danger) { background: var(--app-light-primary-fill, #1d4ed8) !important; background-color: var(--app-light-primary-fill, #1d4ed8) !important; background-image: none !important; color: var(--app-light-primary-fg, #fff) !important; box-shadow: var(--app-light-primary-shadow, 0 1px 2px rgba(15, 23, 42, 0.12)) !important; border: none !important; } html[data-reading-theme='light'] body[data-installer-chrome='1'] .btn-primary:not(.btn-danger):hover { background: var(--app-light-primary-fill-hover, #1e40af) !important; background-color: var(--app-light-primary-fill-hover, #1e40af) !important; color: var(--app-light-primary-fg, #fff) !important; } html[data-reading-theme='light'] body[data-installer-chrome='1'] button.bg-blue-600, html[data-reading-theme='light'] body[data-installer-chrome='1'] a.bg-blue-600 { background: var(--app-light-primary-fill, #1d4ed8) !important; background-color: var(--app-light-primary-fill, #1d4ed8) !important; background-image: none !important; color: var(--app-light-primary-fg, #fff) !important; box-shadow: var(--app-light-primary-shadow, 0 1px 2px rgba(15, 23, 42, 0.12)) !important; border: none !important; border-color: transparent !important; } html[data-reading-theme='light'] body[data-installer-chrome='1'] button.hover\:bg-blue-700:hover, html[data-reading-theme='light'] body[data-installer-chrome='1'] a.hover\:bg-blue-700:hover { background: var(--app-light-primary-fill-hover, #1e40af) !important; background-color: var(--app-light-primary-fill-hover, #1e40af) !important; background-image: none !important; color: var(--app-light-primary-fg, #fff) !important; } html[data-reading-theme='dark'] body[data-installer-chrome='1'] button.bg-blue-600, html[data-reading-theme='dark'] body[data-installer-chrome='1'] a.bg-blue-600 { background: var(--app-primary-fill, #1d4ed8) !important; background-color: var(--app-primary-fill, #1d4ed8) !important; background-image: none !important; color: var(--app-primary-on-fill, #fff) !important; border: none !important; border-color: transparent !important; } html[data-reading-theme='dark'] body[data-installer-chrome='1'] button.hover\:bg-blue-700:hover, html[data-reading-theme='dark'] body[data-installer-chrome='1'] a.hover\:bg-blue-700:hover { background: var(--app-primary-fill-hover, #1e40af) !important; background-color: var(--app-primary-fill-hover, #1e40af) !important; color: var(--app-primary-on-fill, #fff) !important; }