/* Sqube Comprehensive Theme System - Light Theme Default */
@layer base {
  :root {
    /* Base Colors - Light Mode (Default) */
    --text: #1a1a1a;
    --bg: #fff8f0;
    --primary: #8a0000;
    --secondary: #5b3925;
    --accent: #853100;
    --textcontrast: #64d97b;
    --bgcontrast: #64d97b;
    --primarycontrast: #64d97b;
    --secondarycontrast: #64d97b;
    --accentcontrast: #64d97b;

    /* Text Opacity Variations - Light Mode */
    --text5: hsl(0, 0%, 10%, 5%);
    --text10: hsl(0, 0%, 10%, 10%);
    --text15: hsl(0, 0%, 10%, 15%);
    --text20: hsl(0, 0%, 10%, 20%);
    --text25: hsl(0, 0%, 10%, 25%);
    --text30: hsl(0, 0%, 10%, 30%);
    --text35: hsl(0, 0%, 10%, 35%);
    --text40: hsl(0, 0%, 10%, 40%);
    --text45: hsl(0, 0%, 10%, 45%);
    --text50: hsl(0, 0%, 10%, 50%);
    --text55: hsl(0, 0%, 10%, 55%);
    --text60: hsl(0, 0%, 10%, 60%);
    --text65: hsl(0, 0%, 10%, 65%);
    --text70: hsl(0, 0%, 10%, 70%);
    --text75: hsl(0, 0%, 10%, 75%);
    --text80: hsl(0, 0%, 10%, 80%);
    --text85: hsl(0, 0%, 10%, 85%);
    --text90: hsl(0, 0%, 10%, 90%);
    --text95: hsl(0, 0%, 10%, 95%);

    /* Primary Opacity Variations - Light Mode */
    --primary5: hsl(0, 100%, 27%, 5%);
    --primary10: hsl(0, 100%, 27%, 10%);
    --primary15: hsl(0, 100%, 27%, 15%);
    --primary20: hsl(0, 100%, 27%, 20%);
    --primary25: hsl(0, 100%, 27%, 25%);
    --primary30: hsl(0, 100%, 27%, 30%);
    --primary35: hsl(0, 100%, 27%, 35%);
    --primary40: hsl(0, 100%, 27%, 40%);
    --primary45: hsl(0, 100%, 27%, 45%);
    --primary50: hsl(0, 100%, 27%, 50%);
    --primary55: hsl(0, 100%, 27%, 55%);
    --primary60: hsl(0, 100%, 27%, 60%);
    --primary65: hsl(0, 100%, 27%, 65%);
    --primary70: hsl(0, 100%, 27%, 70%);
    --primary75: hsl(0, 100%, 27%, 75%);
    --primary80: hsl(0, 100%, 27%, 80%);
    --primary85: hsl(0, 100%, 27%, 85%);
    --primary90: hsl(0, 100%, 27%, 90%);
    --primary95: hsl(0, 100%, 27%, 95%);

    /* Secondary Opacity Variations - Light Mode */
    --secondary5: hsl(22, 42%, 25%, 5%);
    --secondary10: hsl(22, 42%, 25%, 10%);
    --secondary15: hsl(22, 42%, 25%, 15%);
    --secondary20: hsl(22, 42%, 25%, 20%);
    --secondary25: hsl(22, 42%, 25%, 25%);
    --secondary30: hsl(22, 42%, 25%, 30%);
    --secondary35: hsl(22, 42%, 25%, 35%);
    --secondary40: hsl(22, 42%, 25%, 40%);
    --secondary45: hsl(22, 42%, 25%, 45%);
    --secondary50: hsl(22, 42%, 25%, 50%);
    --secondary55: hsl(22, 42%, 25%, 55%);
    --secondary60: hsl(22, 42%, 25%, 60%);
    --secondary65: hsl(22, 42%, 25%, 65%);
    --secondary70: hsl(22, 42%, 25%, 70%);
    --secondary75: hsl(22, 42%, 25%, 75%);
    --secondary80: hsl(22, 42%, 25%, 80%);
    --secondary85: hsl(22, 42%, 25%, 85%);
    --secondary90: hsl(22, 42%, 25%, 90%);
    --secondary95: hsl(22, 42%, 25%, 95%);

    /* Accent Opacity Variations - Light Mode */
    --accent5: hsl(22, 100%, 26%, 5%);
    --accent10: hsl(22, 100%, 26%, 10%);
    --accent15: hsl(22, 100%, 26%, 15%);
    --accent20: hsl(22, 100%, 26%, 20%);
    --accent25: hsl(22, 100%, 26%, 25%);
    --accent30: hsl(22, 100%, 26%, 30%);
    --accent35: hsl(22, 100%, 26%, 35%);
    --accent40: hsl(22, 100%, 26%, 40%);
    --accent45: hsl(22, 100%, 26%, 45%);
    --accent50: hsl(22, 100%, 26%, 50%);
    --accent55: hsl(22, 100%, 26%, 55%);
    --accent60: hsl(22, 100%, 26%, 60%);
    --accent65: hsl(22, 100%, 26%, 65%);
    --accent70: hsl(22, 100%, 26%, 70%);
    --accent75: hsl(22, 100%, 26%, 75%);
    --accent80: hsl(22, 100%, 26%, 80%);
    --accent85: hsl(22, 100%, 26%, 85%);
    --accent90: hsl(22, 100%, 26%, 90%);
    --accent95: hsl(22, 100%, 26%, 95%);

    /* Legacy Sqube Colors (for backward compatibility) */
    --sqube-red: var(--primary);
    --sqube-brown: var(--secondary);
    --sqube-orange: var(--accent);
    --sqube-cream: var(--bg);
    --sqube-green: #18ac7a;
  }

  .dark {
    /* Base Colors - Dark Mode */
    --text: #e6e6e6;
    --bg: #0f0800;
    --primary: #ff7575;
    --secondary: #dab8a4;
    --accent: #ffab7a;
    --textcontrast: #64d97b;
    --bgcontrast: #64d97b;
    --primarycontrast: #64d97b;
    --secondarycontrast: #64d97b;
    --accentcontrast: #64d97b;

    /* Text Opacity Variations - Dark Mode */
    --text5: hsl(0, 0%, 90%, 5%);
    --text10: hsl(0, 0%, 90%, 10%);
    --text15: hsl(0, 0%, 90%, 15%);
    --text20: hsl(0, 0%, 90%, 20%);
    --text25: hsl(0, 0%, 90%, 25%);
    --text30: hsl(0, 0%, 90%, 30%);
    --text35: hsl(0, 0%, 90%, 35%);
    --text40: hsl(0, 0%, 90%, 40%);
    --text45: hsl(0, 0%, 90%, 45%);
    --text50: hsl(0, 0%, 90%, 50%);
    --text55: hsl(0, 0%, 90%, 55%);
    --text60: hsl(0, 0%, 90%, 60%);
    --text65: hsl(0, 0%, 90%, 65%);
    --text70: hsl(0, 0%, 90%, 70%);
    --text75: hsl(0, 0%, 90%, 75%);
    --text80: hsl(0, 0%, 90%, 80%);
    --text85: hsl(0, 0%, 90%, 85%);
    --text90: hsl(0, 0%, 90%, 90%);
    --text95: hsl(0, 0%, 90%, 95%);

    /* Primary Opacity Variations - Dark Mode */
    --primary5: hsl(0, 100%, 73%, 5%);
    --primary10: hsl(0, 100%, 73%, 10%);
    --primary15: hsl(0, 100%, 73%, 15%);
    --primary20: hsl(0, 100%, 73%, 20%);
    --primary25: hsl(0, 100%, 73%, 25%);
    --primary30: hsl(0, 100%, 73%, 30%);
    --primary35: hsl(0, 100%, 73%, 35%);
    --primary40: hsl(0, 100%, 73%, 40%);
    --primary45: hsl(0, 100%, 73%, 45%);
    --primary50: hsl(0, 100%, 73%, 50%);
    --primary55: hsl(0, 100%, 73%, 55%);
    --primary60: hsl(0, 100%, 73%, 60%);
    --primary65: hsl(0, 100%, 73%, 65%);
    --primary70: hsl(0, 100%, 73%, 70%);
    --primary75: hsl(0, 100%, 73%, 75%);
    --primary80: hsl(0, 100%, 73%, 80%);
    --primary85: hsl(0, 100%, 73%, 85%);
    --primary90: hsl(0, 100%, 73%, 90%);
    --primary95: hsl(0, 100%, 73%, 95%);

    /* Secondary Opacity Variations - Dark Mode */
    --secondary5: hsl(22, 42%, 75%, 5%);
    --secondary10: hsl(22, 42%, 75%, 10%);
    --secondary15: hsl(22, 42%, 75%, 15%);
    --secondary20: hsl(22, 42%, 75%, 20%);
    --secondary25: hsl(22, 42%, 75%, 25%);
    --secondary30: hsl(22, 42%, 75%, 30%);
    --secondary35: hsl(22, 42%, 75%, 35%);
    --secondary40: hsl(22, 42%, 75%, 40%);
    --secondary45: hsl(22, 42%, 75%, 45%);
    --secondary50: hsl(22, 42%, 75%, 50%);
    --secondary55: hsl(22, 42%, 75%, 55%);
    --secondary60: hsl(22, 42%, 75%, 60%);
    --secondary65: hsl(22, 42%, 75%, 65%);
    --secondary70: hsl(22, 42%, 75%, 70%);
    --secondary75: hsl(22, 42%, 75%, 75%);
    --secondary80: hsl(22, 42%, 75%, 80%);
    --secondary85: hsl(22, 42%, 75%, 85%);
    --secondary90: hsl(22, 42%, 75%, 90%);
    --secondary95: hsl(22, 42%, 75%, 95%);

    /* Accent Opacity Variations - Dark Mode */
    --accent5: hsl(22, 100%, 74%, 5%);
    --accent10: hsl(22, 100%, 74%, 10%);
    --accent15: hsl(22, 100%, 74%, 15%);
    --accent20: hsl(22, 100%, 74%, 20%);
    --accent25: hsl(22, 100%, 74%, 25%);
    --accent30: hsl(22, 100%, 74%, 30%);
    --accent35: hsl(22, 100%, 74%, 35%);
    --accent40: hsl(22, 100%, 74%, 40%);
    --accent45: hsl(22, 100%, 74%, 45%);
    --accent50: hsl(22, 100%, 74%, 50%);
    --accent55: hsl(22, 100%, 74%, 55%);
    --accent60: hsl(22, 100%, 74%, 60%);
    --accent65: hsl(22, 100%, 74%, 65%);
    --accent70: hsl(22, 100%, 74%, 70%);
    --accent75: hsl(22, 100%, 74%, 75%);
    --accent80: hsl(22, 100%, 74%, 80%);
    --accent85: hsl(22, 100%, 74%, 85%);
    --accent90: hsl(22, 100%, 74%, 90%);
    --accent95: hsl(22, 100%, 74%, 95%);

    /* Legacy Sqube Colors (for backward compatibility) */
    --sqube-red: var(--primary);
    --sqube-brown: var(--secondary);
    --sqube-orange: var(--accent);
    --sqube-cream: var(--bg);
    --sqube-green: #20c085;
  }
}

