/* Theme variables and component mappings */
:root {
  /* Base neutrals */
  --color-bg: #ffffff;
  --color-surface: #f9fafb; /* gray-50 */
  --color-text: #111827; /* gray-900 */
  --color-muted: #6b7280; /* gray-500 */
  --color-border: #e5e7eb; /* gray-200 */

  /* Brand & semantic */
  --color-primary: #1f3a8a; /* navy blue */
  --color-primary-contrast: #ffffff;
  --color-secondary: #374151; /* gray-700 */
  --color-secondary-contrast: #ffffff;
  --color-accent: #d12028; /* vibrant red for CTAs */
  --color-accent-contrast: #ffffff;

  --color-success: #16a34a; /* green-600 */
  --color-success-contrast: #ffffff;
  --color-warning: #d97706; /* amber-600 */
  --color-warning-contrast: #111827;
  --color-error: #dc2626; /* red-600 */
  --color-error-contrast: #ffffff;
  --color-info: #0284c7; /* sky-600 */
  --color-info-contrast: #ffffff;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.06);
  /* Header sizing */
  --header-height: 100px;
}

[data-theme="dark"] {
  /* Base neutrals */
  --color-bg: #0f1115;
  --color-surface: #161a20;
  --color-text: #e5e7eb; /* gray-200 */
  --color-muted: #a1a1aa; /* gray-400 */
  --color-border: #2a2f3a;

  /* Brand & semantic */
  --color-primary: #60a5fa; /* blue-400 for dark */
  --color-primary-contrast: #0b0e12;
  --color-secondary: #9ca3af; /* gray-400 */
  --color-secondary-contrast: #0b0e12;
  --color-accent: #d12028; /* vibrant red for CTAs */
  --color-accent-contrast: #ffffff;

  --color-success: #22c55e; /* green-500 */
  --color-success-contrast: #0b0e12;
  --color-warning: #f59e0b; /* amber-500 */
  --color-warning-contrast: #0b0e12;
  --color-error: #f87171; /* red-400 */
  --color-error-contrast: #0b0e12;
  --color-info: #38bdf8; /* sky-400 */
  --color-info-contrast: #0b0e12;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.45);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.65), 0 4px 6px rgba(0,0,0,0.45);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

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

a { color: var(--color-primary); }
a:hover, a:focus { color: var(--color-primary); opacity: .85; }

/* Header */
.header, .header__content__lezr { background-color: #16151a; }
.header__nav-link { color: #bdbdbd; transition: color .25s ease; }
.header__nav-link:hover, .header__nav-link[aria-expanded="true"] { color: #d12028; }
.header__content__lezr { min-height: var(--header-height); }
.header__logo { display: flex; align-items: center; height: var(--header-height); }
.header__logo img, .img-fluid.logo-front { height: calc(var(--header-height) - 24px); width: auto; max-height: 100%; object-fit: contain; }
@media (max-width: 767px) { 
  .header__logo img, .img-fluid.logo-front { height: 40px; } 
  :root { --header-height: 70px; }
}
/* Sticky state styles (desktop) */
.sticky .header__content__lezr { 
    position: fixed; 
    left: 0; 
    top: 0; 
    width: 100vw; 
    background: #16151a; 
    z-index: 9999; 
    right: 0; 
    box-shadow: var(--shadow-md); 
    border-bottom: 1px solid #222227; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
}
.sticky > .header { height: var(--header-height); }

/* Enhanced sticky header - lezr.net style */
.header--sticky .header__content__lezr {
    background: rgba(22, 21, 26, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Smooth header transitions */
.header {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Header content smooth transitions */
.header__content__lezr {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth transition for sticky header */
.header__content__lezr {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animation for sticky header appearance */
.header__content__lezr.animated.fadeInDown {
    animation: fadeInDown 0.3s ease-out;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Body scroll lock when mobile menu is open */
body.menu-open { overflow: hidden; position: fixed; width: 100%; }
body.menu-open { -webkit-overflow-scrolling: touch; }
.header__nav-item.dropdown .dropdown-menu {
  background-color: var(--color-surface);
  border-color: var(--color-border);
}
.dropdown-menu .dropdown-item { color: var(--color-text); }
.dropdown-menu .dropdown-item:hover { background-color: var(--color-border); }

/* Buttons */
.btn,
.codeless-add-purchase-button {
  color: var(--color-primary-contrast);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.btn:hover,
.codeless-add-purchase-button:hover {
  filter: brightness(0.95);
  box-shadow: var(--shadow-lg);
}

/* Header CTA buttons use accent color */
.header__action-btn {
  color: var(--color-accent-contrast);
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
.header__action-btn:hover,
.header__action-btn:focus {
  filter: brightness(0.95);
  box-shadow: var(--shadow-lg);
}

/* Semantic buttons mapped to Bootstrap */
.btn-primary { background-color: var(--color-primary) !important; border-color: var(--color-primary) !important; color: var(--color-primary-contrast) !important; }
.btn-secondary { background-color: var(--color-secondary) !important; border-color: var(--color-secondary) !important; color: var(--color-secondary-contrast) !important; }
.btn-accent { background-color: var(--color-accent) !important; border-color: var(--color-accent) !important; color: var(--color-accent-contrast) !important; }
.btn-success { background-color: var(--color-success) !important; border-color: var(--color-success) !important; color: var(--color-success-contrast) !important; }
.btn-warning { background-color: var(--color-warning) !important; border-color: var(--color-warning) !important; color: var(--color-warning-contrast) !important; }
.btn-danger { background-color: var(--color-error) !important; border-color: var(--color-error) !important; color: var(--color-error-contrast) !important; }
.btn-info { background-color: var(--color-info) !important; border-color: var(--color-info) !important; color: var(--color-info-contrast) !important; }

/* Generic surfaces */
.footer-section,
.footer-wrapper,
.footer-widget,
.copyright-text,
.progress-wrap,
.card,
.modal-content,
.widget,
.menu-quick-link-container { 
  background-color: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}

/* Alerts - keep high readability by using surface with colored border */
.alert { background-color: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.alert-success { border-left: 4px solid var(--color-success); }
.alert-warning { border-left: 4px solid var(--color-warning); }
.alert-danger { border-left: 4px solid var(--color-error); }
.alert-info { border-left: 4px solid var(--color-info); }

/* Badges */
.badge-primary { background-color: var(--color-primary); color: var(--color-primary-contrast); }
.badge-secondary { background-color: var(--color-secondary); color: var(--color-secondary-contrast); }
.badge-success { background-color: var(--color-success); color: var(--color-success-contrast); }
.badge-warning { background-color: var(--color-warning); color: var(--color-warning-contrast); }
.badge-danger { background-color: var(--color-error); color: var(--color-error-contrast); }
.badge-info { background-color: var(--color-info); color: var(--color-info-contrast); }

/* Typography */
small, .text-muted, .muted { color: var(--color-muted) !important; }

/* Forms */
input, select, textarea { 
  background-color: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}
input::placeholder, textarea::placeholder { color: var(--color-muted); }

/* Link states */
a:visited { opacity: .95; }
a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Owl carousel dots/arrows adaptation */
.owl-carousel .owl-dot span { background: var(--color-border); }
.owl-carousel .owl-dot.active span { background: var(--color-primary); }

/* Theme toggle button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .5rem .75rem;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.theme-toggle:hover, .theme-toggle:focus { border-color: var(--color-primary); color: var(--color-primary); box-shadow: var(--shadow-md); outline: none; }
.theme-toggle[aria-pressed="true"] { border-color: var(--color-primary); color: var(--color-primary); }
.theme-icon { font-size: 1rem; }
.theme-label { font-size: .85rem; }

/* Ensure high contrast for focus */
:focus { outline-color: var(--color-primary); }

/* Layout utilities: containers, sections, grid, breakpoints */
:root {
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --container-max: 1200px;
}

.container,
.container-narrow,
.container-wide {
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
.container { max-width: var(--container-max); }
.container-narrow { max-width: 860px; }
.container-wide { max-width: 1440px; }

.section { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.section-tight { padding-top: var(--space-8); padding-bottom: var(--space-8); }

/* Basic grid */
.grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: var(--bp-md)) { .grid-md-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: var(--bp-lg)) { .grid-lg-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: var(--bp-xl)) { .grid-xl-4 { grid-template-columns: repeat(4, 1fr); } }

/* Stack utility for vertical rhythm */
.stack > * + * { margin-top: var(--space-4); }
.stack-tight > * + * { margin-top: var(--space-2); }
.stack-loose > * + * { margin-top: var(--space-6); }

/* Accessible skip link */
.skip-link {
  position: absolute;
  top: -1000px;
  left: 0;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  padding: var(--space-2) var(--space-4);
  z-index: 10000;
}
.skip-link:focus { top: 0; }

/* Responsive nav visibility (controlled via JS) */
.header__menu__lezr { transition: transform .25s ease, opacity .25s ease; }
@media (max-width: calc(var(--bp-md) - 1px)) {
  .header__menu__lezr { position: absolute; top: 100%; left: 0; right: 0; background: var(--color-surface); transform: translateY(-8px); opacity: 0; pointer-events: none; }
  .header__menu__lezr--active { transform: translateY(0); opacity: 1; pointer-events: auto; }
}

/* Reveal-on-scroll animations */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; will-change: opacity, transform; }
.reveal--visible { opacity: 1; transform: translateY(0); }
/* Reveal delays */
.reveal--d0 { transition-delay: 0s; }
.reveal--d1 { transition-delay: .1s; }
.reveal--d2 { transition-delay: .2s; }
.reveal--d3 { transition-delay: .3s; }
.reveal--d4 { transition-delay: .4s; }
.reveal--d5 { transition-delay: .5s; }