/**
 * Renovations - CSS Variables
 * 
 * This file imports core design system variables and adds renovation-specific overrides.
 * Variables are scoped to .renovations-page-wrapper to prevent leaking to global styles.
 * 
 * @package TwinsRealEstate
 * @version 2.0.0
 */

/* Import core design system variables */
/* Core variables are available globally via :root, we just reference them here */

/* Scoped to renovations pages only - prevents variable leakage
 * CRITICAL: Only scope to .renovations-page-wrapper, NOT to .renovations-page body class
 * because body class affects footer which is outside the wrapper!
 */
.renovations-page-wrapper {
  /* Renovation-specific colors (scoped to prevent footer conflicts) */
  /* Using core design system colors as base */
  --renovation-primary: var(--primary-color, #0c2340);
  --renovation-secondary: var(--secondary-color, #747474);
  --renovation-accent: var(--accent-color, #d4af37);
  
  /* Service Cards - Partner color (scoped to renovations only) */
  /* Using accent color from design system */
  --renovation-partner-color: var(--accent-color, #d4af37);
  --renovation-partner-color-light: rgba(212, 175, 55, 0.1);
  --renovation-partner-color-dark: var(--accent-color-dark, #b49225);
  --renovation-partner-color-rgb: var(--accent-color-rgb, 212, 175, 55);
  --renovation-gradient-partner: linear-gradient(135deg, var(--accent-color, #d4af37) 0%, var(--primary-color, #0c2340) 100%);
  
  /* Legacy support - map old variable names to new scoped ones */
  --partner-color: var(--renovation-partner-color);
  --partner-color-light: var(--renovation-partner-color-light);
  --partner-color-dark: var(--renovation-partner-color-dark);
  --partner-color-rgb: var(--renovation-partner-color-rgb);
  --gradient-partner: var(--renovation-gradient-partner);
  
  /* Typography - use global design system */
  --font-heading: var(--font-family-heading, 'Playfair Display', serif);
  --font-body: var(--font-family-body, 'Poppins', sans-serif);
  --font-secondary: var(--font-family-body, 'Poppins', sans-serif);
  --font-primary: var(--font-family-heading, 'Playfair Display', serif);
  
  /* Spacing - use global design system */
  --section-spacing: var(--spacing-4xl, 4rem);
  --component-spacing: var(--spacing-xl, 2rem);
  --space-1: var(--spacing-xs, 0.25rem);
  --space-2: var(--spacing-sm, 0.5rem);
  --space-3: var(--spacing-md, 1rem);
  --space-4: var(--spacing-md, 1rem);
  --space-6: var(--spacing-lg, 1.5rem);
  --space-8: var(--spacing-xl, 2rem);
  --space-10: var(--spacing-2xl, 2.5rem);
  --space-12: var(--spacing-3xl, 3rem);
  --space-16: var(--spacing-4xl, 4rem);
  --space-20: 5rem;
  
  /* Typography sizes - use global design system */
  --font-size-xs: var(--font-size-xs, 0.75rem);
  --font-size-sm: var(--font-size-sm, 0.875rem);
  --font-size-base: var(--font-size-md, 1rem);
  --font-size-md: var(--font-size-md, 1rem);
  --font-size-lg: var(--font-size-lg, 1.125rem);
  --font-size-xl: var(--font-size-xl, 1.25rem);
  --font-size-2xl: var(--font-size-2xl, 1.5rem);
  --font-size-3xl: var(--font-size-3xl, 1.875rem);
  --font-size-4xl: var(--font-size-4xl, 2.25rem);
  --font-size-5xl: var(--font-size-5xl, 3rem);
  
  --font-weight-medium: var(--font-weight-medium, 500);
  --font-weight-semibold: var(--font-weight-semibold, 600);
  --font-weight-bold: var(--font-weight-bold, 700);
  
  --line-height-relaxed: 1.625;
  --line-height-normal: 1.5;
  --line-height-tight: 1.25;
  
  /* Border Radius - use global design system */
  --radius-sm: var(--radius-sm, 0.25rem);
  --radius-md: var(--radius-md, 0.5rem);
  --radius-lg: var(--radius-lg, 1rem);
  --radius-xl: var(--radius-lg, 1rem);
  --radius-2xl: var(--radius-lg, 1rem);
  --radius-full: var(--radius-full, 9999px);
  --border-radius: var(--radius-lg, 1rem);
  
  /* Shadows - use global design system */
  --shadow-base: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
  --shadow-lg: var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
  --shadow-xl: var(--shadow-xl, 0 20px 25px rgba(0, 0, 0, 0.1));
  --shadow-2xl: var(--shadow-xl, 0 20px 25px rgba(0, 0, 0, 0.1));
  --shadow-outline: 0 0 0 3px rgba(var(--primary-color-rgb, 12, 35, 64), 0.1);
  --box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
  --box-shadow-hover: var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
  
  /* Transitions - use global design system */
  --transition-base: var(--transition, 0.3s ease);
  --transition-fast: var(--transition-fast, 0.15s ease);
  --transition-standard: var(--transition, 0.3s ease);
  --transition-bounce: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  /* Backgrounds - use global design system */
  --bg-primary: var(--color-background, #ffffff);
  --bg-secondary: var(--color-background-secondary, #f8f9fa);
  --bg-surface: var(--color-background, #ffffff);
  
  /* Text Colors - use global design system */
  --text-primary: var(--color-text-primary, #333333);
  --text-muted: var(--color-text-secondary, #666666);
  --text-on-primary: var(--white-color, #ffffff);
  --text-on-dark: var(--white-color, #ffffff);
  
  /* Borders - use global design system */
  --border-light: var(--color-border, #dee2e6);
  --border-medium: var(--color-border, #dee2e6);
  
  /* Glassmorphism / Backdrop Filter Variables */
  --blur-sm: 8px;
  --blur-md: 12px;
  --blur-lg: 20px;
  --blur-xl: 30px;
  
  /* Hero Gradient - using design system colors */
  --gradient-hero: linear-gradient(135deg, var(--primary-color, #0c2340) 0%, var(--primary-color-light, #1c3a5f) 100%);
  
  /* Pattern Grid for Backgrounds */
  --pattern-grid: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  --pattern-dots: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="80" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="60" r="1" fill="rgba(255,255,255,0.05)"/></svg>');
  
  /* Project-specific variables */
  --before-after-slider-height: 400px;
  --testimonial-quote-size: 4rem;
}

/* Dark mode overrides - scoped to renovations pages */
/* Most dark mode variables are handled by global [data-theme="dark"] selector */
[data-theme="dark"] .renovations-page-wrapper,
[data-theme="dark"] .renovations-page {
  --renovation-partner-color-light: rgba(212, 175, 55, 0.2);
  --partner-color-light: rgba(212, 175, 55, 0.2);
  
  /* Override backgrounds for dark mode */
  --bg-primary: var(--color-dark-bg, #1a1a1a);
  --bg-secondary: var(--color-dark-bg-light, #0a0a0a);
  --bg-surface: var(--color-dark-bg-lightest, #1a1a1a);
  
  /* Override text colors for dark mode */
  --text-primary: var(--color-dark-text, #ffffff);
  --text-muted: var(--color-dark-text-secondary, #e0e0e0);
  
  /* Override borders for dark mode */
  --border-light: var(--color-dark-border, #2a2a2a);
  --border-medium: var(--color-dark-border, #2a2a2a);
}