/* AICHEE Design System - Theme Tokens (v1)
   Primary palette derived from user spec:
   - #8547c3 -> #032d3a (primary)
   - #ffe73e -> #FF7A00 (secondary)
   - #2185d0 -> #DDDDDD (neutral)
   Keep changes purely stylistic, no layout/logic modifications. */

:root {
  --color-primary: #FF7A00;
  --color-primary-hover: #e66f00;

  --color-secondary: #032d3a;
  --color-secondary-hover: #022a33;


  /* Tertiary (Gold) */
  --color-tertiary: #F7C424;
  --color-tertiary-hover: #e0b220;

  --color-neutral: #DDDDDD;
  --color-neutral-hover: #CFCFCF;

  --color-text-on-dark: #ffffff;
  --color-text-on-light: #0f172a; /* slate-900 */
}

/* Buttons (Semantic/Fomantic) - Enhanced with professional gradients */
.ui.button.primary,
.ui.primary.buttons .button {
  background: var(--gradient-brand) !important;
  border-color: transparent !important;
  color: var(--color-text-on-dark) !important;
  box-shadow: 0 4px 6px -1px rgba(255, 122, 0, 0.15) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.ui.button.primary:hover,
.ui.primary.buttons .button:hover {
  background: var(--gradient-brand-hover) !important;
  border-color: transparent !important;
  color: var(--color-text-on-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 15px -3px rgba(255, 122, 0, 0.25) !important;
}

/* Map legacy yellow → secondary (brand orange) with enhanced styling */
.ui.button.yellow,
.ui.yellow.buttons .button,
.ui.yellow.label,
.ui.yellow.labels .label {
  background: var(--gradient-brand) !important;
  border-color: transparent !important;
  color: var(--color-text-on-dark) !important;
  box-shadow: 0 4px 6px -1px rgba(255, 122, 0, 0.15) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ui.button.yellow:hover,
.ui.yellow.buttons .button:hover,
.ui.yellow.label:hover,
.ui.yellow.labels .label:hover {
  background: var(--gradient-brand-hover) !important;
  border-color: transparent !important;
  color: var(--color-text-on-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 15px -3px rgba(255, 122, 0, 0.25) !important;
}

/* Map legacy blue → neutral with enhanced styling */
.ui.button.blue,
.ui.blue.buttons .button,
.ui.blue.label,
.ui.blue.labels .label {
  background: var(--gradient-depth-subtle) !important;
  border-color: var(--depth-300) !important;
  color: var(--depth-700) !important;
  box-shadow: 0 2px 4px -1px rgba(3, 45, 58, 0.1) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Gold accents using luxury palette with professional gradients */
.ui.label.gold,
.ui.ribbon.label.gold,
.badge.gold,
.chip.gold {
  background: var(--gradient-luxury) !important;
  border-color: var(--luxury-600) !important;
  color: var(--color-text-on-light) !important;
  box-shadow: 0 2px 4px -1px rgba(230, 165, 79, 0.15) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.ui.label.gold:hover,
.ui.ribbon.label.gold:hover,
.badge.gold:hover,
.chip.gold:hover {
  background: var(--gradient-luxury-hover) !important;
  border-color: var(--luxury-700) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px -1px rgba(230, 165, 79, 0.25) !important;
}

.ui.button.blue:hover,
.ui.blue.buttons .button:hover,
.ui.blue.label:hover,
.ui.blue.labels .label:hover {
  background: var(--gradient-depth) !important;
  border-color: var(--depth-600) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px -1px rgba(3, 45, 58, 0.2) !important;
}

/* Links, active menu items, subtle accents with enhanced styling */
a,
.ui.menu .item.active,
.ui.steps .step.active {
  color: var(--color-primary) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

a:hover, .ui.menu .item:hover { 
  color: var(--color-primary-hover) !important; 
  transform: translateY(-1px) !important;
  text-shadow: 0 2px 4px rgba(3, 45, 58, 0.2) !important;
}

/* Improve contrast on hero: use brand depth (dark teal) instead of pure white */
#top-menu.home .item,
#top-menu.home .right.menu > .item { color: var(--depth-700) !important; }
#top-menu.home .item.active,
#top-menu.home .right.menu > .item.active { color: var(--depth-700) !important; }
#top-menu.home .item:hover { color: var(--depth-800) !important; }

/* Cart icon count and icon color on hero */
#top-menu.home .cart > div span,
#top-menu.home .cart > div i,
#top-menu.home .cart > div img { filter: none !important; color: var(--depth-700) !important; }

/* Hero main heading color for better readability over orange background */
#top-search .header, #top-search .header *,
#top-search h1, #top-search h2, #top-search .title { color: var(--depth-700) !important; }
a:hover {
  color: var(--color-primary-hover) !important;
}

/* Links focus: remove mouse-focus ring; keep keyboard ring only */
a:focus { outline: none !important; box-shadow: none !important; }
a:focus-visible {
  color: var(--color-primary) !important;
  outline: 2px solid var(--depth-600) !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

/* Generic utility classes for future usage with enhanced styling */
.bg-primary { 
  background: var(--gradient-depth) !important; 
  color: var(--color-text-on-dark) !important; 
  box-shadow: 0 2px 4px -1px rgba(3, 45, 58, 0.15) !important;
  border-radius: 8px !important;
}

.bg-secondary { 
  background: var(--gradient-brand) !important; 
  color: var(--color-text-on-dark) !important; 
  box-shadow: 0 2px 4px -1px rgba(255, 122, 0, 0.15) !important;
  border-radius: 8px !important;
}

.bg-neutral { 
  background: var(--gradient-depth-subtle) !important; 
  color: var(--color-text-on-light) !important; 
  border: 1px solid var(--depth-300) !important;
  border-radius: 8px !important;
}

.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-neutral { color: var(--color-neutral) !important; }


/* Tendra: hero search button → brand orange with enhanced styling */
#top-search form .button {
  background: var(--gradient-brand) !important;
  border-color: transparent !important;
  color: var(--color-text-on-dark) !important;
  box-shadow: 0 4px 6px -1px rgba(255, 122, 0, 0.15) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-radius: 8px !important;
}

#top-search form .button:hover {
  background: var(--gradient-brand-hover) !important;
  border-color: transparent !important;
  color: var(--color-text-on-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 15px -3px rgba(255, 122, 0, 0.25) !important;
}

/* Core design palette tokens (aligned with design-palette.md) */
:root {
  /* === نارنجی برند - Orange Brand Spectrum === */
  --energy-50: #FFF7ED;         /* Tint 95% */
  --energy-100: #FFEDD5;        /* Tint 85% */
  --energy-200: #FED7AA;        /* Tint 70% */
  --energy-300: #FDBA74;        /* Tint 55% */
  --energy-400: #FB923C;        /* Tint 40% */
  --energy-500: #FF7A00;        /* Base Color */
  --energy-600: #FF7A00;        /* Base Color */
  --energy-700: #E66A00;        /* Shade 10% */
  --energy-800: #C2590C;        /* Shade 25% */
  --energy-900: #9A3412;        /* Shade 40% */
  
  /* === آبی سبز تیره - Dark Teal Spectrum === */
  --depth-50: #F0F9FF;          /* Tint 95% */
  --depth-100: #E0F2FE;         /* Tint 85% */
  --depth-200: #BAE6FD;         /* Tint 70% */
  --depth-300: #7DD3FC;         /* Tint 55% */
  --depth-400: #38BDF8;         /* Tint 40% */
  --depth-500: #0EA5E9;         /* Tint 25% */
  --depth-600: #0284C7;         /* Tint 15% */
  --depth-700: #032D3A;         /* Base Color */
  --depth-800: #02232C;         /* Shade 15% */
  --depth-900: #01181F;         /* Shade 30% */
  
  /* === خاکستری متعادل - Neutral Gray Spectrum === */
  --elegance-50: #FAFAFA;       /* Tint 95% */
  --elegance-100: #F5F5F5;      /* Tint 90% */
  --elegance-200: #E5E5E5;      /* Tint 80% */
  --elegance-300: #DDDDDD;      /* Base Color */
  --elegance-400: #DDDDDD;      /* Base Color */
  --elegance-500: #A3A3A3;      /* Shade 25% */
  --elegance-600: #737373;      /* Shade 45% */
  --elegance-700: #525252;      /* Shade 60% */
  
  /* === کهربایی گرم - Warm Amber Spectrum === */
  --luxury-50: #FFFBEB;         /* Tint 95% */
  --luxury-100: #FEF3C7;        /* Tint 85% */
  --luxury-200: #FDE68A;        /* Tint 70% */
  --luxury-300: #FCD34D;        /* Tint 55% */
  --luxury-400: #E6A54F;        /* Base Color */
  --luxury-500: #F0B967;        /* Tint 40% */
  --luxury-600: #E6A54F;        /* Base Color */
  --luxury-700: #D97706;        /* Shade 15% */
  --luxury-800: #B45309;        /* Shade 30% */
  
  /* === رنگ‌های معنایی - Semantic Colors === */
  --success-50: #F0FDF4;        /* Success Light */
  --success-100: #DCFCE7;       /* Success Lighter */
  --success-300: #86EFAC;       /* Success Medium */
  --success-700: #15803D;       /* Success Dark */
  
  --warning-50: #FFFBEB;        /* Warning Light */
  --warning-100: #FEF3C7;       /* Warning Lighter */
  --warning-300: #FCD34D;       /* Warning Medium */
  --warning-700: #B45309;       /* Warning Dark */
  
  --danger-50: #FEF2F2;         /* Danger Light */
  --danger-100: #FEE2E2;        /* Danger Lighter */
  --danger-300: #FCA5A5;        /* Danger Medium */
  --danger-700: #B91C1C;        /* Danger Dark */
}

/* Menus and active states across admin/user with enhanced styling */
.ui.menu .item:hover { 
  color: var(--color-primary) !important; 
  transform: translateY(-1px) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ui.secondary.menu .active.item,
.ui.tabular.menu .active.item { 
  border-color: var(--color-primary) !important; 
  color: var(--color-primary) !important; 
  background: var(--gradient-depth-subtle) !important;
  box-shadow: 0 2px 4px -1px rgba(3, 45, 58, 0.1) !important;
  border-radius: 6px !important;
}

/* Professional gradients and color aliases (aligned with design palette) */
:root {
  --color-primary: var(--depth-700);
  --color-primary-hover: var(--depth-800);
  --color-secondary: var(--energy-600);
  --color-neutral: var(--elegance-400);
  
  /* === گرادیانت‌های حرفه‌ای - Professional Gradients === */
  --gradient-depth: linear-gradient(135deg, var(--depth-600) 0%, var(--depth-800) 100%);
  --gradient-depth-subtle: linear-gradient(135deg, var(--depth-50) 0%, var(--depth-100) 100%);
  
  --gradient-brand: linear-gradient(135deg, var(--energy-600) 0%, var(--energy-700) 100%);
  --gradient-brand-hover: linear-gradient(135deg, var(--energy-700) 0%, var(--energy-800) 100%);
  --gradient-brand-soft: linear-gradient(135deg, var(--energy-50) 0%, var(--energy-100) 100%);
  
  --gradient-luxury: linear-gradient(135deg, var(--luxury-500) 0%, var(--luxury-600) 100%);
  --gradient-luxury-hover: linear-gradient(135deg, var(--luxury-600) 0%, var(--luxury-700) 100%);
  
  /* === گرادیانت‌های ترکیبی هارمونیک === */
  --gradient-brand-primary: linear-gradient(135deg, var(--energy-600) 0%, var(--luxury-600) 100%);
  --gradient-brand-secondary: linear-gradient(135deg, var(--depth-600) 0%, var(--energy-600) 100%);
  --gradient-brand-tertiary: linear-gradient(135deg, var(--luxury-600) 0%, var(--energy-600) 50%, var(--depth-700) 100%);
  
  /* === گرادیانت‌های رادیال برای افکت‌های ویژه === */
  --gradient-radial-brand: radial-gradient(circle at center, var(--energy-600) 0%, var(--energy-700) 70%, var(--energy-800) 100%);
  --gradient-radial-depth: radial-gradient(circle at center, var(--depth-600) 0%, var(--depth-700) 70%, var(--depth-800) 100%);
}

/* Semantic messages/labels mapping (aligned with design palette) */
.ui.message.info, .ui.label.info { 
  border-color: var(--depth-500) !important; 
  background: linear-gradient(135deg, var(--depth-50), var(--depth-100)) !important; 
  color: var(--depth-700) !important; 
}
.ui.message.success, .ui.label.success { 
  border-color: var(--success-300) !important; 
  background: linear-gradient(135deg, var(--success-50), var(--success-100)) !important; 
  color: var(--success-700) !important; 
}
.ui.message.warning, .ui.label.warning { 
  border-color: var(--warning-300) !important; 
  background: linear-gradient(135deg, var(--warning-50), var(--warning-100)) !important; 
  color: var(--warning-700) !important; 
}
.ui.message.error, .ui.label.error { 
  border-color: var(--danger-300) !important; 
  background: linear-gradient(135deg, var(--danger-50), var(--danger-100)) !important; 
  color: var(--danger-700) !important; 
}

/* Form focus states (login, inputs) with enhanced styling */
.ui.form input:focus, .ui.input > input:focus {
  border-color: var(--color-secondary) !important;
  box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.15) !important;
  transform: translateY(-1px) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ui.button:focus {
  box-shadow: 0 0 0 3px rgba(3, 45, 58, 0.15) !important;
  transform: scale(1.02) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Checkbox/Radio and dropdown highlights with enhanced styling */
.ui.checkbox input:focus ~ label:before { 
  border-color: var(--color-secondary) !important; 
  box-shadow: 0 0 0 2px rgba(255, 122, 0, 0.15) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ui.checkbox input:checked ~ label:before { 
  background: var(--gradient-brand) !important; 
  border-color: var(--color-secondary) !important; 
  box-shadow: 0 2px 4px -1px rgba(255, 122, 0, 0.2) !important;
}

.ui.selection.dropdown:hover { 
  border-color: var(--color-primary) !important; 
  transform: translateY(-1px) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ui.selection.active.dropdown { 
  border-color: var(--color-primary) !important; 
  box-shadow: 0 0 0 1px var(--color-primary) inset !important; 
  transform: translateY(-1px) !important;
}

/* Admin left sidebar: brand depth background & contrast with enhanced styling */
#content .l-side-wrapper { 
  background: var(--gradient-depth) !important; 
  color: var(--color-text-on-dark) !important; 
  box-shadow: 2px 0 8px rgba(3, 45, 58, 0.15) !important;
}

#content .l-side-wrapper .ui.header,
#content .l-side-wrapper .ui.header *,
#content .l-side-wrapper .vertical.menu .item { 
  color: var(--color-text-on-dark) !important; 
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#content .l-side-wrapper .vertical.menu .item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translateX(4px) !important;
}

/* Footer newsletter CTA button (Axies/Tendra) with enhanced styling */
#footer .newsletter .wrapper button.ui.button {
  background: var(--gradient-brand) !important;
  border-color: transparent !important;
  color: var(--color-text-on-dark) !important;
  box-shadow: 0 4px 6px -1px rgba(255, 122, 0, 0.15) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-radius: 8px !important;
}

#footer .newsletter .wrapper button.ui.button:hover {
  background: var(--gradient-brand-hover) !important;
  border-color: transparent !important;
  color: var(--color-text-on-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 15px -3px rgba(255, 122, 0, 0.25) !important;
}

/* Admin dashboard: map card header backgrounds to professional palette */
#dashboard .cards.general .card.items .content.top { 
  background: var(--gradient-depth) !important; 
  color: var(--color-text-on-dark) !important; 
  box-shadow: 0 4px 6px -1px rgba(3, 45, 58, 0.15) !important;
}
#dashboard .cards.general .card.orders .content.top { 
  background: var(--gradient-brand) !important; 
  box-shadow: 0 4px 6px -1px rgba(255, 122, 0, 0.15) !important;
}
#dashboard .cards.general .card.earnings .content.top { 
  background: var(--gradient-luxury) !important; 
  color: var(--color-text-on-light) !important; 
  box-shadow: 0 4px 6px -1px rgba(230, 165, 79, 0.15) !important;
}
#dashboard .cards.general .card.users .content.top { 
  background: var(--gradient-brand) !important; 
  box-shadow: 0 4px 6px -1px rgba(255, 122, 0, 0.15) !important;
}
#dashboard .cards.general .card.comments .content.top { 
  background: var(--gradient-brand) !important; 
  box-shadow: 0 4px 6px -1px rgba(255, 122, 0, 0.15) !important;
}
#dashboard .cards.general .card.subscribers .content.top { 
  background: var(--gradient-depth) !important; 
  color: var(--color-text-on-dark) !important; 
  box-shadow: 0 4px 6px -1px rgba(3, 45, 58, 0.15) !important;
}
#dashboard .cards.general .card.categories .content.top { 
  background: var(--gradient-brand) !important; 
  box-shadow: 0 4px 6px -1px rgba(255, 122, 0, 0.15) !important;
}
#dashboard .cards.general .card.posts .content.top { 
  background: var(--gradient-depth) !important; 
  color: var(--color-text-on-dark) !important; 
  box-shadow: 0 4px 6px -1px rgba(3, 45, 58, 0.15) !important;
}

