/**
 * MLD Design System Tokens
 * Central definition of design variables for consistent styling
 *
 * @package MLS_Listings_Display
 * @version 7.0.0
 */

:root {
    /* ================================
       Primary Colors
       ================================ */
    --ds-black: #000000;
    --ds-dark-gray: #1f2937;
    --ds-white: #ffffff;
    --ds-off-white: #f3f4f6;
    --ds-red: #DC2626;
    --ds-red-hover: #B91C1C;
    --ds-teal: #0891B2;
    --ds-teal-hover: #0E7490;
    --ds-teal-light: rgba(8, 145, 178, 0.1);

    /* ================================
       Semantic Colors
       ================================ */
    --ds-success: #10b981;
    --ds-warning: #f59e0b;
    --ds-error: #DC2626;
    --ds-info: #0891B2;

    /* ================================
       Text Colors
       ================================ */
    --ds-text-primary: #000000;
    --ds-text-secondary: #374151;
    --ds-text-tertiary: #9ca3af;
    --ds-text-muted: #6b7280;
    --ds-text-inverse: #ffffff;

    /* ================================
       Surface & Background Colors
       ================================ */
    --ds-surface: #ffffff;
    --ds-surface-subtle: #f9fafb;
    --ds-surface-dark: #1f2937;
    --ds-surface-overlay: rgba(0, 0, 0, 0.6);

    /* ================================
       Border Colors
       ================================ */
    --ds-border: #e5e7eb;
    --ds-border-light: #f0f0f0;
    --ds-border-strong: #d1d5db;
    --ds-border-focus: #0891B2;

    /* ================================
       Typography Scale
       ================================ */
    --ds-text-xs: 12px;
    --ds-text-sm: 14px;
    --ds-text-base: 16px;
    --ds-text-lg: 18px;
    --ds-text-xl: 20px;
    --ds-text-2xl: 24px;
    --ds-text-3xl: 30px;
    --ds-text-4xl: 36px;

    /* ================================
       Font Weights
       ================================ */
    --ds-font-normal: 400;
    --ds-font-medium: 500;
    --ds-font-semibold: 600;
    --ds-font-bold: 700;

    /* ================================
       Spacing Scale
       ================================ */
    --ds-space-0: 0;
    --ds-space-1: 4px;
    --ds-space-2: 8px;
    --ds-space-3: 12px;
    --ds-space-4: 16px;
    --ds-space-5: 20px;
    --ds-space-6: 24px;
    --ds-space-8: 32px;
    --ds-space-10: 40px;
    --ds-space-12: 48px;

    /* ================================
       Border Radius
       ================================ */
    --ds-radius-sm: 4px;
    --ds-radius-md: 6px;
    --ds-radius-lg: 8px;
    --ds-radius-xl: 12px;
    --ds-radius-2xl: 20px;
    --ds-radius-full: 9999px;

    /* ================================
       Shadows
       ================================ */
    --ds-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --ds-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --ds-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
    --ds-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
    --ds-shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.15);
    --ds-shadow-teal: 0 4px 12px rgba(8, 145, 178, 0.3);

    /* ================================
       Transitions
       ================================ */
    --ds-transition-fast: 0.15s ease;
    --ds-transition-normal: 0.2s ease;
    --ds-transition-slow: 0.3s ease;

    /* ================================
       Z-Index Scale
       ================================ */
    --ds-z-base: 1;
    --ds-z-dropdown: 100;
    --ds-z-sticky: 500;
    --ds-z-modal: 1000;
    --ds-z-popover: 2000;
    --ds-z-tooltip: 3000;

    /* ================================
       Gradient Definitions
       ================================ */
    --ds-gradient-teal: linear-gradient(135deg, var(--ds-teal) 0%, var(--ds-teal-hover) 100%);
    --ds-gradient-dark: linear-gradient(135deg, var(--ds-dark-gray) 0%, var(--ds-black) 100%);
    --ds-gradient-red: linear-gradient(135deg, var(--ds-red) 0%, var(--ds-red-hover) 100%);
}

/* ================================
   Dark Mode Overrides
   ================================ */
@media (prefers-color-scheme: dark) {
    :root {
        --ds-surface: #1f2937;
        --ds-surface-subtle: #374151;
        --ds-text-primary: #f3f4f6;
        --ds-text-secondary: #d1d5db;
        --ds-border: #4b5563;
        --ds-border-light: #374151;
        --ds-border-strong: #6b7280;
    }
}

/* ================================
   Utility Classes (optional)
   ================================ */
.ds-bg-teal {
    background: var(--ds-gradient-teal);
}

.ds-bg-dark {
    background: var(--ds-gradient-dark);
}

.ds-text-teal {
    color: var(--ds-teal);
}

.ds-shadow-teal {
    box-shadow: var(--ds-shadow-teal);
}

.ds-glass {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ds-glass-dark {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}