/**
 * Property Detail Page - Design Tokens
 * 
 * Modern CSS Custom Properties with fluid scaling
 * Single source of truth for all design values
 * 
 * Version: 2.0 (Modern CSS)
 * Created: 2025-01-27
 */

:root {
  /* ========================================================================
     FLUID SPACING SYSTEM (Using clamp() for responsive scaling)
     ======================================================================== */
  
  /* Base spacing reference (16px) */
  --space-base: 1rem;
  
  /* Fluid spacing scale - scales smoothly across all screen sizes */
  --space-xs: clamp(0.25rem, 0.5vw, 0.5rem);      /* 4px - 8px */
  --space-sm: clamp(0.5rem, 1vw, 0.75rem);        /* 8px - 12px */
  --space-md: clamp(0.75rem, 1.5vw, 1.25rem);    /* 12px - 20px */
  --space-lg: clamp(1rem, 2vw, 1.75rem);         /* 16px - 28px */
  --space-xl: clamp(1.5rem, 3vw, 2.5rem);        /* 24px - 40px */
  --space-2xl: clamp(2rem, 4vw, 3.5rem);        /* 32px - 56px */
  --space-3xl: clamp(2.5rem, 5vw, 4.5rem);       /* 40px - 72px */
  
  /* Section spacing - responsive padding for sections */
  --section-spacing: clamp(2rem, 5vw, 4rem);
  --section-spacing-sm: clamp(1.5rem, 3vw, 2.5rem);
  --section-spacing-lg: clamp(3rem, 6vw, 5rem);
  
  /* ========================================================================
     FLUID TYPOGRAPHY SYSTEM
     ======================================================================== */
  
  /* Property title - scales from 32px to 48px */
  --font-title: clamp(2rem, 5vw + 1rem, 3rem);
  --font-title-line-height: 1.2;
  
  /* Section headings - scales from 24px to 36px */
  --font-heading: clamp(1.5rem, 3vw + 0.5rem, 2.25rem);
  --font-heading-line-height: 1.3;
  
  /* Subheadings - scales from 20px to 28px */
  --font-subheading: clamp(1.25rem, 2vw + 0.25rem, 1.75rem);
  --font-subheading-line-height: 1.4;
  
  /* Body text - scales from 14px to 16px */
  --font-body: clamp(0.875rem, 1vw + 0.125rem, 1rem);
  --font-body-line-height: 1.6;
  
  /* Small text - scales from 12px to 14px */
  --font-small: clamp(0.75rem, 0.8vw + 0.1rem, 0.875rem);
  --font-small-line-height: 1.5;
  
  /* ========================================================================
     CONTAINER & GRID SYSTEM
     ======================================================================== */
  
  /* Container max-widths (responsive with min() function) */
  --container-sm: min(100%, 540px);
  --container-md: min(100%, 720px);
  --container-lg: min(100%, 960px);
  --container-xl: min(100%, 1140px);
  --container-xxl: min(100%, 1400px);
  
  /* Container padding - responsive */
  --container-padding: clamp(1rem, 4vw, 2rem);
  
  /* Grid gaps - responsive spacing between grid items */
  --grid-gap-sm: clamp(1rem, 2vw, 1.5rem);
  --grid-gap-md: clamp(1.5rem, 3vw, 2.5rem);
  --grid-gap-lg: clamp(2rem, 4vw, 3rem);
  
  /* Sidebar width - responsive between 280px and 400px */
  --sidebar-width: clamp(280px, 30vw, 400px);
  
  /* ========================================================================
     CARD & COMPONENT DIMENSIONS
     ======================================================================== */
  
  /* Card padding - responsive */
  --card-padding: clamp(1rem, 2vw, 1.75rem);
  --card-padding-sm: clamp(0.75rem, 1.5vw, 1.25rem);
  --card-padding-lg: clamp(1.25rem, 2.5vw, 2rem);
  
  /* Card border radius - responsive */
  --card-radius: clamp(0.75rem, 1.5vw, 1.25rem);
  --card-radius-sm: clamp(0.5rem, 1vw, 0.75rem);
  --card-radius-lg: clamp(1rem, 2vw, 1.5rem);
  
  /* Card shadows - consistent elevation system */
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
  --card-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
  
  /* ========================================================================
     MAP HEIGHTS (Responsive)
     ======================================================================== */
  
  /* Map heights for different breakpoints */
  --map-height-mobile: clamp(300px, 40vh, 400px);
  --map-height-tablet: clamp(400px, 50vh, 600px);
  --map-height-desktop: clamp(500px, 60vh, 700px);
  --map-height-default: var(--map-height-desktop);
  
  /* ========================================================================
     SIMILAR PROPERTIES CARDS
     ======================================================================== */
  
  /* Card min/max widths for grid */
  --similar-card-min-width: clamp(280px, 30vw, 380px);
  --similar-card-image-aspect: 16 / 10;
  --similar-card-aspect: 3 / 4;
  
  /* ========================================================================
     TRANSITIONS & ANIMATIONS
     ======================================================================== */
  
  /* Transition durations */
  --transition-fast: 150ms;
  --transition-base: 250ms;
  --transition-slow: 350ms;
  
  /* Easing functions */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  
  /* Combined transition shorthand */
  --transition: all var(--transition-base) var(--ease-in-out);
  --transition-smooth: all var(--transition-base) var(--ease-in-out);
  
  /* ========================================================================
     COLORS (Inherited from global variables, override if needed)
     ======================================================================== */
  
  /* Use global color system */
  --property-bg: var(--color-background, #ffffff);
  --property-card-bg: var(--color-background, #ffffff);
  --property-border: var(--color-border, #e5e7eb);
  --property-text: var(--color-text-primary, #1f2937);
  --property-text-secondary: var(--color-text-secondary, #6b7280);
  
  /* Accent colors */
  --property-accent: var(--accent-color, #d4af37);
  --property-primary: var(--primary-color, #0c2340);
}

/* ========================================================================
   DARK MODE OVERRIDES
   ======================================================================== */

html[data-theme="dark"] {
  --property-bg: #000000; /* Ultra-black background */
  --property-card-bg: #0a0a0a; /* Near-black for cards */
  --property-border: #2a2a2a; /* Subtle borders */
  --property-text: #ffffff; /* Pure white text */
  --property-text-secondary: #e0e0e0; /* Light grey secondary text */
  
  /* Enhanced shadows for ultra-black dark mode */
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  --card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.8);
  --card-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.9);
}

/* ========================================================================
   ACCESSIBILITY - REDUCED MOTION
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
    --transition: none;
    --transition-smooth: none;
  }
}

/* ========================================================================
   HIGH CONTRAST MODE
   ======================================================================== */

@media (prefers-contrast: high) {
  :root {
    --card-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    --card-shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.4);
    --property-border: var(--color-text-primary);
  }
}