/*
 * theme.css — Jon Gilbert AZ Photography
 * High-performance Light/Dark Mode Styling System.
 * Default aesthetic: Warm Arizona Sand & Alabaster Light Mode.
 * Seamlessly toggles to Obsidian & Charcoal Luxury Dark Mode.
 * Controlled via .light-theme class on <html> with localStorage persistence.
 */

/* ─── BASE DESIGN TOKENS ──────────────────────────────────────────────────── */
:root {
  color-scheme: light dark;
  --gold: #D99B26;
  --gold-light: #F2B84B;
  --gold-dark: #A67112;
  --copper: #C86D51;
}

/* Default to Light Mode */
body {
  background-color: #F8F7F4;
  color: #12141A;
  font-family: 'Plus Jakarta Sans', sans-serif;
  overflow-x: hidden;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* ─── SCROLLBARS ─────────────────────────────────────────────────────────── */
:root {
  scrollbar-color: #C7C0B5 #EFECE6;
  scrollbar-width: thin;
}
@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar { width: 8px; }
  ::-webkit-scrollbar-track { background: #EFECE6; }
  ::-webkit-scrollbar-thumb { background: #C7C0B5; border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: #D99B26; }
}

/* ─── SELECTION ──────────────────────────────────────────────────────────── */
::selection {
  background: #D99B26;
  color: #0B0C10;
}

/* ─── INTERACTION & UTILITIES ────────────────────────────────────────────── */
.card-hover {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  border-color: rgba(217, 155, 38, 0.55);
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.10), 0 0 20px -4px rgba(217, 155, 38, 0.20);
}

.img-zoom {
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.group:hover .img-zoom,
.portfolio-card:hover .img-zoom {
  transform: scale(1.05);
}

.gold-gradient-text {
  background: linear-gradient(135deg, #12141A 0%, #D99B26 60%, #C86D51 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Lightbox backdrop */
dialog::backdrop {
  background: rgba(11, 12, 16, 0.94);
  backdrop-filter: blur(10px);
}

/* ─── THEME TOGGLE BUTTON STYLES ─────────────────────────────────────────── */
#theme-toggle,
.mobile-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: rgba(0, 0, 0, 0.05);
  color: #2D2A26;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

#theme-toggle:hover,
.mobile-theme-toggle:hover {
  background: rgba(217, 155, 38, 0.15);
  border-color: #D99B26;
  color: #A67112;
  transform: translateY(-1px);
}

/* Toggle Icon & Label Switching */
/* In Light Mode (DEFAULT): Show Moon icon + "Dark Mode" label */
html.light-theme .icon-sun { display: none !important; }
html.light-theme .icon-moon { display: block !important; }
html.light-theme .theme-label-light { display: none !important; }
html.light-theme .theme-label-dark { display: inline !important; }

/* In Dark Mode: Show Sun icon + "Light Mode" label */
:root:not(.light-theme) .icon-sun { display: block !important; }
:root:not(.light-theme) .icon-moon { display: none !important; }
:root:not(.light-theme) .theme-label-light { display: inline !important; }
:root:not(.light-theme) .theme-label-dark { display: none !important; }

/* Toggle button appearance in Dark Mode */
:root:not(.light-theme) #theme-toggle,
:root:not(.light-theme) .mobile-theme-toggle {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #E6E1D6;
}
:root:not(.light-theme) #theme-toggle:hover,
:root:not(.light-theme) .mobile-theme-toggle:hover {
  background: rgba(217, 155, 38, 0.18);
  border-color: #D99B26;
  color: #D99B26;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES (Active by default on html.light-theme)
   ═══════════════════════════════════════════════════════════════════════════ */

html.light-theme {
  color-scheme: light;
  scrollbar-color: #C7C0B5 #EFECE6;
}

@supports not (scrollbar-color: auto) {
  html.light-theme ::-webkit-scrollbar-track { background: #EFECE6 !important; }
  html.light-theme ::-webkit-scrollbar-thumb { background: #C7C0B5 !important; }
  html.light-theme ::-webkit-scrollbar-thumb:hover { background: #D99B26 !important; }
}

html.light-theme body {
  background-color: #F8F7F4 !important;
  color: #12141A !important;
}

/* Backgrounds */
html.light-theme .bg-obsidian {
  background-color: #F8F7F4 !important;
}
html.light-theme .bg-obsidian\/95 {
  background-color: rgba(255, 255, 255, 0.96) !important;
}
html.light-theme .bg-obsidian\/85 {
  background-color: rgba(248, 247, 244, 0.88) !important;
}
html.light-theme .bg-obsidian\/80 {
  background-color: rgba(248, 247, 244, 0.82) !important;
}
html.light-theme .bg-obsidian\/70 {
  background-color: rgba(248, 247, 244, 0.72) !important;
}
html.light-theme .bg-obsidian\/60 {
  background-color: rgba(248, 247, 244, 0.62) !important;
}

html.light-theme .bg-charcoal {
  background-color: #FFFFFF !important;
}
html.light-theme .bg-charcoal\/90 {
  background-color: rgba(255, 255, 255, 0.94) !important;
}
html.light-theme .bg-charcoal\/50 {
  background-color: #F2EFE9 !important;
}
html.light-theme .bg-charcoal\/40 {
  background-color: #F4F1EB !important;
}
html.light-theme .bg-charcoal\/30 {
  background-color: #F7F5F0 !important;
}

html.light-theme .bg-slateCard {
  background-color: #FFFFFF !important;
}

html.light-theme .bg-white\/5 {
  background-color: rgba(0, 0, 0, 0.05) !important;
}
html.light-theme .bg-white\/10 {
  background-color: rgba(0, 0, 0, 0.08) !important;
}

html.light-theme .hover\:bg-white\/5:hover {
  background-color: rgba(0, 0, 0, 0.07) !important;
}
html.light-theme .hover\:bg-white\/10:hover {
  background-color: rgba(0, 0, 0, 0.12) !important;
}
html.light-theme .hover\:bg-white\/15:hover {
  background-color: rgba(0, 0, 0, 0.16) !important;
}
html.light-theme .hover\:bg-obsidian:hover {
  background-color: #EFECE6 !important;
}

/* Borders & Dividers */
html.light-theme .border-white\/5,
html.light-theme .border-white\/8,
html.light-theme .border-white\/10 {
  border-color: rgba(0, 0, 0, 0.09) !important;
}
html.light-theme .border-white\/15 {
  border-color: rgba(0, 0, 0, 0.15) !important;
}
html.light-theme .divide-white\/5 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Gradients */
html.light-theme .from-charcoal {
  --tw-gradient-from: #FFFFFF var(--tw-gradient-from-position) !important;
}
html.light-theme .to-charcoal {
  --tw-gradient-to: #FFFFFF var(--tw-gradient-to-position) !important;
}
html.light-theme .via-charcoal {
  --tw-gradient-stops: var(--tw-gradient-from), #FFFFFF var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

html.light-theme .from-slateCard {
  --tw-gradient-from: #FFFFFF var(--tw-gradient-from-position) !important;
}
html.light-theme .via-slateCard {
  --tw-gradient-stops: var(--tw-gradient-from), #FFFFFF var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

html.light-theme .from-obsidian {
  --tw-gradient-from: #F8F7F4 var(--tw-gradient-from-position) !important;
}
html.light-theme .to-obsidian {
  --tw-gradient-to: #F8F7F4 var(--tw-gradient-to-position) !important;
}

/* Protect text overlays inside photo cards (where white text sits on dark image bottom) */
html.light-theme .portfolio-card .from-obsidian\/90,
html.light-theme .portfolio-item .from-obsidian\/95 {
  --tw-gradient-from: rgba(11, 12, 16, 0.94) var(--tw-gradient-from-position) !important;
}
html.light-theme .portfolio-card h3,
html.light-theme .portfolio-item h3 {
  color: #F9F8F6 !important;
}
html.light-theme .portfolio-item p {
  color: #E6E1D6 !important;
}

/* Primary Text */
html.light-theme .text-alabaster {
  color: #12141A !important;
}

/* Secondary & Body Copy */
html.light-theme .text-sand,
html.light-theme .text-sand\/90,
html.light-theme .text-sand\/85,
html.light-theme .text-sand\/80 {
  color: #423E37 !important;
}
html.light-theme .text-sand\/75,
html.light-theme .text-sand\/70 {
  color: #555047 !important;
}
html.light-theme .text-sand\/60,
html.light-theme .text-sand\/50,
html.light-theme .text-sand\/40 {
  color: #7A7469 !important;
}

/* Header & Announcement Bar */
html.light-theme header {
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04);
}
html.light-theme .bg-charcoal.border-b.text-xs {
  background-color: #EFECE6 !important;
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
  color: #3D3933 !important;
}

/* Mobile Menu Drawer */
html.light-theme #mobile-menu {
  background-color: #FFFFFF !important;
  border-bottom-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
}
html.light-theme #mobile-menu a {
  color: #12141A;
}
html.light-theme #mobile-menu a:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Navigation Links */
html.light-theme nav a.text-sand\/80 {
  color: #4A463F !important;
}
html.light-theme nav a.text-sand\/80:hover {
  color: #12141A !important;
  background-color: rgba(0, 0, 0, 0.05) !important;
}
html.light-theme nav a.text-gold {
  color: #A67112 !important;
  background-color: rgba(217, 155, 38, 0.12) !important;
}

/* Logo Box */
html.light-theme .bg-obsidian.rounded-\[7px\] {
  background-color: #FFFFFF !important;
}

/* Gold Gradient Headline */
html.light-theme .gold-gradient-text {
  background: linear-gradient(135deg, #12141A 0%, #D99B26 60%, #C86D51 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Card Shadows & Elevation */
html.light-theme .card-hover:hover {
  border-color: rgba(217, 155, 38, 0.6) !important;
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.10), 0 0 20px -4px rgba(217, 155, 38, 0.20) !important;
}
html.light-theme .shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.10) !important;
}
html.light-theme .shadow-xl {
  box-shadow: 0 18px 24px -5px rgba(0, 0, 0, 0.07) !important;
}

/* Forms: Inputs, Selects, Textareas */
html.light-theme input,
html.light-theme select,
html.light-theme textarea {
  background-color: #FFFFFF !important;
  color: #12141A !important;
  border-color: rgba(0, 0, 0, 0.18) !important;
}
html.light-theme input::placeholder,
html.light-theme textarea::placeholder {
  color: #8C857B !important;
}
html.light-theme input:focus,
html.light-theme select:focus,
html.light-theme textarea:focus {
  border-color: #D99B26 !important;
  box-shadow: 0 0 0 3px rgba(217, 155, 38, 0.15) !important;
}

/* Portfolio Filter Buttons */
html.light-theme .filter-btn:not(.active) {
  background-color: rgba(0, 0, 0, 0.06) !important;
  color: #4A463F !important;
}
html.light-theme .filter-btn:not(.active):hover {
  background-color: rgba(0, 0, 0, 0.11) !important;
  color: #12141A !important;
}
html.light-theme .filter-btn.active {
  background-color: #D99B26 !important;
  color: #0B0C10 !important;
}

/* Lightbox Dialog */
html.light-theme dialog#lightbox-dialog > div {
  background-color: #FFFFFF !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.25) !important;
}
html.light-theme dialog#lightbox-dialog .border-b {
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
html.light-theme dialog#lightbox-dialog #lightbox-title {
  color: #12141A !important;
}
html.light-theme dialog#lightbox-dialog .relative.bg-obsidian {
  background-color: #0B0C10 !important; /* photo frame stays dark for contrast */
}

/* Footer in Light Mode */
html.light-theme footer {
  background-color: #EFECE6 !important;
  border-top-color: rgba(0, 0, 0, 0.08) !important;
}
html.light-theme footer .text-sand\/60,
html.light-theme footer .text-sand\/70,
html.light-theme footer .text-sand\/40 {
  color: #555047 !important;
}
html.light-theme footer .border-t {
  border-top-color: rgba(0, 0, 0, 0.08) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK THEME RESETS (Active when light-theme is removed)
   ═══════════════════════════════════════════════════════════════════════════ */
:root:not(.light-theme) {
  color-scheme: dark;
  scrollbar-color: #2D3243 #0B0C10;
}

:root:not(.light-theme) body {
  background-color: #0B0C10 !important;
  color: #F9F8F6 !important;
}

:root:not(.light-theme) .gold-gradient-text {
  background: linear-gradient(135deg, #F9F8F6 0%, #F2B84B 55%, #C86D51 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}