/* 
   Reside Prime Branding CSS
   This file contains the brand colors, typography, and common brand elements
   for the Reside Prime application
*/

:root {
    /* Primary Brand Colors (aligned with PropertyRentalUI) */
    --rp-primary: #34495e; /* Deep blue-gray, main brand color */
    --rp-secondary: #18bc9c; /* Teal/mint green, accent color */
    --rp-primary-light: #3498db; /* Bright blue, for highlights */
    --rp-secondary-light: #1abc9c; /* Lighter teal for secondary accents */
    --rp-danger: #dc3545; /* Red for error states */
    --rp-danger-light: #e57373; /* Light red for hover states */
    /* Text Colors */
    --rp-text-light: #ecf0f1; /* Light text on dark backgrounds */
    --rp-text-dark: #2c3e50; /* Dark text on light backgrounds */
    /* Background Colors */
    --rp-bg-light: #ecf0f1; /* Light background color */
    --rp-bg-dark: #bdc3c7; /* Darker background color */
    /* Brand Gradients */
    --rp-gradient-primary: linear-gradient(135deg, var(--rp-primary) 0%, var(--rp-primary-light) 100%);
    --rp-gradient-secondary: linear-gradient(135deg, var(--rp-secondary) 0%, var(--rp-secondary-light) 100%);
}

/* Logo Size Variations */
.rp-logo-large {
  max-width: 350px;
  height: auto;
}

.rp-logo-medium {
  max-width: 250px;
  height: auto;
}

.rp-logo-small {
  max-width: 150px;
  height: auto;
}

.rp-icon {
  width: 32px;
  height: 32px;
}

/* Brand Typography */
.rp-brand-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: var(--rp-primary);
}

.rp-brand-subtitle {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  color: var(--rp-secondary);
}

/* Brand Buttons */
.rp-btn-primary {
  background-color: var(--rp-primary);
  color: var(--rp-text-light);
  border: none;
  padding: 0.625rem 1.25rem;
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.rp-btn-primary:hover {
  background-color: var(--rp-primary-light);
  transform: translateY(-1px);
}

.rp-btn-secondary {
  background-color: var(--rp-secondary);
  color: var(--rp-text-light);
  border: none;
  padding: 0.625rem 1.25rem;
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.rp-btn-secondary:hover {
  background-color: var(--rp-secondary-light);
  transform: translateY(-1px);
}

.rp-btn-danger {
    background-color: var(--rp-danger);
    color: var(--rp-text-light);
    border: none;
    padding: 0.625rem 1.25rem;
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.rp-btn-danger:hover {
     background-color: var(--rp-danger-light);
     transform: translateY(-1px);
}
/* AI Elements Styling */
.rp-ai-section {
  border-left: 4px solid var(--rp-secondary);
  padding-left: 1rem;
  background-color: rgba(24, 188, 156, 0.05);
}

.rp-ai-badge {
  background-color: var(--rp-secondary-light);
  color: white;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  display: inline-block;
  margin-right: 0.5rem;
}

/* Brand Cards */
.rp-card {
  border: none;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: white;
  overflow: hidden;
}

.rp-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.rp-card-header {
  background-color: var(--rp-primary);
  color: var(--rp-text-light);
  padding: 1rem;
}

.rp-card-body {
  padding: 1.5rem;
}