/* Background Utility Classes */
.bg-background {
  background-color: var(--bg);
}

.bg-surface {
  background-color: var(--bg);
}

.bg-surface-hover {
  background-color: var(--bg);
}

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

.bg-secondary {
  background-color: var(--secondary);
}

.bg-accent {
  background-color: var(--accent);
}

/* Background Opacity Utility Classes */
.bg-text-5 {
  background-color: var(--text5);
}
.bg-text-10 {
  background-color: var(--text10);
}
.bg-text-15 {
  background-color: var(--text15);
}
.bg-text-20 {
  background-color: var(--text20);
}

.bg-primary-5 {
  background-color: var(--primary5);
}
.bg-primary-10 {
  background-color: var(--primary10);
}
.bg-primary-15 {
  background-color: var(--primary15);
}
.bg-primary-20 {
  background-color: var(--primary20);
}

.bg-accent-5 {
  background-color: var(--accent5);
}
.bg-accent-10 {
  background-color: var(--accent10);
}
.bg-accent-15 {
  background-color: var(--accent15);
}
.bg-accent-20 {
  background-color: var(--accent20);
}

/* Hover Background States */
.hover\\:bg-background:hover {
  background-color: var(--bg);
}

.hover\\:bg-surface:hover {
  background-color: var(--bg);
}

