/* ===== THEME VARIABLES ===== */
:root {
    --bg-color: #ffffff;
    --text-color: #111111;
    --primary-color: #d19a33;
    --border-color: #e5e7eb;
    --muted-text: #6b7280;
    --header-bg: #ffffff;
    --brand: #d19a33;
    --brand-light: #f5d7a1;
    --brand-dark: #a36d16;
    --bg-dark: #e5e7eb;
}

[my-theme="dark"] {
    --bg-color: #0f1117;
    --text-color: #f3f4f6;
    --primary-color: #d19a33;
    --border-color: #2d2f36;
    --muted-text: #9ca3af;
    --header-bg: #1a1c22;
    --brand: #d19a33;
    --brand-light: #f5d7a1;
    --brand-dark: #a36d16;
    --bg-dark: #2d2f36;
}

/* ===== BASE STYLES USING VARIABLES ===== */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: "Segoe UI", Roboto, sans-serif;
}

/* ===== AUTH HEADER STYLING ===== */
.auth-header {
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--border-color);
}

.auth-logo span {
    color: var(--text-color);
}

.auth-header a.text-muted {
    color: var(--muted-text);
}


/* Toggle Switch Container */
.theme-toggle-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.theme-toggle-label {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 50px;
    height: 26px;
    background: var(--bg-dark);
    border-radius: 13px;
    cursor: pointer;
    transition: background-color 0.3s;
    z-index: 1000;
}

.toggle-ball {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: var(--brand);
    border-radius: 50%;
    transition: transform 0.3s, background 0.3s;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23FFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3.5a1 1 0 0 1 1 1V5a1 1 0 0 1-2 0v-.5a1 1 0 0 1 1-1zm4.02 1.78a1 1 0 0 1 1.414 0l.354.354a1 1 0 0 1-1.414 1.414l-.354-.354a1 1 0 0 1 0-1.414zM18.5 11h.5a1 1 0 1 1 0 2h-.5a1 1 0 1 1 0-2zm-1.68 5.48a1 1 0 0 1-.354.353l-.354.354a1 1 0 1 1-1.414-1.414l.354-.354a1 1 0 0 1 1.414 1.414zm-5.82 1.52a1 1 0 0 1 1 1v.5a1 1 0 1 1-2 0v-.5a1 1 0 0 1 1-1zm-4.02-1.78a1 1 0 0 1-.354 1.414l-.354-.354a1 1 0 0 1 1.414-1.414zm-1.78-4.02a1 1 0 0 1-1-1H5a1 1 0 1 1 0 2h-.5zm1.78-4.02a1 1 0 0 1 0-1.414l.354-.354a1 1 0 0 1 1.414 1.414l-.354.354z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
}

.theme-toggle-input:checked+.theme-toggle-label {
    background: var(--brand-light);
}

.theme-toggle-input:checked+.theme-toggle-label .toggle-ball {
    transform: translateX(24px);
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 0 1 11.21 3c0 .3.02.61.05.91A7 7 0 1 0 20.1 14.25c.3.03.61.05.9.05zm-9.5-8a7 7 0 0 0 0 14c3.87 0 7-3.13 7-7a7 7 0 0 0-7-7z"/></svg>');
}

.theme-toggle-label:hover {
    background-color: var(--brand-dark);
}

.toggle-ball:hover {
    filter: brightness(1.2);
}

.text-color {
    color: var(--text-color);
}

.link-main {
    color: var(--brand);
}

.link-main:hover {
    color: var(--brand-light);
}

.form-control, .form-select {
    background-color: var(--bg-color);
    color: var(--brand);
}

.form-control:focus {
    background-color: var(--bg-color);
    border-color: var(--brand);
    box-shadow: none;
    outline: none;
    color: var(--brand);
}

.btn-main {
    background-color: var(--brand);
}

.btn-main:hover {
    background-color: var(--brand-dark);
}

.bg-main {
    background-color: var(--bg-color);
    color: var(--text-color);
}