/* Pierre Brand Colors - Official Color Palette */

:root {
  /* Primary Colors */
  --pierre-blue: #046481;      /* Primary brand color */
  --pierre-silver: #C6C8CA;
  --pierre-gray: #757584;
  --pierre-navy: #242038;
  
  /* Secondary Colors */
  --pierre-dark-blue: #2E4966;
  --pierre-yellow: #EEB902;
  --pierre-green: #57841D;
  --pierre-red: #DF2935;
  
  /* Utility shades based on Pierre Blue */
  --pierre-blue-light: #0a7a9a;
  --pierre-blue-lighter: #1090b5;
  --pierre-blue-dark: #034d61;
  --pierre-blue-darker: #023847;
  
  /* Gray scale based on Pierre colors */
  --pierre-gray-50: #f7f7f8;
  --pierre-gray-100: #e8e9ea;
  --pierre-gray-200: #d3d5d7;
  --pierre-gray-300: #C6C8CA;  /* Pierre Silver */
  --pierre-gray-400: #9a9ba6;
  --pierre-gray-500: #757584;  /* Pierre Gray */
  --pierre-gray-600: #5e5e6b;
  --pierre-gray-700: #484852;
  --pierre-gray-800: #333339;
  --pierre-gray-900: #242038;  /* Pierre Navy */
}

/* Tailwind custom utilities */
.bg-pierre-blue { background-color: var(--pierre-blue); }
.bg-pierre-silver { background-color: var(--pierre-silver); }
.bg-pierre-gray { background-color: var(--pierre-gray); }
.bg-pierre-navy { background-color: var(--pierre-navy); }
.bg-pierre-dark-blue { background-color: var(--pierre-dark-blue); }
.bg-pierre-yellow { background-color: var(--pierre-yellow); }
.bg-pierre-green { background-color: var(--pierre-green); }
.bg-pierre-red { background-color: var(--pierre-red); }

.text-pierre-blue { color: var(--pierre-blue); }
.text-pierre-silver { color: var(--pierre-silver); }
.text-pierre-gray { color: var(--pierre-gray); }
.text-pierre-navy { color: var(--pierre-navy); }
.text-pierre-dark-blue { color: var(--pierre-dark-blue); }
.text-pierre-yellow { color: var(--pierre-yellow); }
.text-pierre-green { color: var(--pierre-green); }
.text-pierre-red { color: var(--pierre-red); }

.border-pierre-blue { border-color: var(--pierre-blue); }
.border-pierre-silver { border-color: var(--pierre-silver); }
.border-pierre-gray { border-color: var(--pierre-gray); }
.border-pierre-navy { border-color: var(--pierre-navy); }

/* Gradient utilities */
.gradient-pierre-primary {
  background: linear-gradient(135deg, var(--pierre-blue) 0%, var(--pierre-dark-blue) 100%);
}

.gradient-pierre-secondary {
  background: linear-gradient(135deg, var(--pierre-dark-blue) 0%, var(--pierre-navy) 100%);
}

.gradient-pierre-accent {
  background: linear-gradient(135deg, var(--pierre-yellow) 0%, var(--pierre-green) 100%);
}

/* Button styles with Pierre colors */
.btn-pierre-primary {
  background-color: var(--pierre-blue);
  color: white;
  transition: all 0.3s ease;
}

.btn-pierre-primary:hover {
  background-color: var(--pierre-blue-dark);
  box-shadow: 0 4px 12px rgba(4, 100, 129, 0.3);
}

.btn-pierre-secondary {
  background-color: var(--pierre-dark-blue);
  color: white;
}

.btn-pierre-secondary:hover {
  background-color: var(--pierre-navy);
}

.btn-pierre-success {
  background-color: var(--pierre-green);
  color: white;
}

.btn-pierre-warning {
  background-color: var(--pierre-yellow);
  color: var(--pierre-navy);
}

.btn-pierre-danger {
  background-color: var(--pierre-red);
  color: white;
}

/* Card styles */
.card-pierre {
  background: white;
  border: 1px solid var(--pierre-silver);
  box-shadow: 0 2px 8px rgba(36, 32, 58, 0.08);
}

.card-pierre:hover {
  box-shadow: 0 4px 16px rgba(36, 32, 58, 0.12);
}

/* Navbar with Pierre branding */
.navbar-pierre {
  background: white;
  border-bottom: 2px solid var(--pierre-blue);
}

/* Sidebar with Pierre branding */
.sidebar-pierre {
  background: var(--pierre-navy);
  color: var(--pierre-silver);
}

.sidebar-pierre a:hover {
  background: rgba(4, 100, 129, 0.15);
  color: white;
}

.sidebar-pierre .active {
  background: var(--pierre-blue);
  color: white;
}