/* ============================================================
   THEME SYSTEM – kombi-kombi.rs
   CSS Custom Properties for Light & Dark themes
   ============================================================ */

/* ===== LIGHT THEME (default) ===== */
:root {
  /* Primary colors (preserved brand) */
  --color-primary: #50d8af;
  --color-primary-hover: #3cc49a;
  --color-primary-light: rgba(80, 216, 175, 0.12);
  --color-primary-subtle: rgba(80, 216, 175, 0.06);
  --color-navy: #0c2e8a;
  --color-navy-light: rgba(12, 46, 138, 0.08);

  /* Backgrounds (warm whites/grays) */
  --bg-body: #faf9f7;
  --bg-card: #ffffff;
  --bg-section-alt: #f5f3f0;
  --bg-topbar: #2d2d2d;
  --bg-header: #ffffff;
  --bg-footer: #1e1e1e;
  --bg-footer-social: #50d8af;
  --bg-input: #ffffff;
  --bg-breadcrumb: #f5f3f0;
  --bg-mobile-nav: rgba(12, 46, 138, 0.92);
  --bg-hero-overlay: rgba(250, 249, 247, 0.80);
  --bg-cta: #0c2e8a;

  /* Text */
  --text-primary: #1a1a1a;
  --text-secondary: #5a5a5a;
  --text-muted: #8a8a8a;
  --text-on-primary: #ffffff;
  --text-on-dark: #e8e8e8;
  --text-link: #50d8af;
  --text-heading: #0c2e8a;

  /* Borders */
  --border-color: #e8e5e1;
  --border-color-light: #f0ede9;

  /* Shadows (soft, warm) */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 12px 48px rgba(0, 0, 0, 0.12);

  /* Border radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 50px;
  --radius-circle: 50%;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-theme: 0.35s ease;
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
  --bg-body: #151515;
  --bg-card: #1e1e1e;
  --bg-section-alt: #1a1a1a;
  --bg-topbar: #111111;
  --bg-header: #1a1a1a;
  --bg-footer: #111111;
  --bg-footer-social: #2a9a78;
  --bg-input: #252525;
  --bg-breadcrumb: #1a1a1a;
  --bg-mobile-nav: rgba(10, 10, 10, 0.95);
  --bg-hero-overlay: rgba(21, 21, 21, 0.85);
  --bg-cta: #0a1d50;

  --text-primary: #e8e8e8;
  --text-secondary: #a0a0a0;
  --text-muted: #666666;
  --text-on-dark: #e8e8e8;
  --text-heading: #e8e8e8;
  --text-link: #5de6bd;

  --border-color: #2a2a2a;
  --border-color-light: #222222;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 12px 48px rgba(0, 0, 0, 0.5);

  --color-primary: #5de6bd;
  --color-primary-hover: #4ad4aa;
  --color-primary-light: rgba(93, 230, 189, 0.15);
  --color-navy: #6b8fd4;
}

/* ===== SMOOTH THEME TRANSITIONS ===== */
body,
#topbar,
#header,
.navbar .dropdown ul,
.navbar-mobile,
.navbar-mobile ul,
#services .box,
#testimonials .testimonial-item,
#call-to-action,
#team .member .details,
.contact_form,
.contact_form .form-control,
#contact .php-email-form input,
#contact .php-email-form textarea,
.breadcrumbs,
.portfolio-details .portfolio-info,
.back-to-top,
.floating-call-button,
footer,
footer section,
.wrapper,
.portfolio-info,
#portfolio,
#portfolio #portfolio-flters li,
form[name="myform"] .table,
form[name="myform"] .table thead th,
form[name="myform"] .table tbody td,
form[name="myform"] select,
form[action="insert_order.php"] .form-control,
#myInput,
.bootstrap-select .dropdown-menu {
  transition: background-color var(--transition-theme),
              color var(--transition-theme),
              border-color var(--transition-theme),
              box-shadow var(--transition-theme);
}

/* ===== THEME TOGGLE BUTTON ===== */
.theme-toggle {
  background: transparent;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  font-size: 18px;
  padding: 6px 10px;
  border-radius: var(--radius-circle);
  transition: background var(--transition-fast), color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.theme-toggle:hover {
  background: var(--color-primary-light);
}

/* Tablet+Mobile theme toggle - small circle, blended into topbar */
@media (max-width: 991px) {
  .theme-toggle {
    position: fixed;
    top: 10px;
    right: 46px; /* shifted left — hamburger sits at far-right */
    z-index: 1001;
    font-size: 12px !important;
    padding: 0 !important;
    background: rgba(80, 216, 175, 0.15) !important;
    box-shadow: none !important;
    border-radius: 50% !important;
    color: var(--color-primary) !important;
    width: 26px !important;
    height: 26px !important;
    border: none;
  }
  .theme-toggle:hover {
    background: rgba(80, 216, 175, 0.25) !important;
  }
}

/* Dark theme toggle: green icon, subtle background, no white */
[data-theme="dark"] .theme-toggle {
  color: var(--color-primary) !important;
  background: rgba(93, 230, 189, 0.12) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .theme-toggle:hover {
  background: rgba(93, 230, 189, 0.22) !important;
}