/*
 * Matriz Imobiliária — 2026 Design System
 * Cloud Dancer · Glassmorphism · Elevation · Accessibility
 * ─────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════════════════
   1. DESIGN TOKENS — CLOUD DANCER LIGHT MODE
   ═══════════════════════════════════════════════════════════ */

:root, [data-theme="light"] {
  /* Cloud Dancer 2026 Palette — warm sophisticated whites */
  --electric-gold: #CFAA6D;
  --electric-blue: #151A28;
  --forest-green: #151A28;
  --muted-gold: #CFAA6D;

  --bg-deep: #F0EDE5;         /* Cloud Dancer base */
  --bg-main: #EBE8E0;         /* Cloud Dancer -1 tom */
  --bg-surface: #FAF8F3;      /* Cloud Dancer surface warm */
  --bg-input: #FFFFFF;
  --border-subtle: rgba(21, 26, 40, 0.06);

  --text-primary: #151A28;
  --text-secondary: #6B7280;

  /* RGB Variables for Tailwind Opacity */
  --rgb-surface: 250 248 243;
  --rgb-main: 235 232 224;
  --rgb-primary: 21 26 40;
  --rgb-border: 21 26 40;

  /* Elevation (Light — via shadow not overlay) */
  --elevation-shadow-1: 0 1px 3px rgba(21,26,40,0.04), 0 1px 2px rgba(21,26,40,0.02);
  --elevation-shadow-2: 0 4px 12px rgba(21,26,40,0.06), 0 1px 4px rgba(21,26,40,0.03);
  --elevation-shadow-3: 0 8px 24px rgba(21,26,40,0.08), 0 2px 8px rgba(21,26,40,0.04);
  --elevation-shadow-4: 0 16px 40px rgba(21,26,40,0.10), 0 4px 12px rgba(21,26,40,0.05);

  color-scheme: light;
}

/* ═══════════════════════════════════════════════════════════
   2. DESIGN TOKENS — NAVY DARK MODE + ELEVATION SYSTEM
   ═══════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  --electric-gold: #D8B555;
  --electric-blue: #E7CB74;
  --forest-green: #151A28;
  --muted-gold: #B39A5D;

  --bg-deep: #0B0E14;         /* Navy base (mantido conforme decisão) */
  --bg-main: #0B0E14;
  --bg-surface: #151A28;
  --bg-input: #1C2237;
  --border-subtle: rgba(216, 181, 85, 0.15);

  --text-primary: #F8F9FA;
  --text-secondary: #94A3B8;

  /* RGB Variables for Tailwind Opacity */
  --rgb-surface: 21 26 40;
  --rgb-main: 11 14 20;
  --rgb-primary: 248 249 250;
  --rgb-border: 216 181 85;

  /* Material Design Elevation Overlays (white overlay %) */
  --elevation-0: #0B0E14;
  --elevation-1: #10141E;     /* +2% white */
  --elevation-2: #151A28;     /* +4% */
  --elevation-3: #1A2030;     /* +6% */
  --elevation-4: #1F2638;     /* +8% */
  --elevation-5: #242C42;     /* +10% */

  /* Colored Shadows for dark depth */
  --elevation-shadow-1: 0 2px 6px rgba(0,0,0,0.4), 0 0 0 1px rgba(216,181,85,0.03);
  --elevation-shadow-2: 0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(216,181,85,0.04);
  --elevation-shadow-3: 0 16px 40px rgba(0,0,0,0.6), 0 0 12px rgba(216,181,85,0.03);
  --elevation-shadow-4: 0 24px 56px rgba(0,0,0,0.7), 0 0 20px rgba(216,181,85,0.05);

  color-scheme: dark;
}

/* ═══════════════════════════════════════════════════════════
   3. GLOBAL BASE STYLES
   ═══════════════════════════════════════════════════════════ */

