/* =============================================
   EL-SEMSAR — COLOR SYSTEM
   Charcoal × Gold — Premium
   ============================================= */

:root {
    /* Gold — ثابت في كل المود */
    --gold:        #C9A84C;
    --gold-dark:   #B8962E;
    --gold-light:  #EDE8DF;

    /* Radius */
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   24px;

    /* Spacing */
    --space-xs:    4px;
    --space-sm:    8px;
    --space-md:    16px;
    --space-lg:    24px;
    --space-xl:    48px;

    /* Transitions */
    --transition:  0.2s ease;

    /* Shadows */
    --shadow-sm:   0 1px 4px rgba(0,0,0,0.08);
    --shadow-md:   0 4px 16px rgba(0,0,0,0.12);
    --shadow-lg:   0 8px 32px rgba(0,0,0,0.18);
    --shadow-gold: 0 4px 20px rgba(201,168,76,0.25);

    /* Typography scale */
    --font-hero:   2.25rem;
    --font-h1:     1.75rem;
    --font-h2:     1.35rem;
    --font-h3:     1.1rem;
    --font-body:   0.95rem;
    --font-sm:     0.85rem;
    --font-tiny:   0.75rem;
    --font-price:  1.5rem;

    /* Layout */
    --max-width:   1200px;

    /* ── Light-mode defaults (fallback if data-theme attr missing) ── */
    --bg-primary:    #F5F2EC;
    --bg-secondary:  #EDE8DF;
    --bg-surface:    #E0DAD0;
    --bg-elevated:   #FFFFFF;

    --border:        #D0C8BC;
    --border-light:  rgba(201,168,76,0.25);

    --text-primary:  #141414;
    --text-secondary:#555555;
    --text-muted:    #888888;

    --accent:        #C9A84C;
    --accent-gold:   #C9A84C;
    --accent-hover:  #B8962E;

    --btn-bg:            #141414;
    --btn-text:          #C9A84C;
    --btn-primary-bg:    #141414;
    --btn-primary-text:  #C9A84C;
    --btn-secondary-bg:  #EDE8DF;
    --btn-secondary-text:#141414;

    --input-bg:      #EDE8DF;
    --input-border:  #C9A84C;
    --input-focus:   #141414;

    --glass-bg:      rgba(245,242,236,0.85);
    --glass-border:  rgba(201,168,76,0.25);
    --glass-blur:    blur(12px);

    --nav-bg:        rgba(245,242,236,0.92);
    --nav-border:    #D0C8BC;

    --card-bg:       rgba(255,255,255,0.9);
    --card-border:   rgba(201,168,76,0.25);

    --badge-rent-bg:    #0F6E56;
    --badge-rent-text:  #E1F5EE;
    --badge-sale-bg:    #185FA5;
    --badge-sale-text:  #E6F1FB;
    --badge-resale-bg:  #EDE8DF;
    --badge-resale-text:#555555;

    --overlay:       rgba(245,242,236,0.95);
}

/* =============================================
   DARK MODE — الليل الفاخر
   ============================================= */
[data-theme="dark"] {
    --bg-primary:    #0A0A0A;
    --bg-secondary:  #141414;
    --bg-surface:    #1E1E1E;
    --bg-elevated:   #252525;

    --border:        #2A2A2A;
    --border-light:  rgba(201,168,76,0.15);

    --text-primary:  #F0E8D5;
    --text-secondary:#C9A84C;
    --text-muted:    #888888;

    --accent:        #C9A84C;
    --accent-gold:   #C9A84C;
    --accent-hover:  #E8C46A;

    --btn-bg:            #C9A84C;
    --btn-text:          #0A0A0A;
    --btn-primary-bg:    #C9A84C;
    --btn-primary-text:  #0A0A0A;
    --btn-secondary-bg:  #1E1E1E;
    --btn-secondary-text:#C9A84C;

    --input-bg:      #1E1E1E;
    --input-border:  #333333;
    --input-focus:   #C9A84C;

    --glass-bg:      rgba(20,20,20,0.8);
    --glass-border:  rgba(201,168,76,0.15);
    --glass-blur:    blur(12px);

    --nav-bg:        rgba(10,10,10,0.92);
    --nav-border:    #2A2A2A;

    --card-bg:       rgba(30,30,30,0.9);
    --card-border:   rgba(201,168,76,0.15);

    --badge-rent-bg:    #0F6E56;
    --badge-rent-text:  #E1F5EE;
    --badge-sale-bg:    #185FA5;
    --badge-sale-text:  #E6F1FB;
    --badge-resale-bg:  #1E1E1E;
    --badge-resale-text:#C9A84C;

    --overlay:       rgba(10,10,10,0.85);

    color-scheme: dark;
}

/* =============================================
   LIGHT MODE — explicit override
   ============================================= */
[data-theme="light"] {
    --bg-primary:    #F5F2EC;
    --bg-secondary:  #EDE8DF;
    --bg-surface:    #E0DAD0;
    --bg-elevated:   #FFFFFF;

    --border:        #D0C8BC;
    --border-light:  rgba(201,168,76,0.25);

    --text-primary:  #141414;
    --text-secondary:#555555;
    --text-muted:    #888888;

    --accent:        #C9A84C;
    --accent-gold:   #C9A84C;
    --accent-hover:  #B8962E;

    --btn-bg:            #141414;
    --btn-text:          #C9A84C;
    --btn-primary-bg:    #141414;
    --btn-primary-text:  #C9A84C;
    --btn-secondary-bg:  #EDE8DF;
    --btn-secondary-text:#141414;

    --input-bg:      #EDE8DF;
    --input-border:  #C9A84C;
    --input-focus:   #141414;

    --glass-bg:      rgba(245,242,236,0.85);
    --glass-border:  rgba(201,168,76,0.25);
    --glass-blur:    blur(12px);

    --nav-bg:        rgba(245,242,236,0.92);
    --nav-border:    #D0C8BC;

    --card-bg:       rgba(255,255,255,0.9);
    --card-border:   rgba(201,168,76,0.25);

    --badge-rent-bg:    #0F6E56;
    --badge-rent-text:  #E1F5EE;
    --badge-sale-bg:    #185FA5;
    --badge-sale-text:  #E6F1FB;
    --badge-resale-bg:  #EDE8DF;
    --badge-resale-text:#555555;

    --overlay:       rgba(245,242,236,0.95);

    color-scheme: light;
}