/* Logo-Based Theme for Moratwe */
/* This theme is designed to work with your logo colors */

:root {
  /* Primary Color Palette - Extract these from your logo */
  --logo-primary: #2D7DD2;      /* Main brand blue - update with actual logo color */
  --logo-primary-light: #4A90E2; /* Lighter version */
  --logo-primary-dark: #1E5F99;  /* Darker version */
  
  /* Secondary Color Palette */
  --logo-secondary: #E67E22;     /* Complementary orange - update with actual logo color */
  --logo-secondary-light: #F39C12;
  --logo-secondary-dark: #D35400;
  
  /* Accent Colors */
  --logo-accent: #27AE60;        /* Supporting green - update with actual logo color */
  --logo-accent-light: #2ECC71;
  --logo-accent-dark: #1E8449;
  
  /* Neutral Colors */
  --logo-neutral-100: #F8F9FA;
  --logo-neutral-200: #E9ECEF;
  --logo-neutral-300: #DEE2E6;
  --logo-neutral-400: #CED4DA;
  --logo-neutral-500: #6C757D;
  --logo-neutral-600: #495057;
  --logo-neutral-700: #343A40;
  --logo-neutral-800: #212529;
  --logo-neutral-900: #0D1117;
  
  /* Semantic Colors */
  --logo-success: var(--logo-accent);
  --logo-warning: #F1C40F;
  --logo-error: #E74C3C;
  --logo-info: var(--logo-primary);
  
  /* Background Gradients */
  --logo-gradient-primary: linear-gradient(135deg, var(--logo-primary) 0%, var(--logo-primary-dark) 100%);
  --logo-gradient-secondary: linear-gradient(135deg, var(--logo-secondary) 0%, var(--logo-secondary-dark) 100%);
  --logo-gradient-hero: linear-gradient(135deg, var(--logo-primary) 0%, var(--logo-secondary) 100%);
  
  /* Text Colors */
  --logo-text-primary: var(--logo-neutral-900);
  --logo-text-secondary: var(--logo-neutral-600);
  --logo-text-muted: var(--logo-neutral-500);
  --logo-text-inverse: #FFFFFF;
  
  /* Border Colors */
  --logo-border-light: var(--logo-neutral-200);
  --logo-border-medium: var(--logo-neutral-300);
  --logo-border-focus: var(--logo-primary);
  
  /* Shadow Colors */
  --logo-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --logo-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --logo-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --logo-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Logo-specific utility classes */
.logo-bg-primary { background-color: var(--logo-primary); }
.logo-bg-primary-light { background-color: var(--logo-primary-light); }
.logo-bg-primary-dark { background-color: var(--logo-primary-dark); }
.logo-bg-secondary { background-color: var(--logo-secondary); }
.logo-bg-accent { background-color: var(--logo-accent); }

.logo-text-primary { color: var(--logo-primary); }
.logo-text-secondary { color: var(--logo-secondary); }
.logo-text-accent { color: var(--logo-accent); }

.logo-border-primary { border-color: var(--logo-primary); }
.logo-border-secondary { border-color: var(--logo-secondary); }
.logo-border-accent { border-color: var(--logo-accent); }

/* Enhanced Button Styles */
.btn-logo-primary {
  background: var(--logo-gradient-primary);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: var(--logo-shadow-md);
}

.btn-logo-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--logo-shadow-lg);
}

.btn-logo-secondary {
  background: var(--logo-gradient-secondary);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: var(--logo-shadow-md);
}

.btn-logo-outline {
  background: transparent;
  color: var(--logo-primary);
  border: 2px solid var(--logo-primary);
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-logo-outline:hover {
  background: var(--logo-primary);
  color: white;
}

/* Card Styles */
.logo-card {
  background: white;
  border-radius: 1rem;
  box-shadow: var(--logo-shadow-md);
  transition: all 0.3s ease;
  border: 1px solid var(--logo-border-light);
}

.logo-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--logo-shadow-xl);
}

.logo-card-header {
  background: var(--logo-gradient-primary);
  color: white;
  padding: 1.5rem;
  border-radius: 1rem 1rem 0 0;
}

/* Navigation Styles */
.logo-nav {
  background: white;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--logo-border-light);
  box-shadow: var(--logo-shadow-sm);
}

.logo-nav-link {
  color: var(--logo-text-secondary);
  font-weight: 500;
  transition: color 0.3s ease;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
}

.logo-nav-link:hover {
  color: var(--logo-primary);
  background-color: var(--logo-neutral-100);
}

.logo-nav-link.active {
  color: var(--logo-primary);
  background-color: var(--logo-neutral-100);
}

/* Hero Section Styles */
.logo-hero {
  background: var(--logo-gradient-hero);
  color: white;
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
}

.logo-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.3;
}

/* Feature Grid Styles */
.logo-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  padding: 2rem 0;
}

.logo-feature-card {
  background: white;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: var(--logo-shadow-md);
  transition: all 0.3s ease;
  border-left: 4px solid var(--logo-primary);
}

.logo-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--logo-shadow-xl);
}

.logo-feature-icon {
  width: 4rem;
  height: 4rem;
  background: var(--logo-gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: white;
}

/* Form Styles */
.logo-form-group {
  margin-bottom: 1.5rem;
}

.logo-form-label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--logo-text-primary);
  font-weight: 500;
}

.logo-form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--logo-border-light);
  border-radius: 0.5rem;
  transition: border-color 0.3s ease;
  font-size: 1rem;
}

.logo-form-input:focus {
  outline: none;
  border-color: var(--logo-primary);
  box-shadow: 0 0 0 3px rgba(45, 125, 210, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
  .logo-feature-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .logo-hero {
    padding: 2rem 0;
  }
  
  .btn-logo-primary,
  .btn-logo-secondary,
  .btn-logo-outline {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  :root {
    --logo-text-primary: var(--logo-neutral-100);
    --logo-text-secondary: var(--logo-neutral-300);
    --logo-text-muted: var(--logo-neutral-400);
    --logo-border-light: var(--logo-neutral-700);
    --logo-border-medium: var(--logo-neutral-600);
  }
  
  .logo-card,
  .logo-nav {
    background: var(--logo-neutral-800);
    border-color: var(--logo-neutral-700);
  }
  
  .logo-feature-card {
    background: var(--logo-neutral-800);
    border-color: var(--logo-neutral-700);
  }
}

/* Animation utilities */
.logo-fade-in {
  animation: logoFadeIn 0.6s ease-out;
}

.logo-slide-up {
  animation: logoSlideUp 0.8s ease-out;
}

@keyframes logoFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes logoSlideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Logo-specific pattern overlays */
.logo-pattern-overlay {
  position: relative;
}

.logo-pattern-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 2px 2px, rgba(255,255,255,0.1) 1px, transparent 0);
  background-size: 20px 20px;
  pointer-events: none;
}