/**
 * Ghostly Labs CSS Variables
 * Phantom Realty Engine - Design System Variables
 * 
 * Core design tokens including colors, spacing, typography and effects.
 * Must be loaded first to provide variables for all other CSS files.
 * 
 * SCOPED to prevent PowerPack conflicts - variables only apply to Phantom elements
 * 
 * @package PhantomRealtyEngine
 * @subpackage CSS-Variables
 * @version 2.0.0
 * @order 01
 * @brand Ghostly Labs - Enterprise Real Estate Solutions
 */

/* ================================
   MINIMAL ROOT VARIABLES
   Only essential fallbacks to prevent conflicts
   ================================ */

/* CSS Variables with Beaver Builder First Priority - FRONTEND ONLY */
:root {
  --primary: var(--fl-theme-primary-color, var(--pre-primary, #2c5aa0));
  --secondary: var(--fl-theme-secondary-color, var(--pre-secondary, #3ab24a));
  --accent: var(--fl-theme-accent-color, var(--pre-accent, #f39c12));
  --text: var(--fl-theme-text-color, var(--pre-text, #1e293b));
  --heading: var(--fl-theme-heading-color, var(--pre-heading, #1e293b));
  --button: var(--fl-theme-button-bg-color, var(--pre-button, #2c5aa0));
  --button-text: var(--fl-theme-button-text-color, var(--pre-button-text, #ffffff));
  
  /* Compatibility mode */
  --pre-compatibility-mode: true;
}

/* ================================
   MASTER CSS VARIABLES SYSTEM
   Scoped Design Tokens for Phantom Realty Engine
   ================================ */

/* Scoped to Phantom classes to prevent PowerPack conflicts */
.phantom-search-form-container,
.pre-card,
.pre-button,
.pre-input,
.pre-content-area,
.pre-user-dashboard,
.pre-dashboard,
body[class*='pre-realty'],
body[class*='phantom'],
[class*='pre-'],
[class*='phantom-'] {
    /* PRIMARY BRAND COLORS - Green/Gray/Black ONLY */
    --pre-gray: #b0b7bc;
    --pre-gray-light: #d4d8db;
    --pre-gray-dark: #8c9499;
    --pre-black: #000000;
    --pre-black-soft: #0a0a0a;
    --pre-green: #3ab24a;
    --pre-green-light: #4caf50;
    --pre-green-dark: #2e7d32;
    --pre-white: #ffffff;

    /* SEMANTIC COLORS */
    --pre-primary: var(--pre-green);
    --pre-primary-dark: var(--pre-green-dark);
    --pre-primary-light: var(--pre-green-light);
    --pre-secondary: var(--pre-green-dark);
    --pre-dark: var(--pre-black);
    --pre-light: var(--pre-white);

    /* STATUS COLORS */
    --pre-success: var(--pre-green);
    --pre-warning: #fbbf24;
    --pre-danger: #ef4444;
    --pre-error: #ff3838;
    --pre-info: var(--pre-green-light);

    /* BACKGROUND COLORS */
    --pre-bg-dark: #0a0a0a;
    --pre-bg-card: #141414;
    --pre-border: #1a1a1a;

    /* TEXT COLORS */
    --pre-text: #e0e0e0;
    --pre-text-dim: #b0b0b0;
    --pre-text-light: #e0e0e0;
    --pre-text-white: #ffffff;

    /* GLASS EFFECTS */
    --pre-glass: rgba(176, 183, 188, 0.03);
    --pre-glass-strong: rgba(176, 183, 188, 0.08);
    --pre-glass-border: rgba(58, 178, 74, 0.2);
    --pre-glass-border-strong: rgba(58, 178, 74, 0.4);
    --pre-glass-bg: rgba(10, 10, 10, 0.8);
    --pre-glass-hover: rgba(26, 26, 26, 0.9);
    --pre-blur: blur(20px) saturate(180%);

    /* TYPOGRAPHY SYSTEM */
    --pre-font-family: 'Montserrat', sans-serif;
    --pre-font-headings: 'Montserrat', sans-serif;
    --pre-font-mono: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    --pre-font-chalk: 'Permanent Marker', cursive;

    /* FONT SIZES */
    --pre-text-xs: 0.75rem;
    --pre-text-sm: 0.875rem;
    --pre-text-base: 1rem;
    --pre-text-lg: 1.125rem;
    --pre-text-xl: 1.25rem;
    --pre-text-2xl: 1.5rem;
    --pre-text-3xl: 1.875rem;
    --pre-text-4xl: 2.25rem;

    /* FONT WEIGHTS */
    --pre-font-normal: 400;
    --pre-font-medium: 500;
    --pre-font-semibold: 600;
    --pre-font-bold: 700;
    --pre-font-extrabold: 800;

    /* SHADOWS & GLOWS */
    --pre-glow: 0 0 40px rgba(58, 178, 74, 0.3);
    --pre-glow-strong: 0 0 60px rgba(58, 178, 74, 0.5);
    --pre-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    --pre-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.3);
    --pre-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --pre-shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.1);
    --pre-shadow-md: 0 10px 15px rgba(0, 0, 0, 0.2);
    --pre-shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.3);
    --pre-shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.4);

    /* BORDER RADIUS */
    --pre-radius-none: 0;
    --pre-radius-xs: 2px;
    --pre-radius-sm: 6px;
    --pre-radius-md: 12px;
    --pre-radius-lg: 20px;
    --pre-radius-xl: 30px;
    --pre-radius-full: 9999px;

    /* ANIMATIONS & TRANSITIONS */
    --pre-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --pre-transition-fast: all 0.15s ease-out;
    --pre-transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --pre-transition-bounce: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* EASING CURVES */
    --pre-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --pre-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --pre-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* SPACING SYSTEM */
    --pre-space-px: 1px;
    --pre-space-0: 0;
    --pre-space-1: 0.25rem;
    --pre-space-2: 0.5rem;
    --pre-space-3: 0.75rem;
    --pre-space-4: 1rem;
    --pre-space-5: 1.25rem;
    --pre-space-6: 1.5rem;
    --pre-space-8: 2rem;
    --pre-space-10: 2.5rem;
    --pre-space-12: 3rem;
    --pre-space-16: 4rem;
    --pre-space-20: 5rem;

    /* SEMANTIC SPACING */
    --pre-space-xs: var(--pre-space-2);
    --pre-space-sm: var(--pre-space-4);
    --pre-space-md: var(--pre-space-6);
    --pre-space-lg: var(--pre-space-8);
    --pre-space-xl: var(--pre-space-12);

    /* LAYOUT CONSTRAINTS */
    --pre-max-width: 1200px;
    --pre-max-height: 600px;
    --pre-chart-height: 400px;
    --pre-table-height: 500px;
    --pre-sidebar-width: 280px;
    --pre-header-height: 60px;

    /* Z-INDEX SYSTEM */
    --pre-z-auto: auto;
    --pre-z-0: 0;
    --pre-z-10: 10;
    --pre-z-20: 20;
    --pre-z-30: 30;
    --pre-z-40: 40;
    --pre-z-50: 50;
    --pre-z-dropdown: 1000;
    --pre-z-sticky: 1020;
    --pre-z-fixed: 1030;
    --pre-z-modal: 1040;
    --pre-z-popover: 1050;
    --pre-z-tooltip: 1060;

    /* OPACITY LEVELS */
    --pre-opacity-0: 0;
    --pre-opacity-5: 0.05;
    --pre-opacity-10: 0.1;
    --pre-opacity-20: 0.2;
    --pre-opacity-25: 0.25;
    --pre-opacity-30: 0.3;
    --pre-opacity-40: 0.4;
    --pre-opacity-50: 0.5;
    --pre-opacity-60: 0.6;
    --pre-opacity-70: 0.7;
    --pre-opacity-75: 0.75;
    --pre-opacity-80: 0.8;
    --pre-opacity-90: 0.9;
    --pre-opacity-95: 0.95;
    --pre-opacity-100: 1;

    /* BREAKPOINTS */
    --pre-breakpoint-sm: 640px;
    --pre-breakpoint-md: 768px;
    --pre-breakpoint-lg: 1024px;
    --pre-breakpoint-xl: 1280px;
    --pre-breakpoint-2xl: 1536px;
}

/* ================================
   VARIABLE OVERRIDES FOR CONTEXTS
   ================================ */

/* WordPress Admin Bar Adjustments */
.admin-bar {
    --pre-header-height: 92px;
    /* 60px + 32px admin bar */
}

/* High Contrast Mode - Scoped to Phantom elements */
@media (prefers-contrast: high) {
    .phantom-search-form-container,
    .pre-card,
    .pre-button,
    .pre-input,
    .pre-content-area,
    .pre-user-dashboard,
    .pre-dashboard,
    body[class*='pre-realty'],
    body[class*='phantom'],
    [class*='pre-'],
    [class*='phantom-'] {
        --pre-glass-border: rgba(58, 178, 74, 0.6);
        --pre-shadow-md: 0 10px 15px rgba(0, 0, 0, 0.5);
    }
}

/* Reduced Motion - Scoped to Phantom elements */
@media (prefers-reduced-motion: reduce) {
    .phantom-search-form-container,
    .pre-card,
    .pre-button,
    .pre-input,
    .pre-content-area,
    .pre-user-dashboard,
    .pre-dashboard,
    body[class*='pre-realty'],
    body[class*='phantom'],
    [class*='pre-'],
    [class*='phantom-'] {
        --pre-transition: none;
        --pre-transition-fast: none;
        --pre-transition-slow: none;
    }
}

/* Dark Mode Enforced */
@media (prefers-color-scheme: light) {
    :root {
        /* Force dark theme even in light mode preference */
        --pre-black: #000000;
        --pre-black-soft: #0a0a0a;
    }
}