/**
 * ==========================================
 * COLOR VARIABLES - CENTRALIZED COLOR MANAGEMENT
 * ==========================================
 * 
 * Change colors here and they'll update across the entire site
 * Replace "Sobeya Real Estate" with your company name throughout
 */

:root {
    /* ========== PRIMARY COLORS ========== */
    /* Main brand color - Used for buttons, links, accents */
    --color-primary: #0891B2;           /* Cyan-600 - Main brand blue */
    --color-primary-light: #06B6D4;     /* Cyan-500 - Lighter variant */
    --color-primary-dark: #0E7490;      /* Cyan-700 - Darker variant */
    --color-primary-hover: #0E7490;     /* Hover state for primary */
    
    /* ========== SECONDARY COLORS ========== */
    /* Supporting colors for variety */
    --color-secondary: #3B82F6;         /* Blue-500 */
    --color-secondary-light: #60A5FA;   /* Blue-400 */
    --color-secondary-dark: #2563EB;    /* Blue-600 */
    
    /* ========== BACKGROUND COLORS ========== */
    --color-bg-light: #F8FEFF;         /* Very light cyan - Main background */
    --color-bg-lighter: #E0F2FE;        /* Cyan-50 - Section backgrounds */
    --color-bg-white: #FFFFFF;          /* Pure white */
    --color-bg-dark: #0F172A;           /* Slate-900 - Dark sections */
    --color-bg-darker: #1E293B;         /* Slate-800 - Footer */
    
    /* ========== TEXT COLORS ========== */
    --color-text-primary: #1E293B;      /* Slate-800 - Main text */
    --color-text-secondary: #64748B;    /* Slate-500 - Secondary text */
    --color-text-light: #94A3B8;        /* Slate-400 - Lighter text */
    --color-text-white: #FFFFFF;        /* White text */
    --color-text-dark: #0F172A;         /* Very dark text */
    
    /* ========== ACCENT COLORS ========== */
    --color-accent-cyan: #0891B2;       /* Cyan-600 - Same as primary */
    --color-accent-teal: #14B8A6;       /* Teal-500 */
    --color-accent-blue: #3B82F6;       /* Blue-500 */
    
    /* ========== STATUS COLORS ========== */
    --color-success: #10B981;           /* Green-500 */
    --color-warning: #F59E0B;           /* Amber-500 */
    --color-error: #EF4444;             /* Red-500 */
    --color-info: #3B82F6;              /* Blue-500 */
    
    /* ========== BORDER COLORS ========== */
    --color-border: #E2E8F0;            /* Slate-200 */
    --color-border-light: #F1F5F9;      /* Slate-100 */
    --color-border-dark: #CBD5E1;       /* Slate-300 */
    
    /* ========== SHADOWS ========== */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    
    /* ========== NAVBAR SPECIFIC ========== */
    --navbar-bg-transparent: rgba(15, 23, 42, 0.1);  /* Transparent for hero */
    --navbar-bg-scrolled: var(--color-primary);      /* Solid blue when scrolled */
    --navbar-height: 80px;
    
    /* ========== TRANSITIONS ========== */
    --transition-fast: 0.15s ease-in-out;
    --transition-normal: 0.3s ease-in-out;
    --transition-slow: 0.5s ease-in-out;
}

/**
 * ==========================================
 * USAGE EXAMPLES:
 * ==========================================
 * 
 * In your CSS:
 *   background-color: var(--color-primary);
 *   color: var(--color-text-white);
 * 
 * In Tailwind (if needed):
 *   Use custom classes below
 */

/* ========== UTILITY CLASSES ========== */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-primary-light { background-color: var(--color-primary-light) !important; }
.bg-primary-dark { background-color: var(--color-primary-dark) !important; }

.text-primary { color: var(--color-primary) !important; }
.text-primary-light { color: var(--color-primary-light) !important; }

.border-primary { border-color: var(--color-primary) !important; }

/* Button variants */
.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-text-white);
    transition: var(--transition-normal);
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-text-white);
    border: 2px solid var(--color-text-white);
    transition: var(--transition-normal);
}

.btn-secondary:hover {
    background-color: var(--color-text-white);
    color: var(--color-primary);
}