/* ============================================================================
   MOMENTO.CLOUD — MULTI-THEME DESIGN SYSTEM & DISPOSABLE CAMERA ENGINE
   Supports 4 Live Website Themes + 3 Event Gallery Themes + 4 Camera Skins
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=JetBrains+Mono:wght@400;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=Syne:wght@600;700;800&display=swap');

:root,
:root[data-theme="luxury-wedding"] {
  --bg-main: #FAF7F2;
  --bg-surface: #FFFFFF;
  --bg-elevated: #F3EDE3;
  --bg-glass: rgba(250, 247, 242, 0.88);
  --text-main: #241F1C;
  --text-muted: #6E655E;
  --border-color: rgba(36, 31, 28, 0.12);
  --accent-primary: #B48A52;
  --accent-primary-hover: #9A723E;
  --accent-contrast: #FFFFFF;
  --accent-soft: rgba(180, 138, 82, 0.14);
  --badge-bg: #EFE6D5;
  --badge-text: #7C5C31;
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --card-radius: 18px;
  --btn-radius: 9999px;
  --card-shadow: 0 14px 34px -10px rgba(36, 31, 28, 0.08);
  --border-width: 1px;
}

:root[data-theme="retro-analog"] {
  --bg-main: #111110;
  --bg-surface: #1B1B19;
  --bg-elevated: #262522;
  --bg-glass: rgba(17, 17, 16, 0.88);
  --text-main: #F4F0E6;
  --text-muted: #A39E93;
  --border-color: rgba(244, 240, 230, 0.14);
  --accent-primary: #FF5500;
  --accent-primary-hover: #E04800;
  --accent-contrast: #FFFFFF;
  --accent-soft: rgba(255, 85, 0, 0.16);
  --badge-bg: #2E2218;
  --badge-text: #FFB800;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --card-radius: 8px;
  --btn-radius: 6px;
  --card-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.65);
  --border-width: 1px;
}

:root[data-theme="modern-saas"] {
  --bg-main: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-elevated: #F1F5F9;
  --bg-glass: rgba(255, 255, 255, 0.88);
  --text-main: #0F172A;
  --text-muted: #475569;
  --border-color: #E2E8F0;
  --accent-primary: #4F46E5;
  --accent-primary-hover: #4338CA;
  --accent-contrast: #FFFFFF;
  --accent-soft: rgba(79, 70, 229, 0.12);
  --badge-bg: #EEF2FF;
  --badge-text: #4338CA;
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --card-radius: 14px;
  --btn-radius: 10px;
  --card-shadow: 0 10px 30px -8px rgba(15, 23, 42, 0.07);
  --border-width: 1px;
}

:root[data-theme="playful-pop"] {
  --bg-main: #FFFDF7;
  --bg-surface: #FFFFFF;
  --bg-elevated: #FEF6E4;
  --bg-glass: rgba(255, 253, 247, 0.92);
  --text-main: #18181B;
  --text-muted: #52525B;
  --border-color: #18181B;
  --accent-primary: #FF3E6C;
  --accent-primary-hover: #E11D48;
  --accent-contrast: #FFFFFF;
  --accent-soft: rgba(255, 62, 108, 0.14);
  --badge-bg: #CCFBF1;
  --badge-text: #0F766E;
  --font-heading: 'Syne', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --card-radius: 16px;
  --btn-radius: 12px;
  --card-shadow: 5px 5px 0px #18181B;
  --border-width: 2px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--bg-main);
  color: var(--text-main);
  font-family: var(--font-body);
  transition: background-color 0.25s ease, color 0.25s ease;
  overflow-x: hidden;
}

h1, h2, h3, .font-display {
  font-family: var(--font-heading);
}

.font-mono-code {
  font-family: var(--font-mono);
}

/* Theme Adaptive Surfaces & Cards */
.theme-surface {
  background-color: var(--bg-surface);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: all 0.22s ease;
}

.theme-elevated {
  background-color: var(--bg-elevated);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--card-radius);
}

.theme-navbar {
  background-color: var(--bg-glass);
  backdrop-filter: blur(14px);
  border-bottom: var(--border-width) solid var(--border-color);
}

.theme-btn-primary {
  background-color: var(--accent-primary);
  color: var(--accent-contrast);
  border-radius: var(--btn-radius);
  border: var(--border-width) solid transparent;
  font-weight: 600;
  transition: transform 0.15s ease, background-color 0.2s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

:root[data-theme="playful-pop"] .theme-btn-primary {
  border-color: #18181B;
  box-shadow: 3px 3px 0px #18181B;
}

.theme-btn-primary:hover {
  background-color: var(--accent-primary-hover);
  transform: translateY(-1px);
}

.theme-btn-secondary {
  background-color: var(--bg-surface);
  color: var(--text-main);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--btn-radius);
  font-weight: 600;
  transition: all 0.15s ease;
  cursor: pointer;
}

.theme-btn-secondary:hover {
  background-color: var(--bg-elevated);
}

.theme-badge {
  background-color: var(--badge-bg);
  color: var(--badge-text);
  border-radius: 9999px;
  font-weight: 600;
}

/* ============================================================================
   DISPOSABLE CAMERA SKINS (4 Physical Body Textures)
   ============================================================================ */

.camera-shell {
  position: relative;
  border-radius: 28px;
  padding: 20px;
  transition: all 0.3s ease;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

/* Skin 1: Classic Black Leather SLR */
.camera-skin-classic-leather {
  background: radial-gradient(circle at 20% 20%, #2a2a28 0%, #151514 100%);
  color: #F4F0E6;
  border: 2px solid #3A3935;
}

/* Skin 2: Pearl White Wedding */
.camera-skin-pearl-white {
  background: linear-gradient(145deg, #FCFBF9 0%, #EAE4DC 100%);
  color: #26221E;
  border: 2px solid #D5C7B2;
}

/* Skin 3: Retro Yellow 90s (Kodak Funsaver Vibe) */
.camera-skin-retro-yellow {
  background: linear-gradient(135deg, #FFB800 0%, #F59E0B 65%, #18181B 65.5%, #18181B 100%);
  color: #18181B;
  border: 3px solid #18181B;
}

/* Skin 4: Forest Green Analog (Fuji Quicksnap Vibe) */
.camera-skin-forest-green {
  background: linear-gradient(145deg, #065F46 0%, #042F2E 100%);
  color: #ECFDF5;
  border: 2px solid #10B981;
}

/* LCD Shot Counter Segment Display */
.lcd-counter {
  background: #8C9E83;
  color: #1B2618;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 2px inset #64745C;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

/* Physical Shutter Button */
.shutter-button {
  width: 74px;
  height: 74px;
  border-radius: 9999px;
  background: radial-gradient(circle at 35% 35%, #FF6B35, #D93800);
  border: 5px solid #D4D4D8;
  box-shadow: 0 6px 0 #71717A, 0 12px 20px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.shutter-button:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #71717A, 0 4px 10px rgba(0, 0, 0, 0.35);
}

/* Screen Flash Overlay */
@keyframes flashPulse {
  0% { opacity: 0.95; }
  100% { opacity: 0; }
}

.flash-overlay-active {
  animation: flashPulse 0.45s ease-out forwards;
}

/* Quartz 90s Date Stamp Preview */
.quartz-stamp {
  font-family: 'JetBrains Mono', monospace;
  color: #FF6B1A;
  text-shadow: 0 0 6px rgba(255, 85, 0, 0.85), 0 0 2px rgba(255, 180, 0, 0.9);
  letter-spacing: 2px;
  font-weight: 700;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-elevated);
}
::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border-radius: 4px;
}