/* /css/theme.css */

/* This is the main control panel for your website's color scheme.
  To change the theme, you only need to edit the color values in this :root section.
*/
:root {
  /* Primary Theme Colors (Teal) */
  --color-primary: #14b8a6; /* teal-500 */
  --color-primary-hover: #0d9488; /* teal-600 */
  --color-primary-text: #ffffff; /* white */
  --color-primary-subtle-bg: #f0fdfa; /* teal-50 */
  
  /* Accent/Secondary Colors (can be used for different buttons or highlights) */
  --color-accent: #4f46e5; /* indigo-600 */
  --color-accent-hover: #4338ca; /* indigo-700 */
  --color-accent-text: #ffffff; /* white */

  /* Text Colors */
  --color-text-base: #1f2937; /* gray-800 */
  --color-text-muted: #4b5563; /* gray-600 */
  --color-text-heading: #111827; /* gray-900 */

  /* Background Colors */
  --color-bg-base: #f3f4f6; /* gray-100 */
  --color-bg-surface: #ffffff; /* white */
  --color-bg-muted: #f9fafb; /* gray-50 */
  
  /* Border Colors */
  --color-border: #e5e7eb; /* gray-200 */
}

/* Component Styles
  These classes use the variables defined above. You shouldn't need to edit these
  unless you want to change the fundamental style of a component.
*/

/* Primary Button */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-primary-text);
  font-weight: 600; /* semibold */
  padding: 0.75rem 2rem; /* py-3 px-8 */
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-md */
  transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
  display: inline-flex; /* Changed to inline-flex to align spinner */
  align-items: center;
  justify-content: center;
  text-align: center;
}
.btn-primary:hover:not(:disabled) {
  background-color: var(--color-primary-hover);
  transform: scale(1.05);
}
.btn-primary:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Secondary/Enquire Button */
.btn-secondary {
  background-color: #e5e7eb; /* gray-200 */
  color: var(--color-text-base);
  font-weight: 500; /* medium */
  padding: 0.5rem 1rem; /* py-2 px-4 */
  border-radius: 0.5rem; /* rounded-lg */
  transition: background-color 0.3s;
  display: block;
  width: 100%;
  text-align: center;
}
.btn-secondary:hover {
  background-color: #d1d5db; /* gray-300 */
}

/* Text color helper classes */
.text-theme-primary {
  color: var(--color-primary);
}
.text-theme-muted {
  color: var(--color-text-muted);
}
.text-theme-base {
  color: var(--color-text-base);
}
.text-theme-heading {
  color: var(--color-text-heading);
}

/* Background color helper classes */
.bg-theme-surface {
  background-color: var(--color-bg-surface);
}
.bg-theme-muted {
  background-color: var(--color-bg-muted);
}
.border-theme-border {
    border-color: var(--color-border);
}


/* --- Loading Spinner --- */
.spinner {
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  width: 1em;
  height: 1em;
  animation: spin 1s linear infinite;
  margin-left: 0.5rem; /* ml-2 */
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}