/**
 * ATAM Real Estate - Design System
 * Brand: Black + Gold (#D4AF37)
 * Clean dark theme with gold accents
 */

/* ============================================
   TYPOGRAPHY
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

* {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1;
    font-kerning: normal;
}

body {
    line-height: 1.6;
    letter-spacing: -0.011em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

h1 {
    font-size: 3rem;
    font-weight: 800;
}

h2 {
    font-size: 2.25rem;
    font-weight: 700;
}

h3 {
    font-size: 1.875rem;
    font-weight: 700;
}

p {
    line-height: 1.7;
    letter-spacing: -0.011em;
}

/* ============================================
   COLOR VARIABLES
   ============================================ */
:root {
    --color-black: #000000;
    --color-black-lighter: #0a0a0a;
    --color-black-card: #050505;
    --color-gold: #D4AF37;
    --color-gold-light: #E8C547;
    --color-gold-dark: #B8941F;

    /* Premium Gold Palette */
    --color-gold-lightest: #FDF6E3;
    --color-gold-hover: #E8C547;
    --color-gold-deep: #A07D1C;

    /* Premium Backgrounds */
    --bg-dark-primary: #000000;
    --bg-dark-secondary: #0A0A0A;
    --bg-dark-elevated: #111111;
    --bg-dark-card: #141414;

    /* Gold Gradient Presets */
    --gradient-gold: linear-gradient(135deg, #B8941F, #D4AF37, #E8C547);
    --gradient-gold-reverse: linear-gradient(135deg, #E8C547, #D4AF37, #B8941F);
    --gradient-gold-subtle: linear-gradient(135deg, rgba(212,175,55,0.1), rgba(212,175,55,0.05));
    --gradient-dark: linear-gradient(135deg, #000000, #0a0a0a, #111111);

    /* Gold Glow */
    --glow-gold: 0 0 20px rgba(212,175,55,0.15);
    --glow-gold-strong: 0 0 30px rgba(212,175,55,0.25);
}

/* ============================================
   BACKGROUND COLORS
   ============================================ */
body {
    background-color: var(--color-black);
    color: #ffffff;
}

.bg-gray-50,
.bg-gray-100 {
    background-color: var(--color-black-lighter) !important;
    color: #ffffff !important;
}

/* ============================================
   TEXT COLORS - Dark theme overrides
   ============================================ */
.text-gray-900,
.text-gray-800,
.text-gray-700,
.text-gray-600 {
    color: #ffffff !important;
}

.text-gray-500 {
    color: rgba(255, 255, 255, 0.7) !important;
}

.text-gray-400 {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ============================================
   BRAND COLORS - GOLDEN
   ============================================ */
.text-brand-gold,
.text-bayut-blue,
.brand-gold {
    color: var(--color-gold) !important;
}

.bg-brand-gold,
.bg-bayut-blue {
    background: linear-gradient(135deg, var(--color-gold-dark) 0%, var(--color-gold) 50%, var(--color-gold-dark) 100%) !important;
    color: #000000 !important;
}

/* ============================================
   BORDERS
   ============================================ */
.border,
.border-t,
.border-b,
.border-l,
.border-r {
    border-color: rgba(212, 175, 55, 0.15) !important;
}

/* ============================================
   SHADOWS - MINIMAL
   ============================================ */
.shadow-sm {
    box-shadow: 0 1px 2px rgba(212, 175, 55, 0.05) !important;
}

.shadow-md,
.shadow-lg,
.shadow-xl {
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.05) !important;
}

/* ============================================
   BUTTONS & INTERACTIVE ELEMENTS
   ============================================ */
button[type="submit"],
.btn-gold {
    background: linear-gradient(135deg, var(--color-gold-dark), var(--color-gold), var(--color-gold-dark)) !important;
    color: #000000 !important;
    font-weight: 500 !important;
    padding: 0.75rem 2rem;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

button[type="submit"]:hover,
.btn-gold:hover {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
    transform: translateY(-1px);
}

/* ============================================
   CARDS - DARK THEME
   ============================================ */
.property-card,
.developer-card {
    background-color: var(--color-black-card) !important;
    border: 1px solid rgba(212, 175, 55, 0.15);
    transition: all 0.3s ease;
}

.property-card:hover,
.developer-card:hover {
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
    transform: translateY(-2px);
}

/* bg-white as dark card in dark theme */
.bg-white {
    background-color: var(--color-black-card) !important;
    color: #ffffff !important;
    border: 1px solid rgba(212, 175, 55, 0.15);
}

/* ============================================
   FORMS
   ============================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
select,
textarea {
    background-color: var(--color-black-card) !important;
    border-color: rgba(212, 175, 55, 0.2) !important;
    color: #ffffff !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-gold) !important;
    box-shadow: 0 0 0 1px var(--color-gold) !important;
    outline: none;
}

/* ============================================
   LINKS
   ============================================ */
a {
    color: var(--color-gold);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--color-gold-light);
}

/* ============================================
   NAVIGATION
   ============================================ */
nav {
    background-color: var(--color-black);
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
}

/* ============================================
   BLUE/GREEN → GOLD COLOR MAPPING
   ============================================ */
.bg-green-50, .bg-green-100, .bg-green-200, .bg-green-300, .bg-green-400,
.bg-green-500, .bg-green-600, .bg-green-700, .bg-green-800, .bg-green-900,
.bg-blue-50, .bg-blue-100, .bg-blue-200, .bg-blue-300, .bg-blue-400,
.bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-blue-800, .bg-blue-900,
.bg-bayut-green,
.from-bayut-blue, .from-blue-600, .from-blue-900,
.from-bayut-green, .from-green-700,
.to-blue-600, .to-blue-800, .to-blue-900,
.to-green-700 {
    background: linear-gradient(135deg, var(--color-gold-dark), var(--color-gold)) !important;
    color: #000000 !important;
}

.text-green-50, .text-green-100, .text-green-200, .text-green-300,
.text-green-400, .text-green-500, .text-green-600, .text-green-700,
.text-green-800, .text-green-900,
.text-blue-50, .text-blue-100, .text-blue-200, .text-blue-300,
.text-blue-400, .text-blue-500, .text-blue-600, .text-blue-700,
.text-blue-800, .text-blue-900,
.text-bayut-blue, .text-bayut-green {
    color: var(--color-gold) !important;
}

.border-green-500, .border-green-600, .border-green-700,
.border-blue-500, .border-blue-600, .border-blue-700,
.border-bayut-blue, .border-bayut-green,
.border-l-bayut-blue {
    border-color: var(--color-gold) !important;
}

/* ============================================
   UTILITIES
   ============================================ */
.font-bold {
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
}

.font-semibold {
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
}

.font-medium {
    font-weight: 500 !important;
}

.text-xs {
    font-size: 0.75rem;
    letter-spacing: 0.01em;
}

.text-sm {
    font-size: 0.875rem;
    letter-spacing: -0.006em;
}

.text-base {
    font-size: 1rem;
    letter-spacing: -0.011em;
}

.text-lg {
    font-size: 1.125rem;
    letter-spacing: -0.014em;
}

.text-xl {
    font-size: 1.25rem;
    letter-spacing: -0.017em;
}

.text-2xl {
    font-size: 1.5rem;
    letter-spacing: -0.021em;
}

/* ============================================
   ICONS - Scoped (not global SVG)
   ============================================ */
.text-brand-gold svg,
.brand-gold svg {
    color: var(--color-gold);
}

a:hover svg,
button:hover svg,
.group:hover svg {
    color: var(--color-gold-light);
}

/* Icon backgrounds */
.bg-blue-100, .bg-green-100 {
    background-color: rgba(212, 175, 55, 0.1) !important;
}

/* ============================================
   RESPONSIVE IMAGES
   ============================================ */
img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   FONT AWESOME ICON FIX
   ============================================ */
/* Ensure Font Awesome icons display properly */
.fa, .fas, .far, .fal, .fab, .fa-brands, .fa-solid, .fa-regular {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
    font-weight: 900;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Brand icons specific weight */
.fab, .fa-brands {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

/* ============================================
   PREMIUM UTILITY CLASSES
   ============================================ */

/* Premium card styles */
.card-premium {
    background: var(--bg-dark-card);
    border: 1px solid rgba(212,175,55,0.1);
    transition: all 0.3s ease;
}
.card-premium:hover {
    border-color: rgba(212,175,55,0.3);
    box-shadow: var(--glow-gold);
    transform: translateY(-2px);
}

/* Gold text gradient */
.text-gold-gradient {
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Gold border glow on hover */
.border-gold-glow {
    border: 1px solid rgba(212,175,55,0.15);
    transition: all 0.3s ease;
}
.border-gold-glow:hover {
    border-color: rgba(212,175,55,0.4);
    box-shadow: var(--glow-gold);
}

/* Premium section divider */
.section-divider-gold {
    width: 60px;
    height: 3px;
    background: var(--gradient-gold);
    border-radius: 2px;
}

/* Centered section divider */
.section-divider-gold-center {
    width: 60px;
    height: 3px;
    background: var(--gradient-gold);
    margin: 0.75rem auto 0;
    border-radius: 2px;
}

/* Gold icon container */
.icon-gold-container {
    background: rgba(212,175,55,0.1);
    border: 1px solid rgba(212,175,55,0.2);
    border-radius: 12px;
    padding: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Gold gradient button */
.btn-gold-gradient {
    background: linear-gradient(135deg, #B8941F, #D4AF37, #E8C547) !important;
    color: #000000 !important;
    font-weight: 600;
    padding: 0.625rem 1.5rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    text-decoration: none !important;
    display: inline-block;
}
.btn-gold-gradient:hover {
    box-shadow: var(--glow-gold-strong);
    transform: translateY(-1px);
    color: #000000 !important;
}

/* Gold outline button */
.btn-gold-outline {
    background: transparent !important;
    color: var(--color-gold) !important;
    border: 1px solid var(--color-gold);
    font-weight: 600;
    padding: 0.625rem 1.5rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    text-decoration: none !important;
    display: inline-block;
}
.btn-gold-outline:hover {
    background: rgba(212,175,55,0.1) !important;
    box-shadow: var(--glow-gold);
    color: var(--color-gold) !important;
}

/* Premium stat card */
.stat-card-premium {
    background: rgba(212,175,55,0.06);
    border: 1px solid rgba(212,175,55,0.15);
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}
.stat-card-premium:hover {
    border-color: rgba(212,175,55,0.3);
    box-shadow: var(--glow-gold);
    transform: translateY(-2px);
}

/* Section heading with gold accent */
.heading-premium {
    position: relative;
    display: inline-block;
}
.heading-premium::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--gradient-gold);
    border-radius: 2px;
}

/* Centered heading accent */
.heading-premium-center {
    position: relative;
    display: inline-block;
}
.heading-premium-center::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--gradient-gold);
    border-radius: 2px;
}