:root {
  --color-primary: #390e47;
  --color-primary-light: #a3849e;
  --color-background: #ffffff;
  --color-text: #241b2b;
  --color-border: rgba(57, 14, 71, 0.18);
  --color-shadow: rgba(57, 14, 71, 0.12);
  --focus-ring: rgba(57, 14, 71, 0.35);
  --focus-ring-strong: rgba(163, 132, 158, 0.6);
}

body,
body.bg-gray-50 {
  background-color: var(--color-background);
  color: var(--color-text);
}

a {
  color: var(--color-primary);
  transition: color 0.2s ease;
}

a:hover,
a:focus-visible {
  color: var(--color-primary-light);
}

a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring-strong);
  border-radius: 4px;
}

nav {
  background-color: var(--color-primary);
  color: #fff;
}

nav a,
nav button {
  color: #fff;
  font-weight: 600;
}

nav a:hover,
nav button:hover {
  color: #fff;
  opacity: 0.9;
}

nav a:focus-visible,
nav button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring-strong);
  border-radius: 999px;
}

nav a[aria-current="page"],
nav a.nav-link--active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.btn,
button,
input[type="submit"],
input[type="button"] {
  border-radius: 0.625rem;
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease, transform 0.2s ease;
}

.btn-primary,
button.btn-primary {
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  color: #fff;
}

.btn-primary:hover,
button.btn-primary:hover {
  background-color: #2b0b36;
  border-color: #2b0b36;
}

.btn-outline,
button.btn-outline {
  background-color: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}

.btn-outline:hover,
button.btn-outline:hover {
  background-color: var(--color-primary-light);
  color: #241b2b;
}

.btn:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.shadow,
.card,
.product-card,
.stinner-card {
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px var(--color-shadow);
  background-color: #fff;
}

input,
select,
textarea {
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #fff;
  color: var(--color-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

input[type="checkbox"] {
  accent-color: var(--color-primary);
}

input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.badge,
.label,
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background-color: var(--color-primary-light);
  color: var(--color-text);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* --- FORCE OVERRIDES (Bootstrap + Tailwind blue utilities) --- */
:root{
  --bs-primary: #390e47;
  --bs-primary-rgb: 57,14,71;
  --bs-link-color: #390e47;
  --bs-link-hover-color: #532d5e;
}

.btn-primary, .btn.btn-primary{
  background-color:#390e47 !important;
  border-color:#390e47 !important;
}
.btn-primary:hover, .btn.btn-primary:hover{
  background-color:#532d5e !important;
  border-color:#532d5e !important;
}

[class*="bg-blue-"], [class*="bg-sky-"], [class*="bg-indigo-"]{ background-color:#390e47 !important; }
[class*="text-blue-"], [class*="text-sky-"], [class*="text-indigo-"]{ color:#390e47 !important; }
[class*="border-blue-"], [class*="border-sky-"], [class*="border-indigo-"]{ border-color:#390e47 !important; }