/* Travel Royalty Design System - Button Tokens
   Created: 2025-07-11
   This file contains the design tokens for buttons across the site
   to ensure consistency and maintainability.
*/

/* 
 * Button Base Styles - 3D Layered Shadow Effect
 * These are the foundational styles for all buttons in the system
 */
:root {
  /*
   * =================================================================================================
   * HERO SECTION & MODERN UI TOKENS
   * =================================================================================================
   * These tokens are specifically for the new hero section and other modern UI components.
   * They introduce a liquid glass effect and a more refined color and shadow system.
   * =================================================================================================
   */

  /* Modern Color Palette */
  --modern-bg: #020409;
  --modern-bg-transparent: rgba(2, 4, 9, 0.97);
  --modern-card-bg: rgba(10, 15, 25, 0.6);
  --modern-card-border: rgba(255, 255, 255, 0.1);
  --modern-card-hover-border: rgba(255, 255, 255, 0.25);
  --modern-accent: #00A9FF;
  --modern-accent-hover: #38B6FF;
  --modern-text-primary: #F0F4F8;
  --modern-text-secondary: #A0B0C0;

  /* Liquid Glass Effect */
  --liquid-glass-bg: radial-gradient(ellipse 80% 50% at 50% 120%, rgba(120, 120, 255, 0.07), transparent),
                     radial-gradient(ellipse 50% 80% at 30% 130%, rgba(0, 255, 255, 0.07), transparent),
                     radial-gradient(ellipse 50% 80% at 80% 130%, rgba(255, 0, 255, 0.07), transparent);
  --liquid-glass-backdrop-filter: blur(24px);
  --liquid-glass-border-image: conic-gradient(from 205deg at 50% 50%, rgba(0, 169, 255, 0.5) 0deg, rgba(255, 0, 255, 0.5) 180deg, rgba(0, 169, 255, 0.5) 360deg) 1;

  /* Modern Shadows & Elevation */
  --shadow-glow-sm: 0 0 10px rgba(0, 169, 255, 0.1), 0 0 20px rgba(0, 169, 255, 0.05);
  --shadow-glow-md: 0 0 20px rgba(0, 169, 255, 0.15), 0 0 40px rgba(0, 169, 255, 0.1);
  --shadow-glow-lg: 0 0 30px rgba(0, 169, 255, 0.2), 0 0 60px rgba(0, 169, 255, 0.15);
  --shadow-card-default: 0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.3);

  /* Transitions */
  --transition-fast: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-medium: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-slow: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Button Shadow Variables */
  --btn-shadow-inset: inset 0 0.0625em 0 0 rgba(255, 255, 255, 0.2);
  --btn-shadow-sm-1: 0 0.0625em 0 0 rgba(0, 0, 0, 0.1);
  --btn-shadow-sm-2: 0 0.125em 0 0 rgba(0, 0, 0, 0.1);
  --btn-shadow-md-1: 0 0.25em 0 0 rgba(0, 0, 0, 0.1);
  --btn-shadow-md-2: 0 0.3125em 0 0 rgba(0, 0, 0, 0.1);
  --btn-shadow-lg-1: 0 0.375em 0 0 rgba(0, 0, 0, 0.08);
  --btn-shadow-lg-2: 0 0.425em 0.5em 0 rgba(0, 0, 0, 0.15);
  
  /* Button Active Shadow Variables */
  --btn-active-shadow-inset: inset 0 0.03em 0 0 rgba(255, 255, 255, 0.2);
  --btn-active-shadow-sm-1: 0 0.03em 0 0 rgba(0, 0, 0, 0.1);
  --btn-active-shadow-sm-2: 0 0.0625em 0 0 rgba(0, 0, 0, 0.1);
  --btn-active-shadow-md-1: 0 0.125em 0 0 rgba(0, 0, 0, 0.1);
  --btn-active-shadow-md-2: 0 0.125em 0 0 rgba(0, 0, 0, 0.1);
  --btn-active-shadow-lg-1: 0 0.2em 0 0 rgba(0, 0, 0, 0.08);
  --btn-active-shadow-lg-2: 0 0.225em 0.375em 0 rgba(0, 0, 0, 0.15);
  
  /* Primary Button Shadow Variables (Blue) */
  --btn-primary-shadow-inset: inset 0 0.0625em 0 0 rgba(255, 255, 255, 0.2);
  --btn-primary-shadow-sm-1: 0 0.0625em 0 0 rgba(37, 99, 235, 0.1);
  --btn-primary-shadow-sm-2: 0 0.125em 0 0 rgba(37, 99, 235, 0.1);
  --btn-primary-shadow-md-1: 0 0.25em 0 0 rgba(37, 99, 235, 0.1);
  --btn-primary-shadow-md-2: 0 0.3125em 0 0 rgba(37, 99, 235, 0.1);
  --btn-primary-shadow-lg-1: 0 0.375em 0 0 rgba(37, 99, 235, 0.08);
  --btn-primary-shadow-lg-2: 0 0.425em 0.5em 0 rgba(37, 99, 235, 0.15);
  
  /* Secondary Button Shadow Variables (Light Blue) */
  --btn-secondary-shadow-inset: inset 0 0.0625em 0 0 rgba(255, 255, 255, 0.2);
  --btn-secondary-shadow-sm-1: 0 0.0625em 0 0 rgba(74, 134, 232, 0.1);
  --btn-secondary-shadow-sm-2: 0 0.125em 0 0 rgba(74, 134, 232, 0.08);
  --btn-secondary-shadow-md-1: 0 0.25em 0 0 rgba(74, 134, 232, 0.06);
  --btn-secondary-shadow-md-2: 0 0.3125em 0 0 rgba(74, 134, 232, 0.04);
  --btn-secondary-shadow-lg-1: 0 0.375em 0 0 rgba(74, 134, 232, 0.02);
  --btn-secondary-shadow-lg-2: 0 0.425em 0.5em 0 rgba(74, 134, 232, 0.1);
  
  /* Accent Button Shadow Variables (Gold) */
  --btn-accent-shadow-inset: inset 0 0.0625em 0 0 rgba(255, 255, 255, 0.1);
  --btn-accent-shadow-sm-1: 0 0.0625em 0 0 rgba(246, 189, 96, 0.1);
  --btn-accent-shadow-sm-2: 0 0.125em 0 0 rgba(246, 189, 96, 0.08);
  --btn-accent-shadow-md-1: 0 0.25em 0 0 rgba(246, 189, 96, 0.06);
  --btn-accent-shadow-md-2: 0 0.3125em 0 0 rgba(246, 189, 96, 0.04);
  --btn-accent-shadow-lg-1: 0 0.375em 0 0 rgba(246, 189, 96, 0.02);
  --btn-accent-shadow-lg-2: 0 0.425em 0.5em 0 rgba(246, 189, 96, 0.1);
}

