/* ============================================================
   THE KAFFEE NATION — DARK MODE CSS
   Full Espresso Dark Theme
   ============================================================ */

/* ============================================================
   DARK THEME VARIABLES
   ============================================================ */
[data-theme="dark"] {
  --color-bg:          #0D0805;
  --color-primary:     #F0E6D3;
  --color-text-dark:   #F0E6D3;
  --color-text-light:  #A08878;
  --color-white:       #1A1008;
  --color-highlight:   #1A1008;
  --color-glass-bg:    rgba(26, 16, 8, 0.6);
  --color-glass-border: rgba(200, 169, 126, 0.15);
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-lg:    0 10px 30px rgba(0, 0, 0, 0.6);
  --shadow-xl:    0 20px 50px rgba(0, 0, 0, 0.7);
  --shadow-2xl:   0 30px 80px rgba(0, 0, 0, 0.8);

  /* Theme System Variables from User Request */
  --bg-color: #1A0F0A;
  --text-color: #F0E6D3;
  --text-primary: #F0E6D3;
  --text-secondary: #C8A97E;
  --nav-bg: rgba(26,15,10,0.9);
}

/* ============================================================
   DARK BODY
   ============================================================ */
[data-theme="dark"] body {
  background: var(--bg-color);
  color: var(--text-color);
}

/* Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-track { background: #0D0805; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(200, 169, 126, 0.4); }

/* Selection */
[data-theme="dark"] ::selection {
  background: rgba(200, 169, 126, 0.25);
  color: #F0E6D3;
}

/* ============================================================
   DARK NAVBAR
   ============================================================ */
[data-theme="dark"] .navbar.scrolled {
  background: var(--nav-bg);
  border-bottom-color: rgba(200, 169, 126, 0.1);
}

[data-theme="dark"] .logo-text { color: var(--text-primary); }
[data-theme="dark"] .nav-link { color: var(--text-primary); }
[data-theme="dark"] .nav-link:hover { color: var(--color-accent); }

[data-theme="dark"] .branch-dropdown-menu {
  background: #1A1008;
  border-color: rgba(200, 169, 126, 0.15);
}

[data-theme="dark"] .branch-dropdown-item:hover { background: rgba(200, 169, 126, 0.08); }

