:root {
    /* --- Light Mode (Normal) --- */
    --bg-main: #FFFFFF;
    --bg-secondary: #F5EFE6;
    --text-main: #3E2C23;
	 --bg-secondary-2: #889581;
    --text-sub: #5c4b43;
    --border: #e5e7eb;
    --verse-btn: #889581;
    --verse-btn-hover: #76846f;
    --card-bg: #FFFFFF;
}

.dark {
    /* --- Dark Mode --- */
    --bg-main: #12100e;
    --bg-secondary: #1c1815;
	 --bg-secondary-2: #12100e; 
    --text-main: #F5EFE6;
    --text-sub: #a3948d;
    --border: #2d2621;
    --verse-btn: #889581;
    --verse-btn-hover: #9fb097;
    --card-bg: #1c1815;
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    transition: all 0.3s ease;
}

/* Custom Components mapped to variables */
.section-border { border-color: var(--border) !important; }
.bg-secondary-2 { background-color:  var(--bg-secondary-2) !important; }
.main-bg { background-color: var(--bg-main); }
.secondary-bg { background-color: var(--bg-secondary); }
.text-main { color: var(--text-main); }
.text-sub { color: var(--text-sub); }
.bg-verse-btn { background-color: var(--verse-btn) !important; }
.bg-verse-btn:hover { background-color: var(--verse-btn-hover) !important; }
.category-card { background-color: var(--bg-secondary); border: 1px solid var(--border); }
.poem-card { background-color: var(--card-bg); border: 1px solid var(--border); }