/* 
 * Button Base Class
 * This class should be applied to all buttons in the system
 */
.btn, 
button:not(.carousel-button):not(.tab-button),
.search-button,
.book-now-btn,
.explore-more {
  position: relative;
  font-weight: 600;
  transition: all 0.15s ease;
  cursor: pointer;
}

/* 
 * Primary Button Style
 */
.btn-primary,
.search-button,
.book-now-btn {
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 50px;
  padding: 12px 24px;
  font-size: 1rem;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    var(--btn-primary-shadow-inset),
    var(--btn-primary-shadow-sm-1),
    var(--btn-primary-shadow-sm-2),
    var(--btn-primary-shadow-md-1),
    var(--btn-primary-shadow-md-2),
    var(--btn-primary-shadow-lg-1),
    var(--btn-primary-shadow-lg-2);
}

.btn-primary:hover,
.search-button:hover,
.book-now-btn:hover {
  background-color: #2563eb;
}

.btn-primary:active,
.search-button:active,
.book-now-btn:active {
  translate: 0 0.225em;
  box-shadow: 
    var(--btn-active-shadow-inset),
    var(--btn-active-shadow-sm-1),
    var(--btn-active-shadow-sm-2),
    var(--btn-active-shadow-md-1),
    var(--btn-active-shadow-md-2),
    var(--btn-active-shadow-lg-1),
    var(--btn-active-shadow-lg-2);
}