[data-theme="dark"] .branch-dropdown-item .branch-info h4 { color: #F0E6D3; }
[data-theme="dark"] .branch-dropdown-item .branch-info p { color: rgba(200, 169, 126, 0.5); }

[data-theme="dark"] .hamburger span { background: var(--color-accent); }

/* ============================================================
   DARK SECTIONS
   ============================================================ */
[data-theme="dark"] .section { background: transparent; }

[data-theme="dark"] .bg-linen,
[data-theme="dark"] .bg-warm-gradient { background: #110B07; }

[data-theme="dark"] .bg-highlight { background: #1A1008; }

[data-theme="dark"] .section-title { color: #F0E6D3; }
[data-theme="dark"] .section-subtitle { color: rgba(200, 169, 126, 0.65); }
[data-theme="dark"] .eyebrow { color: var(--color-accent); }

/* ============================================================
   DARK CARDS
   ============================================================ */
[data-theme="dark"] .card,
[data-theme="dark"] .menu-item-card,
[data-theme="dark"] .testimonial-card,
[data-theme="dark"] .bento-item,
[data-theme="dark"] .platform-badge {
  background: #1A1008;
  border-color: rgba(200, 169, 126, 0.1);
}

[data-theme="dark"] .card:hover,
[data-theme="dark"] .menu-item-card:hover,
[data-theme="dark"] .bento-item:hover {
  border-color: rgba(200, 169, 126, 0.25);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .bento-item-title { color: #F0E6D3; }
[data-theme="dark"] .bento-item-desc { color: rgba(200, 169, 126, 0.6); }

/* ============================================================
   DARK MENU
   ============================================================ */
[data-theme="dark"] .menu-item-name { color: #F0E6D3; }
[data-theme="dark"] .menu-item-category { color: rgba(200, 169, 126, 0.5); }
[data-theme="dark"] .menu-item-img-wrap { background: #110B07; }

[data-theme="dark"] .filter-pill {
  border-color: rgba(200, 169, 126, 0.15);
  color: rgba(200, 169, 126, 0.55);
}

[data-theme="dark"] .filter-pill:hover,
[data-theme="dark"] .filter-pill.active {
  background: var(--color-accent);
  color: var(--color-primary);
}

/* ============================================================
   DARK TESTIMONIALS
   ============================================================ */
[data-theme="dark"] .testimonial-text { color: #F0E6D3; }
[data-theme="dark"] .testimonial-name { color: #F0E6D3; }
[data-theme="dark"] .testimonial-branch { color: rgba(200, 169, 126, 0.55); }

[data-theme="dark"] .testimonial-btn {
  background: #1A1008;
  border-color: rgba(200, 169, 126, 0.2);
  color: #F0E6D3;
}

[data-theme="dark"] .testimonial-platform {
  background: rgba(200, 169, 126, 0.08);
  color: rgba(200, 169, 126, 0.55);
}

/* ============================================================
   DARK FORMS
   ============================================================ */
[data-theme="dark"] .form-input {
  background: #1A1008;
  border-color: rgba(200, 169, 126, 0.15);
  color: #F0E6D3;
}

[data-theme="dark"] .form-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(200, 169, 126, 0.1);
}

[data-theme="dark"] .form-input::placeholder { color: rgba(200, 169, 126, 0.35); }

[data-theme="dark"] .form-label { color: #F0E6D3; }

[data-theme="dark"] .reservation-card {
  background: #1A1008;
  border-color: rgba(200, 169, 126, 0.12);
}

/* ============================================================
   DARK MODALS & OVERLAYS
   ============================================================ */
[data-theme="dark"] .modal-card {
  background: #1A1008;
  border-color: rgba(200, 169, 126, 0.15);
}

[data-theme="dark"] .modal-card h2,
[data-theme="dark"] .modal-card h3 { color: #F0E6D3; }

[data-theme="dark"] .modal-card p { color: rgba(200, 169, 126, 0.65); }

/* ============================================================
   DARK NEWSLETTER
   ============================================================ */
[data-theme="dark"] .newsletter-section {
  background: linear-gradient(135deg, #3D1F0D 0%, #5C2E14 50%, #3D1F0D 100%);
}

[data-theme="dark"] .newsletter-input {
  background: rgba(13, 8, 5, 0.5);
  border-color: rgba(200, 169, 126, 0.25);
  color: #F0E6D3;
}

[data-theme="dark"] .newsletter-input::placeholder { color: rgba(200, 169, 126, 0.4); }

/* ============================================================
   DARK STAT ITEMS
   ============================================================ */
[data-theme="dark"] .stat-label { color: rgba(200, 169, 126, 0.5); }

/* ============================================================
   DARK SOCIAL LINKS
   ============================================================ */
[data-theme="dark"] .social-link {
  background: rgba(200, 169, 126, 0.07);
  border-color: rgba(200, 169, 126, 0.15);
}

/* ============================================================
   DARK BADGE ITEMS
   ============================================================ */
[data-theme="dark"] .badge-accent {
  background: rgba(200, 169, 126, 0.1);
}

[data-theme="dark"] .platform-badge {
  color: #F0E6D3;
}

/* ============================================================
   DARK BRANCH DROPDOWN (MOBILE)
   ============================================================ */
[data-theme="dark"] .mobile-menu {
  background: #0D0805;
}

/* ============================================================
   DARK BRAND STORY
   ============================================================ */
[data-theme="dark"] .story-section { background: #110B07; }
[data-theme="dark"] .story-image-wrap { border-color: rgba(200, 169, 126, 0.1); }

/* ============================================================
   DARK COOKIE BANNER
   ============================================================ */
[data-theme="dark"] .cookie-banner {
  background: rgba(13, 8, 5, 0.99);
  border-top-color: rgba(200, 169, 126, 0.12);
}

/* ============================================================
   DARK FOOTER
   ============================================================ */
[data-theme="dark"] .footer {
  background: #080503;
  border-top: 1px solid rgba(200, 169, 126, 0.06);
}

/* ============================================================
   DARK OFFERS BANNER
   ============================================================ */
[data-theme="dark"] .offers-banner {
  background: linear-gradient(90deg, #3D1F0D, #5C2E14, #3D1F0D);
}

[data-theme="dark"] .offers-text { color: var(--color-accent); }

/* ============================================================
   DARK THEME TOGGLE ICON
   ============================================================ */
.sun-icon { display: none; }
.moon-icon { display: block; }

[data-theme="dark"] .sun-icon { display: block; }
[data-theme="dark"] .moon-icon { display: none; }

[data-theme="dark"] .theme-toggle {
  background: rgba(200, 169, 126, 0.08);
  border-color: rgba(200, 169, 126, 0.15);
}

/* ============================================================
   DARK MARQUEE
   ============================================================ */
[data-theme="dark"] .marquee-section {
  background: #1A1008;
  border-top: 1px solid rgba(200, 169, 126, 0.08);
  border-bottom: 1px solid rgba(200, 169, 126, 0.08);
}

[data-theme="dark"] .marquee-text { color: rgba(200, 169, 126, 0.7); }
[data-theme="dark"] .marquee-dot { color: rgba(200, 169, 126, 0.2); }

/* ============================================================
   DARK SKELETON
   ============================================================ */
[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, #1A1008 0%, #2A1A10 50%, #1A1008 100%);
  background-size: 200% 100%;
}

/* ============================================================
   DARK SCROLL HINT
   ============================================================ */
[data-theme="dark"] .scroll-hint-text { color: rgba(200, 169, 126, 0.4); }
[data-theme="dark"] .scroll-arrow { border-color: rgba(200, 169, 126, 0.35); }

/* ============================================================
   DARK BRANCH CARDS IN HERO
   ============================================================ */
[data-theme="dark"] .branch-card { border-color: rgba(200, 169, 126, 0.08); }

/* ============================================================
   DARK TABS (BRANCH PAGES)
   ============================================================ */
[data-theme="dark"] .menu-tab {
  background: #1A1008;
  border-color: rgba(200, 169, 126, 0.1);
  color: rgba(200, 169, 126, 0.6);
}

[data-theme="dark"] .menu-tab.active {
  background: var(--color-accent);
  color: var(--color-primary);
}

[data-theme="dark"] .gallery-category-btn {
  border-color: rgba(200, 169, 126, 0.15);
  color: rgba(200, 169, 126, 0.6);
  background: transparent;
}

[data-theme="dark"] .gallery-category-btn.active {
  background: var(--color-accent);
  color: var(--color-primary);
}

/* ============================================================
   DARK RATING BARS (BRANCH PAGE)
   ============================================================ */
[data-theme="dark"] .rating-bar-bg { background: rgba(200, 169, 126, 0.08); }
[data-theme="dark"] .review-card { background: #1A1008; border-color: rgba(200, 169, 126, 0.08); }
[data-theme="dark"] .review-text { color: rgba(240, 230, 211, 0.75); }
[data-theme="dark"] .review-name { color: #F0E6D3; }
[data-theme="dark"] .review-date { color: rgba(200, 169, 126, 0.4); }

/* ============================================================
   DARK RESERVATION FORM
   ============================================================ */
[data-theme="dark"] .reservation-section { background: #0D0805; }
[data-theme="dark"] .reservation-card { background: #1A1008; border-color: rgba(200, 169, 126, 0.1); }

/* ============================================================
   DARK HERO BADGE
   ============================================================ */
[data-theme="dark"] .hero-badge {
  background: rgba(26, 16, 8, 0.7);
  border-color: rgba(200, 169, 126, 0.18);
}

/* ============================================================
   DARK HERO CONTENT
   ============================================================ */
[data-theme="dark"] .hero-content {
  color: #F0E6D3;
}

[data-theme="dark"] .hero-title {
  color: #F0E6D3;
  text-shadow: 0 4px 20px rgba(0,0,0,0.8);
}

[data-theme="dark"] .hero-subtitle {
  color: rgba(240, 230, 211, 0.95);
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}

[data-theme="dark"] .hero-eyebrow {
  color: rgba(200, 169, 126, 1);
}

/* ============================================================
   DARK LIGHTBOX
   ============================================================ */
[data-theme="dark"] .lightbox { background: rgba(0, 0, 0, 0.98); }

/* ============================================================
   BRANCH PAGE HERO (dark version)
   ============================================================ */
[data-theme="dark"] .branch-hero-pill {
  background: rgba(13, 8, 5, 0.85);
  border-color: rgba(200, 169, 126, 0.2);
}

/* ============================================================
   DARK MAP SECTION
   ============================================================ */
[data-theme="dark"] .contact-section {
  background: #110B07;
}

[data-theme="dark"] .contact-card {
  background: #1A1008;
  border-color: rgba(200, 169, 126, 0.1);
}

[data-theme="dark"] .contact-card h2,
[data-theme="dark"] .contact-card h3 { color: #F0E6D3; }

[data-theme="dark"] .hours-row { border-bottom-color: rgba(200, 169, 126, 0.08); }
[data-theme="dark"] .hours-day { color: rgba(200, 169, 126, 0.55); }
[data-theme="dark"] .hours-time { color: #F0E6D3; }

/* ============================================================
   DARK SPECIALTY ITEMS
   ============================================================ */
[data-theme="dark"] .specialty-card {
  background: #1A1008;
  border-color: rgba(200, 169, 126, 0.1);
}

[data-theme="dark"] .specialty-name { color: #F0E6D3; }
[data-theme="dark"] .specialty-desc { color: rgba(200, 169, 126, 0.55); }
[data-theme="dark"] .specialty-img-bg { background: #110B07; }

/* ============================================================
   DARK BRANCH STORY
   ============================================================ */
[data-theme="dark"] .branch-story-section { background: #110B07; }
[data-theme="dark"] .branch-story-text { color: rgba(240, 230, 211, 0.75); }
[data-theme="dark"] .branch-manager-quote {
  background: rgba(200, 169, 126, 0.06);
  border-left-color: var(--color-accent);
  color: rgba(240, 230, 211, 0.7);
}

/* ============================================================
   CSS TRANSITION ON THEME SWITCH
   ============================================================ */
*, *::before, *::after {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: 300ms;
  transition-timing-function: ease;
}

/* Re-allow animation transitions to still work normally */
[data-animate], .btn, .card, .branch-card, .menu-item-card,
.nav-link, .social-link, .filter-pill, .stamp, .bento-item,
.testimonial-btn, .whatsapp-btn, .theme-toggle, .cursor-dot,
.cursor-ring, .mobile-menu, .lightbox, .modal-overlay {
  transition-property: all;
}