/* Cluvo Custom Styles - Override template with Cluvo branding */

/* Import Inter font (keep existing) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* Cluvo Color Palette - Primary (Gold/Or) */
:root {
  /* Primary colors (Gold) - Replacing blue as primary */
  --color-primary-50: #fffdf0;
  --color-primary-100: #fff8d6;
  --color-primary-200: #feeaaa;
  --color-primary-300: #facd6a;
  --color-primary-400: #efc030;
  --color-primary-500: #d4930e;  /* Main brand color */
  --color-primary-600: #b07608;
  --color-primary-700: #865a04;
  --color-primary-800: #5e3f02;
  --color-primary-900: #3f2b01;
  --color-primary-950: #251900;

  /* Override blue with primary gold */
  --color-blue-50: #fffdf0;
  --color-blue-100: #fff8d6;
  --color-blue-200: #feeaaa;
  --color-blue-300: #facd6a;
  --color-blue-400: #efc030;
  --color-blue-500: #d4930e;
  --color-blue-600: #b07608;
  --color-blue-700: #865a04;
  --color-blue-800: #5e3f02;
  --color-blue-900: #3f2b01;
  --color-blue-950: #251900;

  /* Sky blue (secondary accent) */
  --color-sky-500: #67bfff;
  --color-sky-600: #56b1f3;
  --color-sky-700: #3193da;

  /* Green (success) */
  --color-green-500: #3ec972;
  --color-green-600: #34bd68;
  --color-green-700: #239f52;

  /* Red (error) */
  --color-red-500: #ff5656;
  --color-red-600: #fa4949;
  --color-red-700: #e63939;

  /* Gray scale (Cluvo) */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #bfc4cd;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-gray-950: #030712;

  /* Interface colors */
  --color-sidebar-bg: #0B1830;
  --color-page-bg: #F8FAFC;
  --color-header-bg: #FFFFFF;
}

/* Typography - Force Inter everywhere */
body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Heading styles */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
}

.h1 {
  font-size: 3rem; /* 48px */
  font-weight: 800;
  letter-spacing: -0.025em;
}

.h2 {
  font-size: 2.25rem; /* 36px */
  font-weight: 800;
  letter-spacing: -0.025em;
}

.h3 {
  font-size: 1.875rem; /* 30px */
  font-weight: 700;
}

.h4 {
  font-size: 1.5rem; /* 24px */
  font-weight: 700;
  letter-spacing: -0.0125em;
}

/* Button overrides with primary gold */
.btn-primary,
.btn.bg-blue-500,
.btn.bg-blue-600 {
  background-color: var(--color-primary-500);
  color: white;
  transition: all 0.2s ease;
}

.btn-primary:hover,
.btn.bg-blue-500:hover,
.btn.bg-blue-600:hover {
  background-color: var(--color-primary-600);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -10px rgba(212, 147, 14, 0.4);
}

/* Links */
a {
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-primary-600);
}

/* Logo container styling */
.logo-container {
  display: flex;
  align-items: center;
}

.logo-container img,
.logo-container svg {
  max-height: 40px;
  width: auto;
}

/* Hero section custom styles */
.hero-section {
  background: linear-gradient(135deg, #0B1830 0%, #1a2942 100%);
}

.hero-title {
  background: linear-gradient(135deg, #ffffff 0%, #d4930e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Feature cards */
.feature-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid var(--color-gray-200);
  border-radius: 1rem;
  padding: 2rem;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -15px rgba(212, 147, 14, 0.15);
  border-color: var(--color-primary-300);
}

/* Pricing cards */
.pricing-card {
  border: 2px solid var(--color-gray-200);
  border-radius: 1.5rem;
  padding: 2.5rem;
  transition: all 0.3s ease;
}

.pricing-card.featured {
  border-color: var(--color-primary-500);
  box-shadow: 0 20px 60px -15px rgba(212, 147, 14, 0.3);
  transform: scale(1.05);
}

.pricing-card:hover {
  border-color: var(--color-primary-400);
  box-shadow: 0 20px 40px -15px rgba(212, 147, 14, 0.2);
}

/* CTA sections */
.cta-section {
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-700) 100%);
  color: white;
}

/* Custom utilities */
.text-primary {
  color: var(--color-primary-500) !important;
}

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

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

/* Page background */
body {
  background-color: var(--color-page-bg);
}

/* Responsive typography */
@media (max-width: 768px) {
  .h1 {
    font-size: 2.25rem; /* 36px on mobile */
  }

  .h2 {
    font-size: 1.875rem; /* 30px on mobile */
  }

  .h3 {
    font-size: 1.5rem; /* 24px on mobile */
  }
}