/* ===================================================
    LIGHT MODE (Premium Purple with Better Backgrounds)
=================================================== */
:root {
    --primary: #6D28D9;
    --primary-hover: #5B21B6;
    --secondary: #0F172A;
    --accent: #9333EA; 

    --background: #F3F4F6; 
    --background-2: #E5E7EB; 
    --card-background: #FFFFFF; 

    --text-main: #111827;
    --text-secondary: #4B5563;
    --border: #D1D5DB;

    --success: #166534; --success-bg: #DCFCE7;
    --warning: #92400E; --warning-bg: #FEF3C7;
    --error: #B91C1C;   --error-bg: #FEE2E2;
    --info: #1D4ED8;    --info-bg: #DBEAFE;

    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-s: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-m: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-l: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --hover-shadow: 0 20px 25px -5px rgba(0,0,0,0.15), 0 10px 10px -5px rgba(0,0,0,0.04);

    --radius-s: 8px; --radius-m: 14px; --radius-l: 20px;


    --space-1: 1px;
    --space-2: 2px;
    --space-4: 4px;
    --space-6: 6px;
    --space-8: 8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-15: 15px;
    --space-18: 18px;
    --space-20: 20px;
}

/* ===================================================
    MANUAL DARK MODE (Optimized for Eye Strain)
=================================================== */
body.dark-mode {
    --primary: #A78BFA;
    --primary-hover: #C4B5FD;
    --secondary: #374151; /* Lighter secondary for dark mode buttons */
    --accent: #C084FC;

    --background: #0F1117;
    --background-2: #181C25;
    --card-background: #1E2330; 

    /* UX FIX: Slightly dimmed text prevents astigmatism halation */
    --text-main: #E5E7EB; 
    --text-secondary: #9CA3AF;
    --border: #374151;

    --success: #4ADE80; --success-bg: rgba(22, 101, 52, 0.2);
    --warning: #FBBF24; --warning-bg: rgba(146,64,14,0.20);
    --error: #F87171;   --error-bg: rgba(185,28,28,0.20);
    --info: #60A5FA;    --info-bg: rgba(29,78,216,0.20);

    --shadow-s: 0 2px 4px rgba(0,0,0,0.35);
    --shadow-m: 0 6px 12px rgba(0,0,0,0.40);
    --shadow-l: 0 12px 24px rgba(0,0,0,0.45);
    --hover-shadow: 0 25px 45px rgba(0,0,0,0.60);
}


/* Gap Utilities (NEW) */
.gap-1{gap:var(--space-1);}
.gap-2{gap:var(--space-2);}
.gap-4{gap:var(--space-4);}
.gap-6{gap:var(--space-6);}
.gap-8{gap:var(--space-8);}
.gap-10{gap:var(--space-10);}
.gap-12{gap:var(--space-12);}
.gap-15{gap:var(--space-15);}
.gap-18{gap:var(--space-18);}
.gap-20{gap:var(--space-20);}


.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-15{ gap: 15px;}
.gap-20{ gap: 20px;}

/* Column Gap Utilities (NEW) */
.col-gap-1 { column-gap: var(--space-1); }
.col-gap-3 { column-gap: var(--space-3); }
.row-gap-0 { row-gap: 0px; }


.text-main{color:var(--text-main);}
.text-muted{color:var(--text-secondary);}
.text-white{color:#fff;}
.text-white-2{color:#E5E7EB;}
.text-dark{color:#000;}
.text-dark-2{color:#111827;}


/* Border color style  */
.border{border:1px solid;}
.border-t{border-top:1px solid;}
.border-b{border-bottom:1px solid;}
.border-l{border-left:1px solid;}
.border-r{border-right:1px solid;}

.border-2{border:2px solid;}
.border-t-2{border-top:2px solid;}
.border-b-2{border-bottom:2px solid;}
.border-l-2{border-left:2px solid;}
.border-r-2{border-right:2px solid;}

.border-3{border:3px solid;}
.border-t-3{border-top:3px solid;}
.border-b-3{border-left-width:3px solid;}
.border-l-3{border-left:3px solid;}
.border-r-3{border-right:3px solid;}


.border-color{border-color:var(--border);}
.border-primary{border-color:var(--primary);}
.border-secondary{border-color:var(--secondary);}
.border-accent{border-color:var(--accent);}

.border-color-hover:hover{border-color:var(--border);}
.border-primary-hover:hover{border-color:var(--primary);}
.border-secondary-hover:hover{border-color:var(--secondary);}
.border-accent-hover:hover{border-color:var(--accent);}



.h1 {
    font-weight: 600;
    font-size: clamp(1.875rem, 1.2rem + 2vw, 2.25rem);
}

.h2 {
    font-size: clamp(1.688rem, 1rem + 1.5vw, 2.063rem);
    font-weight: 600;
}

.h3 {
    font-size: clamp(1.5rem, 0.9rem + 1vw, 1.875rem);
    font-weight: 600;
}

.h4 {
    font-size: clamp(1.375rem, 0.8rem + 0.8vw, 1.688rem);
    font-weight: 500;
}

.h5 {
    font-size: clamp(1.25rem, 0.7rem + 0.6vw, 1.5rem);
    font-weight: 500;
}

.h6 {
    font-size: clamp(1.125rem, 0.6rem + 0.4vw, 1.313rem);
    font-weight: 500;
}

.p {
    line-height: 1.6;
    font-size: clamp(15px, 1vw + 14px, 18px);
}


:root {
    --admin-bar-height: 0px;
}

body.admin-bar {
    --admin-bar-height: 70px;
}

@media screen and (max-width: 782px) {
    body.admin-bar {
        --admin-bar-height: 46px;
    }
}

.site-post-header{
    top: var(--wp-admin--admin-bar--height, 0px);
}