.hover\\:bg-surface-hover:hover {
  background-color: var(--bg);
}

.hover\\:bg-primary:hover {
  background-color: var(--primary);
}

.hover\\:bg-accent:hover {
  background-color: var(--accent);
}

.hover\\:bg-text-10:hover {
  background-color: var(--text10);
}

.hover\\:bg-text-15:hover {
  background-color: var(--text15);
}

.hover\\:bg-accent-10:hover {
  background-color: var(--accent10);
}

.hover\\:bg-accent-15:hover {
  background-color: var(--accent15);
}

/* Additional utility classes for smooth transitions */
* {
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}

/* Mobile Bottom Navigation Styles */
@media (max-width: 1023px) {
  body {
    padding-bottom: 70px; /* Add space for bottom nav */
  }

  .mobile-bottom-nav {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  }

  .mobile-bottom-nav a:active,
  .mobile-bottom-nav button:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
  }

  .mobile-bottom-nav .cart-count {
    font-size: 10px;
    min-width: 18px;
    height: 18px;
    animation: pulse 0.5s ease-in-out;
  }

  .mobile-bottom-nav a,
  .mobile-bottom-nav button {
    transition: all 0.2s ease;
  }

  .mobile-bottom-nav a:hover,
  .mobile-bottom-nav button:hover {
    transform: translateY(-1px);
  }
}

/* Hide mobile nav on print */
@media print {
  .mobile-bottom-nav {
    display: none;
  }
}

/* Swiper Pagination Styles */
.swiper-pagination-bullet {
  background: rgb(var(--primary)) !important;
  opacity: 0.5 !important;
}

.swiper-pagination-bullet-active {
  background: rgb(var(--primary)) !important;
  opacity: 1 !important;
}

.swiper-button-prev,
.swiper-button-next {
  background: rgb(var(--primary)) !important;
  color: white !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
}

.swiper-button-prev:after,
.swiper-button-next:after {
  font-size: 18px !important;
}

/* Global Light Theme Default */
html {
  color-scheme: light;
}

body {
  background-color: var(--bg);
  color: var(--text);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Ensure proper color scheme */
:root {
  color-scheme: light;
}

.dark {
  color-scheme: dark;
}

.dark body {
  background-color: var(--bg);
  color: var(--text);
}