/* 
 * Secondary Button Style
 */
.btn-secondary,
.explore-more {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing-unit));
  color: #4a86e8;
  font-weight: 600;
  border: 1px solid #4a86e8;
  border-radius: 999px;
  padding: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 2);
  font-size: 0.9rem;
  background-color: transparent;
  box-shadow: 
    var(--btn-secondary-shadow-inset),
    var(--btn-secondary-shadow-sm-1),
    var(--btn-secondary-shadow-sm-2),
    var(--btn-secondary-shadow-md-1),
    var(--btn-secondary-shadow-md-2),
    var(--btn-secondary-shadow-lg-1),
    var(--btn-secondary-shadow-lg-2);
}

.btn-secondary:hover,
.explore-more:hover {
  background-color: rgba(74, 134, 232, 0.05);
}

.btn-secondary:active,
.explore-more:active {
  translate: 0 0.225em;
  box-shadow: 
    var(--btn-active-shadow-inset),
    var(--btn-active-shadow-sm-1),
    var(--btn-active-shadow-sm-2),
    var(--btn-active-shadow-md-1),
    var(--btn-active-shadow-md-2),
    var(--btn-active-shadow-lg-1),
    var(--btn-active-shadow-lg-2);
}

/* 
 * Accent Button Style (Gold)
 */
.btn-accent,
.dark-luxury-section .explore-more {
  color: var(--accent-color);
  border: 1px solid var(--accent-color);
  padding: 0.5rem 1.5rem;
  border-radius: var(--border-radius-md);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  background-color: transparent;
  box-shadow: 
    var(--btn-accent-shadow-inset),
    var(--btn-accent-shadow-sm-1),
    var(--btn-accent-shadow-sm-2),
    var(--btn-accent-shadow-md-1),
    var(--btn-accent-shadow-md-2),
    var(--btn-accent-shadow-lg-1),
    var(--btn-accent-shadow-lg-2);
}

.btn-accent:hover,
.dark-luxury-section .explore-more:hover {
  background-color: var(--accent-color);
  color: #0f172a;
}

.btn-accent:active,
.dark-luxury-section .explore-more:active {
  translate: 0 0.225em;
  box-shadow: 
    var(--btn-active-shadow-inset),
    var(--btn-active-shadow-sm-1),
    var(--btn-active-shadow-sm-2),
    var(--btn-active-shadow-md-1),
    var(--btn-active-shadow-md-2),
    var(--btn-active-shadow-lg-1),
    var(--btn-active-shadow-lg-2);
}

/* 
 * Special Button Styles
 */

/* Button with icon */
.btn-icon,
.search-button i,
.explore-more i {
  display: inline-flex;
  align-items: center;
}

.btn-icon i,
.search-button i {
  margin-right: 8px;
}

.explore-more i {
  margin-left: 4px;
}

/* Small Button */
.btn-sm {
  padding: 8px 16px;
  font-size: 0.875rem;
}

/* Large Button */
.btn-lg {
  padding: 16px 32px;
  font-size: 1.125rem;
}

/* Full Width Button */
.btn-block {
  display: block;
  width: 100%;
}

/* Disabled Button */
.btn:disabled,
button:disabled,
.search-button:disabled,
.book-now-btn:disabled,
.explore-more:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

/* Responsive Adjustments */
@media (max-width: 640px) {
  .btn, 
  button:not(.carousel-button):not(.tab-button),
  .search-button,
  .book-now-btn {
    padding: 10px 20px;
    font-size: 0.9rem;
  }
  
  .explore-more {
    padding: calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 1.5);
    font-size: 0.85rem;
  }
}