/* Product price header: highlight with professional depth gradient */
#item > .purchase > .ui.menu > .item.header { 
  background: var(--gradient-depth) !important; 
  color: var(--color-text-on-dark) !important;
  box-shadow: 0 4px 6px -1px rgba(3, 45, 58, 0.15) !important;
  border-radius: 8px 8px 0 0 !important;
}

/* Info/notice banner accent on product page with enhanced styling */
#item > .message { 
  border-right-color: var(--energy-600) !important; 
  color: var(--energy-600) !important; 
  background: var(--gradient-brand-soft) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 4px -1px rgba(255, 122, 0, 0.1) !important;
}

/* Modern CTA: Buy/Add-to-cart pill button with professional gradients */
#item > .purchase .item.cart-action,
#item > .purchase .item.add-to-cart,
#item > .purchase .item.buy-now {
  background: var(--gradient-brand) !important;
  color: #fff !important; 
  border-radius: 9999px; 
  padding: 0.6rem 1.1rem;
  box-shadow: 0 10px 15px -3px rgba(255,122,0,.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: none !important;
}

#item > .purchase .item.cart-action:hover,
#item > .purchase .item.add-to-cart:hover,
#item > .purchase .item.buy-now:hover { 
  background: var(--gradient-brand-hover) !important; 
  transform: translateY(-2px) scale(1.02) !important; 
  box-shadow: 0 15px 25px -5px rgba(255,122,0,.25) !important;
}

/* Modern license dropdown styling with enhanced design */
#item > .purchase .ui.dropdown.licenses > .text {
  background: #fff; 
  border: 1px solid var(--depth-300) !important; 
  border-radius: 9999px !important;
  padding: 0.5rem 0.9rem; 
  color: var(--depth-700) !important; 
  font-weight: 600;
  box-shadow: 0 2px 4px -1px rgba(3, 45, 58, 0.1) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#item > .purchase .ui.dropdown.licenses > .text:hover {
  border-color: var(--energy-600) !important;
  box-shadow: 0 4px 8px -1px rgba(255, 122, 0, 0.15) !important;
  transform: translateY(-1px) !important;
}

/* Ratings row: align to modern minimal style with enhanced design */
.image.rating svg, .image.rating img { 
  filter: none; 
  opacity: 1; 
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.image.rating { 
  gap: 2px; 
  padding: 0.5rem 0;
}

.image.rating svg:hover, .image.rating img:hover {
  transform: scale(1.1) !important;
  filter: drop-shadow(0 2px 4px rgba(255, 122, 0, 0.2)) !important;
}