/*
Theme Name: ICB
Description: Tema personalizado para Instituto Corpo Bueno
Version: 2.0
Author: Instituto Corpo Bueno
*/

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700;800&display=swap');

/* Root variables */
:root {
  --primary-color: #831536;
  --primary-hover: #a01c42;
  --primary-light: #fdf2f4;
  --primary-50: #fdf2f4;
  --primary-100: #fce7ea;
  --primary-200: #f9d0d9;
  --primary-300: #f4a8bc;
  --primary-400: #ec7496;
  --primary-500: #e04773;
  --primary-600: #cd2a56;
  --primary-700: #b01e47;
  --primary-800: #931c42;
  --primary-900: #831536;
  --accent-color: #f59e0b;
}

/* Force Quicksand font on everything */
* {
  font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

body {
  font-family: 'Quicksand', sans-serif !important;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 600;
}

/* Custom Tailwind classes using CSS variables */
.bg-primary {
  background-color: var(--primary-color) !important;
}

.bg-primary-50 {
  background-color: var(--primary-50) !important;
}

.bg-primary-100 {
  background-color: var(--primary-100) !important;
}

.bg-primary-200 {
  background-color: var(--primary-200) !important;
}

.bg-primary-300 {
  background-color: var(--primary-300) !important;
}

.bg-primary-400 {
  background-color: var(--primary-400) !important;
}

.bg-primary-500 {
  background-color: var(--primary-500) !important;
}

.bg-primary-600 {
  background-color: var(--primary-600) !important;
}

.bg-primary-700 {
  background-color: var(--primary-700) !important;
}

.bg-primary-800 {
  background-color: var(--primary-800) !important;
}

.bg-primary-900 {
  background-color: var(--primary-900) !important;
}

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

.text-primary-50 {
  color: var(--primary-50) !important;
}

.text-primary-100 {
  color: var(--primary-100) !important;
}

.text-primary-200 {
  color: var(--primary-200) !important;
}

.text-primary-300 {
  color: var(--primary-300) !important;
}

.text-primary-400 {
  color: var(--primary-400) !important;
}

.text-primary-500 {
  color: var(--primary-500) !important;
}

.text-primary-600 {
  color: var(--primary-600) !important;
}

.text-primary-700 {
  color: var(--primary-700) !important;
}

.text-primary-800 {
  color: var(--primary-800) !important;
}

.text-primary-900 {
  color: var(--primary-900) !important;
}

.border-primary {
  border-color: var(--primary-color) !important;
}

.border-primary-200 {
  border-color: var(--primary-200) !important;
}

.border-primary-700 {
  border-color: var(--primary-700) !important;
}

.hover\:bg-primary:hover {
  background-color: var(--primary-color) !important;
}

.hover\:bg-primary-hover:hover {
  background-color: var(--primary-hover) !important;
}

.hover\:bg-primary-50:hover {
  background-color: var(--primary-50) !important;
}

.hover\:bg-primary-800:hover {
  background-color: var(--primary-800) !important;
}

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

.hover\:text-primary-200:hover {
  color: var(--primary-200) !important;
}

.focus\:ring-primary:focus {
  --tw-ring-color: var(--primary-color) !important;
}

/* Gradients */
.from-primary {
  --tw-gradient-from: var(--primary-color) !important;
  --tw-gradient-to: rgba(131, 21, 54, 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-primary-900 {
  --tw-gradient-from: var(--primary-900) !important;
  --tw-gradient-to: rgba(131, 21, 54, 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-primary-500 {
  --tw-gradient-from: var(--primary-500) !important;
  --tw-gradient-to: rgba(224, 71, 115, 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-primary {
  --tw-gradient-to: var(--primary-color) !important;
}

.to-primary-600 {
  --tw-gradient-to: var(--primary-600) !important;
}

.to-primary-700 {
  --tw-gradient-to: var(--primary-700) !important;
}

.to-primary-800 {
  --tw-gradient-to: var(--primary-800) !important;
}

.to-primary-hover {
  --tw-gradient-to: var(--primary-hover) !important;
}

.via-primary {
  --tw-gradient-to: rgba(131, 21, 54, 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--primary-color), var(--tw-gradient-to) !important;
}

/* Accent colors */
.bg-accent {
  background-color: var(--accent-color) !important;
}

.text-accent {
  color: var(--accent-color) !important;
}

.from-accent {
  --tw-gradient-from: var(--accent-color) !important;
  --tw-gradient-to: rgba(245, 158, 11, 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

/* Custom shadows */
.shadow-soft {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

.shadow-medium {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
}

.shadow-strong {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}

/* Ensure icons display properly */
ion-icon {
  display: inline-block;
  vertical-align: middle;
}

/* SVG icons - garantir display correto */
svg {
  display: block;
}

/* Font weight utilities for Quicksand */
.font-light {
  font-weight: 300 !important;
}

.font-normal {
  font-weight: 400 !important;
}

.font-medium {
  font-weight: 500 !important;
}

.font-semibold {
  font-weight: 600 !important;
}

.font-bold {
  font-weight: 700 !important;
}

.font-extrabold {
  font-weight: 800 !important;
}