/* LIGHT MODE - Overarching */
html[data-bs-theme="light"], :root {
    --bg: #edf0f5;
    --text: #4a5568;
    --heading: #0b0e14; /* The authority color for H1s */
    --muted: #6b7a92;
    --border: rgba(0,0,0,0.10);
    color-scheme: light;
}

/* DARK MODE - Overarching */
html[data-bs-theme="dark"] {
    --bg: #0c0e12;
    --text: #8a94a8;
    --heading: #e8ecf4; /* The authority color for H1s in Dark Mode */
    --muted: #404858;
    --border: rgba(255,255,255,0.13);
    color-scheme: dark;
}

/* PROJECT-WIDE AUTHORITY RULES */
/* This forces all headers to use the dynamic variable */
h1, h2, h3, .jpr-h1 {
    color: var(--heading) !important;
}

/* This forces all general text to use the dynamic variable */
body, p, #main-wrapper {
    background-color: var(--bg) !important;
    color: var(--text) !important;
}

/* This handles the 'Done Right' grey line specifically */
.dim {
    color: var(--muted) !important;
}

/******************************************/

.theme-toggle {
    cursor: pointer;
    width: 38px;
    height: 38px;
    /* Back to a perfect circle */
    border-radius: 50%; 
    
    /* Dynamically swaps between #ffffff and #1a2030 */
    background-color: var(--surface) !important; 
    border: 1px solid var(--border);
    
    /* Icon color swaps between Dark Slate and Off-White */
    color: var(--heading) !important;
    
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    outline: none;
}

.theme-toggle:hover {
    border-color: var(--blue);
    background-color: var(--bg2) !important;
}

.theme-icon {
    display: none;
    width: 18px;
    height: 18px;
    /* Ensures the SVG matches the toggle's text color */
    fill: currentColor; 
}

.theme-icon[data-active="true"] {
    display: block !important;
}

html[data-bs-theme="light"] {
  --surface: #ffffff;
}

html[data-bs-theme="dark"] {
  --surface: #1a2030; /* Or whatever dark shade you prefer */
}