body {
  background-color: var(--bg-main) !important;
  color: var(--text-primary);
  font-family: 'Manrope', sans-serif;
  overflow-x: hidden;
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* Global SVG theme transition */
svg, svg * {
  transition: fill 0.4s ease, stroke 0.4s ease, color 0.4s ease;
}

/* Forçar herança de tema nos Selects nativos */
select option {
  background-color: var(--bg-input);
  color: var(--text-primary);
  font-weight: 500;
  padding: 8px;
}

/* ═══════════════════════════════════════════════════════════
   4. TYPOGRAPHY — COLOSSAL + HIERARCHY
   ═══════════════════════════════════════════════════════════ */

.title-colossal {
  font-family: 'Noto Serif', serif;
  font-size: 10vw;
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-weight: 700;
}

@media (min-width: 1024px) {
  .title-colossal {
    font-size: 130px;
  }
}

/* ═══════════════════════════════════════════════════════════
   5. GLOW & ELECTRIC EFFECTS
   ═══════════════════════════════════════════════════════════ */

.text-electric-gold {
  color: var(--electric-gold);
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

.glow-word {
  color: var(--electric-gold);
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
  animation: pulse-glow 3s infinite alternate;
}

@keyframes pulse-glow {
  0% { text-shadow: 0 0 15px rgba(255, 215, 0, 0.3); }
  100% { text-shadow: 0 0 30px rgba(255, 215, 0, 0.6); }
}

/* ═══════════════════════════════════════════════════════════
   6. BENTO CARDS — GLASSMORPHISM + ELEVATION
   ═══════════════════════════════════════════════════════════ */

.bento-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 2rem;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  transform-style: preserve-3d;
  box-shadow: var(--elevation-shadow-1);
}

.bento-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--elevation-shadow-3),
              0 0 20px rgba(255, 215, 0, 0.10);
  border-color: rgba(255, 215, 0, 0.15);
}

.bento-card.glowing {
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

/* ═══════════════════════════════════════════════════════════
   7. MULTI-LAYER GLASSMORPHISM (2026)
   ═══════════════════════════════════════════════════════════ */

.glass-layer-1 {
  background: rgba(var(--rgb-surface) / 0.35);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.06);
}

.glass-layer-2 {
  background: rgba(var(--rgb-surface) / 0.55);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(255,255,255,0.10);
}

.glass-layer-3 {
  background: rgba(var(--rgb-surface) / 0.75);
  backdrop-filter: blur(44px) saturate(220%);
  -webkit-backdrop-filter: blur(44px) saturate(220%);
  border: 1px solid rgba(255,255,255,0.15);
}

[data-theme="light"] .glass-layer-1 {
  background: rgba(250,248,243,0.5);
  border-color: rgba(21,26,40,0.04);
}
[data-theme="light"] .glass-layer-2 {
  background: rgba(250,248,243,0.7);
  border-color: rgba(21,26,40,0.06);
}
[data-theme="light"] .glass-layer-3 {
  background: rgba(250,248,243,0.88);
  border-color: rgba(21,26,40,0.08);
}

/* Glass Noise Texture Overlay */
.glass-noise::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.035;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 0;
}

/* ═══════════════════════════════════════════════════════════
   8. MICA & ACRYLIC MATERIALS (FLUENT DESIGN)
   ═══════════════════════════════════════════════════════════ */

.mica-surface {
  background: linear-gradient(135deg,
    rgba(var(--rgb-surface) / 0.82),
    rgba(var(--rgb-surface) / 0.68));
  backdrop-filter: blur(60px) saturate(150%);
  -webkit-backdrop-filter: blur(60px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.05);
}

[data-theme="light"] .mica-surface {
  background: linear-gradient(135deg,
    rgba(250,248,243,0.9),
    rgba(235,232,224,0.8));
  border-color: rgba(21,26,40,0.05);
}

.acrylic-surface {
  background: rgba(var(--rgb-surface) / 0.45);
  backdrop-filter: blur(30px) brightness(1.02) saturate(125%);
  -webkit-backdrop-filter: blur(30px) brightness(1.02) saturate(125%);
  border: 1px solid rgba(255,255,255,0.06);
  position: relative;
}

[data-theme="light"] .acrylic-surface {
  background: rgba(250,248,243,0.6);
  border-color: rgba(21,26,40,0.05);
}

/* ═══════════════════════════════════════════════════════════
   9. CTA BUTTONS — ELECTRIC
   ═══════════════════════════════════════════════════════════ */

.btn-electric {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid rgba(255, 215, 0, 0.4);
  padding: 1rem 2.5rem;
  border-radius: 4rem;
  text-transform: uppercase;
  font-family: 'Manrope', sans-serif;
  letter-spacing: 0.1em;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.btn-electric:hover {
  background: var(--electric-gold);
  color: var(--bg-deep);
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
  border-color: var(--electric-gold);
}

.btn-electric-blue {
  border-color: rgba(0, 229, 255, 0.4);
}

.btn-electric-blue:hover {
  background: var(--electric-blue);
  color: var(--bg-deep);
  box-shadow: 0 0 30px rgba(0, 229, 255, 0.6);
  border-color: var(--electric-blue);
}

/* ═══════════════════════════════════════════════════════════
   10. FOCUS & ACCESSIBILITY
   ═══════════════════════════════════════════════════════════ */

/* Advanced Focus Ring */
*:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--electric-gold), 0 0 0 6px var(--bg-main) inset !important;
}

/* Skip Navigation (sr-only, visible on focus) */
.skip-nav {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: var(--electric-gold);
  color: #0B0E14;
  padding: 0.75rem 2rem;
  border-radius: 0 0 1rem 1rem;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: top 0.3s ease;
  text-decoration: none;
}
.skip-nav:focus {
  top: 0;
}

