/**
 * NUGUI Product-Specific Themes & Utilities
 * Product color schemes and theme utilities
 */

/* ===== Product Theme Variables ===== */
:root {
  /* CCS Gold Gradients */
  --gradient-gold-ccs: linear-gradient(135deg, var(--color-gold-ccs-light) 0%, var(--color-gold-ccs-dark) 100%);
  --gradient-gold-ccs-light: linear-gradient(135deg, #E4C48E 0%, #AF8F4C 100%);
  
  /* Data Purple Gradients */
  --gradient-purple-data: linear-gradient(135deg, var(--color-purple-data-light) 0%, var(--color-purple-data-dark) 100%);
  --gradient-purple-data-light: linear-gradient(135deg, #B79CEB 0%, #6D4DA8 100%);
  
  /* SIP Green Gradients */
  --gradient-green-sip: linear-gradient(135deg, var(--color-green-sip-light) 0%, var(--color-green-sip-dark) 100%);
  --gradient-green-sip-light: linear-gradient(135deg, #A4D79B 0%, #348E4E 100%);
  
  /* SMS Orange Gradients */
  --gradient-orange-sms: linear-gradient(135deg, var(--color-orange-sms-light) 0%, var(--color-orange-sms-dark) 100%);
  --gradient-orange-sms-light: linear-gradient(135deg, #F5B097 0%, #CF5B24 100%);
}

/* Dark Theme Gradient Overrides */
[data-theme="dark"] {
  /* CCS Gold Gradients - Dark Theme */
  --gradient-gold-ccs: linear-gradient(135deg, #806633 0%, #C6A564 100%);
  
  /* Data Purple Gradients - Dark Theme */
  --gradient-purple-data: linear-gradient(135deg, #4F3A7F 0%, #8E67CC 100%);
  
  /* SIP Green Gradients - Dark Theme */
  --gradient-green-sip: linear-gradient(135deg, #1E6132 0%, #5FB673 100%);
  
  /* SMS Orange Gradients - Dark Theme */
  --gradient-orange-sms: linear-gradient(135deg, #A84215 0%, #E87D4E 100%);
}

/* ========================================
   PRODUCT THEME SECTIONS
   ======================================== */

/* CCS (Call Control System) - Gold Theme */
.theme-ccs,
.ccs-section {
  --theme-primary: var(--color-gold-ccs);
  --theme-primary-light: var(--color-gold-ccs-light);
  --theme-primary-dark: var(--color-gold-ccs-dark);
  --theme-gradient: var(--gradient-gold-ccs);
}

/* Data Processing - Purple Theme */
.theme-data,
.data-section {
  --theme-primary: var(--color-purple-data);
  --theme-primary-light: var(--color-purple-data-light);
  --theme-primary-dark: var(--color-purple-data-dark);
  --theme-gradient: var(--gradient-purple-data);
}

/* SIP/Voice - Green Theme */
.theme-sip,
.sip-section {
  --theme-primary: var(--color-green-sip);
  --theme-primary-light: var(--color-green-sip-light);
  --theme-primary-dark: var(--color-green-sip-dark);
  --theme-gradient: var(--gradient-green-sip);
}

/* SMS Gateway - Orange Theme */
.theme-sms,
.sms-section {
  --theme-primary: var(--color-orange-sms);
  --theme-primary-light: var(--color-orange-sms-light);
  --theme-primary-dark: var(--color-orange-sms-dark);
  --theme-gradient: var(--gradient-orange-sms);
}

/* ========================================
   PRODUCT COLOR UTILITIES
   ======================================== */

/* CCS Gold Utilities */
.bg-ccs { background-color: var(--color-gold-ccs); }
.bg-ccs-light { background-color: var(--color-gold-ccs-light); }
.bg-ccs-dark { background-color: var(--color-gold-ccs-dark); }
.bg-gradient-ccs { background: var(--gradient-gold-ccs); }

.text-ccs { color: var(--color-gold-ccs); }
.text-ccs-light { color: var(--color-gold-ccs-light); }
.text-ccs-dark { color: var(--color-gold-ccs-dark); }

.border-ccs { border-color: var(--color-gold-ccs); }
.border-ccs-light { border-color: var(--color-gold-ccs-light); }
.border-ccs-dark { border-color: var(--color-gold-ccs-dark); }

/* Data Purple Utilities */
.bg-data { background-color: var(--color-purple-data); }
.bg-data-light { background-color: var(--color-purple-data-light); }
.bg-data-dark { background-color: var(--color-purple-data-dark); }
.bg-gradient-data { background: var(--gradient-purple-data); }

.text-data { color: var(--color-purple-data); }
.text-data-light { color: var(--color-purple-data-light); }
.text-data-dark { color: var(--color-purple-data-dark); }

.border-data { border-color: var(--color-purple-data); }
.border-data-light { border-color: var(--color-purple-data-light); }
.border-data-dark { border-color: var(--color-purple-data-dark); }

/* SIP Green Utilities */
.bg-sip { background-color: var(--color-green-sip); }
.bg-sip-light { background-color: var(--color-green-sip-light); }
.bg-sip-dark { background-color: var(--color-green-sip-dark); }
.bg-gradient-sip { background: var(--gradient-green-sip); }

.text-sip { color: var(--color-green-sip); }
.text-sip-light { color: var(--color-green-sip-light); }
.text-sip-dark { color: var(--color-green-sip-dark); }

.border-sip { border-color: var(--color-green-sip); }
.border-sip-light { border-color: var(--color-green-sip-light); }
.border-sip-dark { border-color: var(--color-green-sip-dark); }

/* SMS Orange Utilities */
.bg-sms { background-color: var(--color-orange-sms); }
.bg-sms-light { background-color: var(--color-orange-sms-light); }
.bg-sms-dark { background-color: var(--color-orange-sms-dark); }
.bg-gradient-sms { background: var(--gradient-orange-sms); }

.text-sms { color: var(--color-orange-sms); }
.text-sms-light { color: var(--color-orange-sms-light); }
.text-sms-dark { color: var(--color-orange-sms-dark); }

.border-sms { border-color: var(--color-orange-sms); }
.border-sms-light { border-color: var(--color-orange-sms-light); }
.border-sms-dark { border-color: var(--color-orange-sms-dark); }

/* ========================================
   PRODUCT-SPECIFIC COMPONENTS
   ======================================== */

/* Product Buttons */
.btn-ccs {
  background: var(--gradient-gold-ccs);
  color: white;
  border: none;
  transition: all 0.3s ease;
}

.btn-ccs:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(198, 165, 100, 0.3);
}

.btn-data {
  background: var(--gradient-purple-data);
  color: white;
  border: none;
  transition: all 0.3s ease;
}

.btn-data:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(142, 103, 204, 0.3);
}

.btn-sip {
  background: var(--gradient-green-sip);
  color: white;
  border: none;
  transition: all 0.3s ease;
}

.btn-sip:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(95, 182, 115, 0.3);
}

.btn-sms {
  background: var(--gradient-orange-sms);
  color: white;
  border: none;
  transition: all 0.3s ease;
}

.btn-sms:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(232, 125, 78, 0.3);
}

/* Product Cards */
.card-ccs {
  border-left: 4px solid var(--color-gold-ccs);
  box-shadow: 0 4px 15px rgba(198, 165, 100, 0.1);
}

.card-ccs:hover {
  box-shadow: 0 8px 25px rgba(198, 165, 100, 0.2);
}

.card-data {
  border-left: 4px solid var(--color-purple-data);
  box-shadow: 0 4px 15px rgba(142, 103, 204, 0.1);
}

.card-data:hover {
  box-shadow: 0 8px 25px rgba(142, 103, 204, 0.2);
}

.card-sip {
  border-left: 4px solid var(--color-green-sip);
  box-shadow: 0 4px 15px rgba(95, 182, 115, 0.1);
}

.card-sip:hover {
  box-shadow: 0 8px 25px rgba(95, 182, 115, 0.2);
}

.card-sms {
  border-left: 4px solid var(--color-orange-sms);
  box-shadow: 0 4px 15px rgba(232, 125, 78, 0.1);
}

.card-sms:hover {
  box-shadow: 0 8px 25px rgba(232, 125, 78, 0.2);
}

/* Product Hero Sections */
.hero-ccs { background: var(--gradient-gold-ccs); }
.hero-data { background: var(--gradient-purple-data); }
.hero-sip { background: var(--gradient-green-sip); }
.hero-sms { background: var(--gradient-orange-sms); }

/* Text Gradient Utilities */
.text-gradient-ccs {
  background: var(--gradient-gold-ccs);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.text-gradient-data {
  background: var(--gradient-purple-data);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.text-gradient-sip {
  background: var(--gradient-green-sip);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.text-gradient-sms {
  background: var(--gradient-orange-sms);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */
@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem 0;
  }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  .btn-ccs:hover,
  .btn-data:hover,
  .btn-sip:hover,
  .btn-sms:hover {
    transform: none;
  }
}

@media (prefers-contrast: high) {
  .btn-ccs,
  .btn-data,
  .btn-sip,
  .btn-sms {
    border: 2px solid currentColor;
  }
}