/* ============================================================
   SmartAPI custom theme — injected via nginx into HTML responses
   Overrides Tailwind primary palette + adds a modern indigo/violet
   accent. Specificity wins via !important on color/bg/border rules.
   Safe: only color tokens, no layout changes.
   ============================================================ */

:root {
  --smartapi-primary-50:  #eef2ff;
  --smartapi-primary-100: #e0e7ff;
  --smartapi-primary-200: #c7d2fe;
  --smartapi-primary-300: #a5b4fc;
  --smartapi-primary-400: #818cf8;
  --smartapi-primary-500: #6366f1;
  --smartapi-primary-600: #4f46e5;
  --smartapi-primary-700: #4338ca;
  --smartapi-primary-800: #3730a3;
  --smartapi-primary-900: #312e81;
  --smartapi-accent:      #8b5cf6;
}

/* Background fills (buttons, badges, etc.) */
.bg-primary-50  { background-color: var(--smartapi-primary-50)  !important; }
.bg-primary-100 { background-color: var(--smartapi-primary-100) !important; }
.bg-primary-200 { background-color: var(--smartapi-primary-200) !important; }
.bg-primary-300 { background-color: var(--smartapi-primary-300) !important; }
.bg-primary-400 { background-color: var(--smartapi-primary-400) !important; }
.bg-primary-500 { background-color: var(--smartapi-primary-500) !important; }
.bg-primary-600 { background-color: var(--smartapi-primary-600) !important; }
.bg-primary-700 { background-color: var(--smartapi-primary-700) !important; }
.bg-primary-800 { background-color: var(--smartapi-primary-800) !important; }
.bg-primary-900 { background-color: var(--smartapi-primary-900) !important; }

.hover\:bg-primary-50:hover  { background-color: var(--smartapi-primary-50)  !important; }
.hover\:bg-primary-100:hover { background-color: var(--smartapi-primary-100) !important; }
.hover\:bg-primary-500:hover { background-color: var(--smartapi-primary-500) !important; }
.hover\:bg-primary-600:hover { background-color: var(--smartapi-primary-600) !important; }
.hover\:bg-primary-700:hover { background-color: var(--smartapi-primary-700) !important; }

/* Text colors */
.text-primary-50  { color: var(--smartapi-primary-50)  !important; }
.text-primary-100 { color: var(--smartapi-primary-100) !important; }
.text-primary-200 { color: var(--smartapi-primary-200) !important; }
.text-primary-300 { color: var(--smartapi-primary-300) !important; }
.text-primary-400 { color: var(--smartapi-primary-400) !important; }
.text-primary-500 { color: var(--smartapi-primary-500) !important; }
.text-primary-600 { color: var(--smartapi-primary-600) !important; }
.text-primary-700 { color: var(--smartapi-primary-700) !important; }
.text-primary-800 { color: var(--smartapi-primary-800) !important; }
.text-primary-900 { color: var(--smartapi-primary-900) !important; }

.hover\:text-primary-500:hover { color: var(--smartapi-primary-500) !important; }
.hover\:text-primary-600:hover { color: var(--smartapi-primary-600) !important; }
.hover\:text-primary-700:hover { color: var(--smartapi-primary-700) !important; }

/* Borders */
.border-primary-100 { border-color: var(--smartapi-primary-100) !important; }
.border-primary-200 { border-color: var(--smartapi-primary-200) !important; }
.border-primary-300 { border-color: var(--smartapi-primary-300) !important; }
.border-primary-400 { border-color: var(--smartapi-primary-400) !important; }
.border-primary-500 { border-color: var(--smartapi-primary-500) !important; }
.border-primary-600 { border-color: var(--smartapi-primary-600) !important; }
.border-primary-700 { border-color: var(--smartapi-primary-700) !important; }

/* Focus rings */
.focus\:ring-primary-500:focus { --tw-ring-color: var(--smartapi-primary-500) !important; }
.focus\:ring-primary-600:focus { --tw-ring-color: var(--smartapi-primary-600) !important; }
.ring-primary-500 { --tw-ring-color: var(--smartapi-primary-500) !important; }

/* Generic anchors + interactive elements that often inherit blue */
a:not([class*="text-"]):not([class*="bg-"]):not(.no-theme) {
  color: var(--smartapi-primary-600);
}
a:not([class*="text-"]):not([class*="bg-"]):not(.no-theme):hover {
  color: var(--smartapi-primary-700);
}

/* Selection highlight = brand color */
::selection {
  background-color: var(--smartapi-primary-200);
  color: var(--smartapi-primary-900);
}

/* Slightly nicer scrollbar in the brand color */
::-webkit-scrollbar-thumb {
  background-color: var(--smartapi-primary-300);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--smartapi-primary-500);
}

/* Logo polish: round corners + soft shadow on the embedded brand mark */
img[src="/logo.png"], img[src*="logo"] {
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(99,102,241,0.18);
}