/* ═══════════════════════════════════════════════════════════
   11. REDUCED MOTION (SUSTAINABILITY + A11Y)
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.15s !important;
    scroll-behavior: auto !important;
  }

  .reveal-hidden {
    opacity: 1;
    transform: none;
  }

  .bento-card:hover {
    transform: none;
  }

  .glow-word {
    animation: none;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
  }
}

/* ═══════════════════════════════════════════════════════════
   12. HIGH CONTRAST SUPPORT
   ═══════════════════════════════════════════════════════════ */

@media (prefers-contrast: high) {
  :root, [data-theme="light"] {
    --border-subtle: rgba(0, 0, 0, 0.25);
    --text-secondary: #3B3B3B;
  }
  [data-theme="dark"] {
    --border-subtle: rgba(216, 181, 85, 0.35);
    --text-secondary: #C8C8C8;
  }
}

/* ═══════════════════════════════════════════════════════════
   13. HOLOGRAM & SCAN EFFECTS
   ═══════════════════════════════════════════════════════════ */

.hologram-effect {
  position: relative;
}

.hologram-effect::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(0,229,255,0.0) 0%, rgba(0,229,255,0.1) 50%, rgba(0,229,255,0.0) 100%);
  z-index: 10;
  pointer-events: none;
  animation: scanline 4s linear infinite;
}

@keyframes scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* ═══════════════════════════════════════════════════════════
   14. SCROLL REVEAL SYSTEM
   ═══════════════════════════════════════════════════════════ */

.reveal-hidden {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════
   15. INTENT-BASED ADAPTIVE LAYOUT (IA 2026)
   ═══════════════════════════════════════════════════════════ */

/* When user intent is detected, sections reorder/highlight */
.intent-compra .section-compra {
  order: -1;
}
.intent-compra .section-compra .bento-card {
  border-color: rgba(216, 181, 85, 0.2);
  box-shadow: var(--elevation-shadow-2);
}

.intent-locacao .section-locacao {
  order: -1;
}
.intent-locacao .section-locacao .bento-card {
  border-color: rgba(216, 181, 85, 0.2);
  box-shadow: var(--elevation-shadow-2);
}

/* Welcome Back Module */
.welcome-back-module {
  background: linear-gradient(135deg,
    rgba(var(--rgb-surface) / 0.6),
    rgba(var(--rgb-surface) / 0.3));
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid rgba(216, 181, 85, 0.15);
  border-radius: 2rem;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

.welcome-back-module::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    var(--electric-gold),
    transparent);
  opacity: 0.6;
}

[data-theme="light"] .welcome-back-module {
  background: linear-gradient(135deg,
    rgba(250,248,243,0.8),
    rgba(235,232,224,0.5));
  border-color: rgba(207,170,109,0.2);
}

/* ═══════════════════════════════════════════════════════════
   16. ELEVATION UTILITY CLASSES
   ═══════════════════════════════════════════════════════════ */

.elevation-0 { box-shadow: none; }
.elevation-1 { box-shadow: var(--elevation-shadow-1); }
.elevation-2 { box-shadow: var(--elevation-shadow-2); }
.elevation-3 { box-shadow: var(--elevation-shadow-3); }
.elevation-4 { box-shadow: var(--elevation-shadow-4); }

/* Dark mode surface elevation (Material Design 3 pattern) */
[data-theme="dark"] .surface-elevated-1 { background-color: var(--elevation-1); }
[data-theme="dark"] .surface-elevated-2 { background-color: var(--elevation-2); }
[data-theme="dark"] .surface-elevated-3 { background-color: var(--elevation-3); }
[data-theme="dark"] .surface-elevated-4 { background-color: var(--elevation-4); }
[data-theme="dark"] .surface-elevated-5 { background-color: var(--elevation-5); }

/* ═══════════════════════════════════════════════════════════
   17. MOBILE TOUCH TARGET SAFETY
   ═══════════════════════════════════════════════════════════ */

@media (pointer: coarse) {
  .btn-share,
  .btn-fav,
  .btn-compare {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ═══════════════════════════════════════════════════════════
   18. CLOUD DANCER AMBIENT GLOW (Light Mode Signature)
   ═══════════════════════════════════════════════════════════ */

[data-theme="light"] .bento-card:hover {
  box-shadow: var(--elevation-shadow-3),
              0 0 30px rgba(207, 170, 109, 0.08);
  border-color: rgba(207, 170, 109, 0.15);
}

[data-theme="light"] .btn-electric:hover {
  box-shadow: 0 0 30px rgba(207, 170, 109, 0.25);
}