/* Theme-aware overrides for the shared frontend design system. */
:root {
  --site-theme-primary: #9b0044;
  --site-theme-primary-container: #c2185b;
  --site-theme-primary-dark: #3f0018;
  --site-theme-primary-soft: #ffd9df;
  --site-theme-primary-soft-hover: #ffb1c2;
  --site-theme-gradient-start: #e91e63;
}

.text-primary,
[class~="hover:text-primary"]:hover {
  color: var(--site-theme-primary) !important;
}

.text-primary-container {
  color: var(--site-theme-primary-container) !important;
}

/* Use accessible accent text on dark surfaces, overriding the normal palette utilities. */
html[data-theme="dark"] .text-primary,
html[data-theme="dark"] [class~="hover:text-primary"]:hover {
  color: #ff9fbd !important;
}

html[data-theme="dark"] .text-primary-container {
  color: #ffc2d3 !important;
}

.text-primary-fixed-dim {
  color: var(--site-theme-primary-soft-hover) !important;
}

.bg-primary,
[class~="hover:bg-primary"]:hover,
[class~="focus:bg-primary"]:focus {
  background-color: var(--site-theme-primary) !important;
}

.bg-primary-container {
  background-color: var(--site-theme-primary-container) !important;
}

.bg-primary-fixed,
[class~="hover:bg-primary-fixed"]:hover,
[class~="file:bg-primary-fixed"]::file-selector-button {
  background-color: var(--site-theme-primary-soft) !important;
}

.bg-primary-fixed-dim\/70 {
  background-color: color-mix(in srgb, var(--site-theme-primary-soft-hover) 70%, transparent) !important;
}

html[data-theme="dark"] .bg-primary-fixed,
html[data-theme="dark"] [class~="hover:bg-primary-fixed"]:hover,
html[data-theme="dark"] [class~="file:bg-primary-fixed"]::file-selector-button {
  background-color: #3b2431 !important;
}

html[data-theme="dark"] .bg-primary-fixed-dim\/70 {
  background-color: rgb(255 159 189 / 18%) !important;
}

html[data-theme="dark"] [class~="bg-primary-fixed/15"] { background-color: rgb(255 159 189 / 6%) !important; }
html[data-theme="dark"] [class~="bg-primary-fixed/20"] { background-color: rgb(255 159 189 / 8%) !important; }
html[data-theme="dark"] [class~="bg-primary-fixed/40"] { background-color: rgb(255 159 189 / 12%) !important; }
html[data-theme="dark"] [class~="bg-primary-fixed/50"] { background-color: rgb(255 159 189 / 14%) !important; }
html[data-theme="dark"] [class~="bg-primary-fixed/60"] { background-color: rgb(255 159 189 / 16%) !important; }
html[data-theme="dark"] [class~="bg-primary-fixed/70"] { background-color: rgb(255 159 189 / 18%) !important; }
.bg-primary-fixed\/15 { background-color: color-mix(in srgb, var(--site-theme-primary-soft) 15%, transparent) !important; }
.bg-primary-fixed\/20 { background-color: color-mix(in srgb, var(--site-theme-primary-soft) 20%, transparent) !important; }
.bg-primary-fixed\/40 { background-color: color-mix(in srgb, var(--site-theme-primary-soft) 40%, transparent) !important; }
.bg-primary-fixed\/50 { background-color: color-mix(in srgb, var(--site-theme-primary-soft) 50%, transparent) !important; }
.bg-primary-fixed\/60 { background-color: color-mix(in srgb, var(--site-theme-primary-soft) 60%, transparent) !important; }
.bg-primary-fixed\/70 { background-color: color-mix(in srgb, var(--site-theme-primary-soft) 70%, transparent) !important; }
.bg-primary\/40 { background-color: color-mix(in srgb, var(--site-theme-primary) 40%, transparent) !important; }

.border-primary,
[class~="hover:border-primary"]:hover {
  border-color: var(--site-theme-primary) !important;
}

.border-primary\/30 { border-color: color-mix(in srgb, var(--site-theme-primary) 30%, transparent) !important; }
[class~="hover:border-primary/40"]:hover { border-color: color-mix(in srgb, var(--site-theme-primary) 40%, transparent) !important; }

.accent-primary { accent-color: var(--site-theme-primary) !important; }
.ring-primary-fixed { --tw-ring-color: var(--site-theme-primary-soft) !important; }

.btn-primary {
  background-image: linear-gradient(to right, var(--site-theme-gradient-start), var(--site-theme-primary-container)) !important;
}

.btn-primary:hover {
  --tw-shadow: 0 12px 32px -8px color-mix(in srgb, var(--site-theme-primary) 27%, transparent) !important;
}

.btn-ghost,
.btn-outline {
  color: var(--site-theme-primary) !important;
}

html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .btn-outline {
  color: #ff9fbd !important;
}

.btn-outline {
  border-color: color-mix(in srgb, var(--site-theme-primary) 28%, transparent) !important;
}

.btn-ghost:hover,
.btn-outline:hover {
  background-color: color-mix(in srgb, var(--site-theme-primary-soft) 65%, white) !important;
}

html[data-theme="dark"] .btn-ghost:hover,
html[data-theme="dark"] .btn-outline:hover {
  background-color: #3b2431 !important;
}

.from-primary { --tw-gradient-from: var(--site-theme-primary) var(--tw-gradient-from-position) !important; }
.from-primary-container { --tw-gradient-from: var(--site-theme-primary-container) var(--tw-gradient-from-position) !important; }
.via-primary-container { --tw-gradient-stops: var(--tw-gradient-from), var(--site-theme-primary-container) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.to-primary { --tw-gradient-to: var(--site-theme-primary) var(--tw-gradient-to-position) !important; }
.to-primary-container { --tw-gradient-to: var(--site-theme-primary-container) var(--tw-gradient-to-position) !important; }
[class~="after:bg-primary-container"]::after { background-color: var(--site-theme-primary-container) !important; }

:focus-visible { outline-color: var(--site-theme-primary) !important; }

@supports not (color: color-mix(in srgb, white, black)) {
  .bg-primary-fixed-dim\/70 { background-color: var(--site-theme-primary-soft-hover) !important; }
  .bg-primary-fixed\/15,
  .bg-primary-fixed\/20,
  .bg-primary-fixed\/40,
  .bg-primary-fixed\/50,
  .bg-primary-fixed\/60,
  .bg-primary-fixed\/70 { background-color: var(--site-theme-primary-soft) !important; }
}