/**
 * Navbar CSS Variables System
 *
 * Centralized design tokens for the navbar component
 * Supports light/dark themes with automatic switching
 *
 * @package TwinsRealEstate
 * @author Senior Software Engineer
 * @version 2.0.0
 */

/* ==========================================================================
   Root CSS Custom Properties
   ========================================================================== */

:root {
  /* ===== Core Colors ===== */
  --navbar-bg-light: rgba(255, 255, 255, 0.95);
  --navbar-bg-dark: rgba(0, 0, 0, 0.95);          /* Ultra black */
  --navbar-border-light: rgba(229, 231, 235, 0.8);
  --navbar-border-dark: rgba(42, 42, 42, 0.6);    /* Ultra black borders */

  /* ===== Text Colors ===== */
  --navbar-text-primary-light: rgb(17, 24, 39);
  --navbar-text-primary-dark: rgb(255, 255, 255);      /* Pure white */
  --navbar-text-secondary-light: rgb(75, 85, 99);
  --navbar-text-secondary-dark: rgb(224, 224, 224);    /* Light grey */
  --navbar-text-muted-light: rgb(156, 163, 175);
  --navbar-text-muted-dark: rgb(107, 114, 128);

  /* ===== Interactive States ===== */
  --navbar-hover-light: rgba(243, 244, 246, 0.8);
  --navbar-hover-dark: rgba(26, 26, 26, 0.8);        /* Ultra black hover */
  --navbar-active-light: rgba(59, 130, 246, 0.1);
  --navbar-active-dark: rgba(59, 130, 246, 0.2);

  /* ===== Brand Colors ===== */
  --navbar-primary: rgb(59, 130, 246);
  --navbar-primary-hover: rgb(37, 99, 235);
  --navbar-success: rgb(16, 185, 129);
  --navbar-danger: rgb(239, 68, 68);
  --navbar-warning: rgb(245, 158, 11);

  /* ===== Shadows & Effects ===== */
  --navbar-shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --navbar-shadow-dark: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); /* Enhanced for ultra black */
  --navbar-shadow-hover: 0 4px 25px rgba(0, 0, 0, 0.3);
  --navbar-glow: 0 0 20px rgba(59, 130, 246, 0.3);

  /* ===== Backdrop Effects ===== */
  --navbar-backdrop-blur: blur(20px);
  --navbar-backdrop-saturate: saturate(180%);

  /* ===== Dimensions ===== */
  --navbar-height: 56px; /* Reduced from 72px for more compact navbar */
  --navbar-height-mobile: 50px; /* Even more compact on mobile */
  --site-header-height: var(--navbar-height, 56px);
  --navbar-z-index: var(--z-index-sticky, 1020); /* Use global z-index scale */
  --navbar-border-radius: 12px;
  --navbar-spacing-xs: 0.25rem;
  --navbar-spacing-sm: 0.5rem;
  --navbar-spacing-md: 1rem;
  --navbar-spacing-lg: 1.5rem;
  --navbar-spacing-xl: 2rem;

  /* ===== Transitions ===== */
  --navbar-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --navbar-transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --navbar-transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --navbar-transition-bounce: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ===== Typography ===== */
  --navbar-font-weight-normal: 400;
  --navbar-font-weight-medium: 500;
  --navbar-font-weight-semibold: 600;
  --navbar-font-weight-bold: 700;

  /* ===== Logo Animations ===== */
  --navbar-logo-scale: 1;
  --navbar-logo-rotate: 0deg;
}

@media (max-width: 1024px) {
  :root {
    --site-header-height: var(--navbar-height-mobile, 50px);
  }
}

/* ==========================================================================
   Dark Mode Theme Variables
   ========================================================================== */

[data-theme="dark"],
.dark-mode,
html.dark {
  --navbar-bg: var(--navbar-bg-dark);
  --navbar-border: var(--navbar-border-dark);
  --navbar-text-primary: var(--navbar-text-primary-dark);
  --navbar-text-secondary: var(--navbar-text-secondary-dark);
  --navbar-text-muted: var(--navbar-text-muted-dark);
  --navbar-hover: var(--navbar-hover-dark);
  --navbar-active: var(--navbar-active-dark);
  --navbar-shadow: var(--navbar-shadow-dark);

  /* Enhanced dark mode specific colors */
  --navbar-accent: rgb(99, 102, 241);
  --navbar-accent-hover: rgb(79, 70, 229);
  --navbar-surface: rgba(31, 41, 55, 0.8);
  --navbar-surface-hover: rgba(55, 65, 81, 0.9);
}

/* Dark mode - non-transparent navbar should have light text and dark background */
[data-theme="dark"] .navbar:not(.navbar--transparent) {
  background: var(--navbar-bg-dark) !important;
  border-bottom-color: var(--navbar-border-dark) !important;
}

[data-theme="dark"] .navbar:not(.navbar--transparent) .navbar__link {
  color: var(--navbar-text-primary-dark) !important;
}

[data-theme="dark"] .navbar:not(.navbar--transparent) .navbar__link:hover {
  color: var(--navbar-text-primary-dark) !important;
  background: var(--navbar-hover-dark) !important;
}

[data-theme="dark"] .navbar:not(.navbar--transparent) .navbar__action-button {
  color: var(--navbar-text-primary-dark) !important;
}

[data-theme="dark"] .navbar:not(.navbar--transparent) .navbar__auth-link {
  color: var(--navbar-text-primary-dark) !important;
}

[data-theme="dark"] .navbar:not(.navbar--transparent) .navbar__auth-button {
  color: var(--navbar-text-primary-dark) !important;
  border-color: var(--navbar-text-primary-dark) !important;
}

/* ==========================================================================
   Light Mode Theme Variables
   ========================================================================== */

[data-theme="light"],
:root:not(.dark-mode) {
  --navbar-bg: var(--navbar-bg-light);
  --navbar-border: var(--navbar-border-light);
  --navbar-text-primary: var(--navbar-text-primary-light);
  --navbar-text-secondary: var(--navbar-text-secondary-light);
  --navbar-text-muted: var(--navbar-text-muted-light);
  --navbar-hover: var(--navbar-hover-light);
  --navbar-active: var(--navbar-active-light);
  --navbar-shadow: var(--navbar-shadow-light);
}

/* ==========================================================================
   Color Scheme Support
   ========================================================================== */

/* Ensure proper theme inheritance for all navbar elements */
.navbar,
.navbar *,
.navbar__dropdown,
.navbar__mobile-menu {
  color-scheme: light dark;
}