/* ===========================================================
   Reader color themes. Light and dark are chosen separately.
   <html data-light="ID"> picks the light theme, <html data-dark="ID"> the
   dark one; data-theme="dark" says which mode is showing. The defaults
   (গোলাপজল light, সন্ধ্যা dark) live in global.css :root and [data-theme="dark"],
   so a page still looks right with no JavaScript. Generated from one table;
   public/theme-picker.js holds the same ids and labels.
   =========================================================== */

/* ---------- Light themes ---------- */
/* বালুচর */
html[data-light="khaki"]:not([data-theme="dark"]) {
    --bg-page: #f5efe6;
    --bg-card: #ebe0d1;
    --text-main: #2b1d14;
    --text-muted: #6b4f3a;
    --accent: #8b4513;
    --highlight: #c97b3c;
    --border: #d4c4b0;
    --shadow: rgba(43, 29, 20, 0.08);
    --shadow-strong: rgba(43, 29, 20, 0.15);
}

/* কুয়াশা */
html[data-light="mauve"]:not([data-theme="dark"]) {
    --bg-page: #F6F3F3;
    --bg-card: #EBE4E4;
    --text-main: #3B3030;
    --text-muted: #6A5656;
    --accent: #664343;
    --highlight: #9C3D4A;
    --border: #DCD1D1;
    --shadow: rgba(59, 48, 48, 0.06);
    --shadow-strong: rgba(59, 48, 48, 0.12);
}

/* কাশফুল */
html[data-light="white"]:not([data-theme="dark"]) {
    --bg-page: #FFFFFF;
    --bg-card: #F7F2F2;
    --text-main: #2E2424;
    --text-muted: #665252;
    --accent: #8A3B4A;
    --highlight: #664343;
    --border: #E8DEDE;
    --shadow: rgba(46, 36, 36, 0.05);
    --shadow-strong: rgba(46, 36, 36, 0.10);
}

/* নীল কালি */
html[data-light="khata"]:not([data-theme="dark"]) {
    --bg-page: #FBFAF6;
    --bg-card: #F1EFE8;
    --text-main: #1B2433;
    --text-muted: #55607A;
    --accent: #2450B8;
    --highlight: #B42318;
    --border: #DDD9CE;
    --shadow: rgba(27, 36, 51, 0.05);
    --shadow-strong: rgba(27, 36, 51, 0.10);
}

/* কচিপাতা */
html[data-light="shobuj"]:not([data-theme="dark"]) {
    --bg-page: #F6F8F4;
    --bg-card: #EAF0E8;
    --text-main: #16241D;
    --text-muted: #4D6357;
    --accent: #006A4E;
    --highlight: #B3541E;
    --border: #D3DDD0;
    --shadow: rgba(22, 36, 29, 0.05);
    --shadow-strong: rgba(22, 36, 29, 0.10);
}

/* জামদানি */
html[data-light="neel"]:not([data-theme="dark"]) {
    --bg-page: #F7F6F2;
    --bg-card: #ECEAF3;
    --text-main: #1D1B36;
    --text-muted: #565375;
    --accent: #3A3A9E;
    --highlight: #865C00;
    --border: #D9D6E4;
    --shadow: rgba(29, 27, 54, 0.05);
    --shadow-strong: rgba(29, 27, 54, 0.10);
}

/* সাদামাটা */
html[data-light="minimal"]:not([data-theme="dark"]) {
    --bg-page: #FFFFFF;
    --bg-card: #F4F5F4;
    --text-main: #18181B;
    --text-muted: #575B60;
    --accent: #0B7366;
    --highlight: #0B7366;
    --border: #E3E4E3;
    --shadow: rgba(24, 24, 27, 0.04);
    --shadow-strong: rgba(24, 24, 27, 0.08);
}

/* শাপলা */
html[data-light="shapla"]:not([data-theme="dark"]) {
    --bg-page: #FCF8F9;
    --bg-card: #F5EBEF;
    --text-main: #2A1A22;
    --text-muted: #6B5560;
    --accent: #A62B62;
    --highlight: #2F6B4F;
    --border: #E8D9E0;
    --shadow: rgba(42, 26, 34, 0.05);
    --shadow-strong: rgba(42, 26, 34, 0.10);
}

/* মেঘলা দিন */
html[data-light="borsha"]:not([data-theme="dark"]) {
    --bg-page: #F3F6F7;
    --bg-card: #E6ECEE;
    --text-main: #17262E;
    --text-muted: #4E616B;
    --accent: #1D6A86;
    --highlight: #5243B5;
    --border: #D3DDE1;
    --shadow: rgba(23, 38, 46, 0.05);
    --shadow-strong: rgba(23, 38, 46, 0.10);
}

/* রিকশা আর্ট */
html[data-light="rickshaw"]:not([data-theme="dark"]) {
    --bg-page: #FFFDF7;
    --bg-card: #FFF3D9;
    --text-main: #1F1A17;
    --text-muted: #5E534B;
    --accent: #B5174E;
    --highlight: #00796B;
    --border: #F0DDB5;
    --shadow: rgba(31, 26, 23, 0.05);
    --shadow-strong: rgba(31, 26, 23, 0.10);
}

/* হোয়াইটবোর্ড */
html[data-light="classroom"]:not([data-theme="dark"]) {
    --bg-page: #FCFCFD;
    --bg-card: #F0F2F5;
    --text-main: #1E2229;
    --text-muted: #545B66;
    --accent: #1F4FD1;
    --highlight: #C62828;
    --border: #DDE1E7;
    --shadow: rgba(30, 34, 41, 0.05);
    --shadow-strong: rgba(30, 34, 41, 0.10);
}

/* ---------- Dark themes ---------- */
/* চাঁদনি চর (dark pair of বালুচর) */
html[data-dark="khaki"][data-theme="dark"] {
    --bg-page: #1E1B14;
    --bg-card: #2A261C;
    --text-main: #F1E9D8;
    --text-muted: #BFB39A;
    --accent: #D9B36C;
    --highlight: #9CC788;
    --border: #3A3527;
    --shadow: rgba(0, 0, 0, 0.30);
    --shadow-strong: rgba(0, 0, 0, 0.45);
}

/* পৌষের রাত (dark pair of কুয়াশা) */
html[data-dark="mauve"][data-theme="dark"] {
    --bg-page: #1B1719;
    --bg-card: #262024;
    --text-main: #EFE7EA;
    --text-muted: #B5A6AC;
    --accent: #D4A3B1;
    --highlight: #E3B4C0;
    --border: #372D33;
    --shadow: rgba(0, 0, 0, 0.30);
    --shadow-strong: rgba(0, 0, 0, 0.45);
}

/* শরতের জোছনা (dark pair of কাশফুল) */
html[data-dark="white"][data-theme="dark"] {
    --bg-page: #161314;
    --bg-card: #211C1E;
    --text-main: #F2ECEE;
    --text-muted: #B3A6AA;
    --accent: #E48A9C;
    --highlight: #D9A6B0;
    --border: #322A2D;
    --shadow: rgba(0, 0, 0, 0.30);
    --shadow-strong: rgba(0, 0, 0, 0.45);
}

/* মাঝরাত */
html[data-dark="khata"][data-theme="dark"] {
    --bg-page: #11151C;
    --bg-card: #1A2029;
    --text-main: #E7EAF0;
    --text-muted: #9AA6BA;
    --accent: #8AB0FF;
    --highlight: #FF8A7A;
    --border: #2A3240;
    --shadow: rgba(0, 0, 0, 0.30);
    --shadow-strong: rgba(0, 0, 0, 0.45);
}

/* সুন্দরবন */
html[data-dark="shobuj"][data-theme="dark"] {
    --bg-page: #0E1813;
    --bg-card: #16241D;
    --text-main: #E2ECE6;
    --text-muted: #98B1A4;
    --accent: #4CC795;
    --highlight: #F0A35E;
    --border: #24372D;
    --shadow: rgba(0, 0, 0, 0.30);
    --shadow-strong: rgba(0, 0, 0, 0.45);
}

/* জোনাকি */
html[data-dark="neel"][data-theme="dark"] {
    --bg-page: #14132A;
    --bg-card: #1F1D3B;
    --text-main: #ECEAF7;
    --text-muted: #A7A4C8;
    --accent: #AEACFF;
    --highlight: #F2C14E;
    --border: #2E2B52;
    --shadow: rgba(0, 0, 0, 0.30);
    --shadow-strong: rgba(0, 0, 0, 0.45);
}

/* অমাবস্যা */
html[data-dark="minimal"][data-theme="dark"] {
    --bg-page: #141414;
    --bg-card: #1E1F1F;
    --text-main: #ECECEC;
    --text-muted: #A3A6A8;
    --accent: #4FD1BD;
    --highlight: #4FD1BD;
    --border: #2A2B2B;
    --shadow: rgba(0, 0, 0, 0.30);
    --shadow-strong: rgba(0, 0, 0, 0.45);
}

/* রাতের শাপলা */
html[data-dark="shapla"][data-theme="dark"] {
    --bg-page: #1A1217;
    --bg-card: #251A21;
    --text-main: #F3E8EE;
    --text-muted: #B9A3AF;
    --accent: #F08DB8;
    --highlight: #7FCFA6;
    --border: #3A2A33;
    --shadow: rgba(0, 0, 0, 0.30);
    --shadow-strong: rgba(0, 0, 0, 0.45);
}

/* বৃষ্টির রাত */
html[data-dark="borsha"][data-theme="dark"] {
    --bg-page: #0F181D;
    --bg-card: #17242B;
    --text-main: #E3ECEF;
    --text-muted: #97ABB4;
    --accent: #6CC3E0;
    --highlight: #B3A6FF;
    --border: #253842;
    --shadow: rgba(0, 0, 0, 0.30);
    --shadow-strong: rgba(0, 0, 0, 0.45);
}

/* মেলার রাত */
html[data-dark="rickshaw"][data-theme="dark"] {
    --bg-page: #17121A;
    --bg-card: #231A27;
    --text-main: #FBF3E4;
    --text-muted: #C7B8A6;
    --accent: #FF6FA0;
    --highlight: #4FD8C4;
    --border: #3A2C40;
    --shadow: rgba(0, 0, 0, 0.30);
    --shadow-strong: rgba(0, 0, 0, 0.45);
}

/* চকবোর্ড */
html[data-dark="classroom"][data-theme="dark"] {
    --bg-page: #1C2B25;
    --bg-card: #25372F;
    --text-main: #EEF2EC;
    --text-muted: #A9BBB1;
    --accent: #F4D35E;
    --highlight: #F7A8B8;
    --border: #36493F;
    --shadow: rgba(0, 0, 0, 0.25);
    --shadow-strong: rgba(0, 0, 0, 0.40);
}

/* ---------- Modern style: set by the picker when the visible theme is a new one ----------
   Turns off the paper grain and swaps the serif italic headings for Anek Bangla. */
html[data-style="modern"] {
    --grain-opacity: 0;
}

html[data-style="modern"] :is(
    h1, h2, h3, .hero h1, .logo, .callout-title, .goal-box strong, .flow-step-title,
    .growth-stage-title, .nav-card-title, .qa-question, .stage-intro .stage-tagline,
    .stage-sessions .session-title-link, .stage-sessions .session-title-text,
    .status-box-title, thead th, .arch-node-title
) {
    font-family: 'Anek Bangla', 'Hind Siliguri', sans-serif;
    font-style: normal;
}

html[data-style="modern"] :is(.quote-card, .story-box, footer .footer-quote, figcaption, .arch-caption, .callout) {
    font-style: normal;
}

html[data-style="modern"][data-theme="dark"] .growth-stage-num {
    color: var(--bg-page);
}

/* ---------- Header controls and the picker ---------- */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.theme-picker-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.theme-picker-btn:hover,
.theme-picker-btn[aria-expanded="true"] {
    border-color: var(--highlight);
    color: var(--highlight);
}

.theme-picker-btn svg {
    width: 16px;
    height: 16px;
}

.theme-picker-btn:focus-visible,
.theme-picker-option:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.theme-picker-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 200;
    width: max-content;
    max-width: calc(100vw - 32px);
    max-height: min(70vh, 560px);
    overflow-y: auto;
    background: var(--bg-page);
    color: var(--text-main);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 10px 30px var(--shadow-strong);
    font-family: 'Hind Siliguri', sans-serif;
}

.theme-picker-panel[hidden] {
    display: none;
}

.theme-picker-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 10px;
    font-weight: 600;
    font-size: 0.9rem;
}

.theme-picker-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.theme-picker-close:hover {
    color: var(--text-main);
    border-color: var(--text-muted);
}

.theme-picker-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.theme-picker-close svg {
    width: 14px;
    height: 14px;
}

.theme-picker-group + .theme-picker-group {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.theme-picker-heading {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    margin: 0 0 8px;
}

.theme-picker-list {
    display: grid;
    grid-template-columns: repeat(6, 36px);
    gap: 8px;
}

/* Each option is a color chip: theme background with an accent corner. */
.theme-picker-option {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(128, 128, 128, 0.35);
    padding: 0;
    cursor: pointer;
    overflow: hidden;
}

.theme-picker-option::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50%;
    height: 50%;
    border-top-left-radius: 8px;
    background: var(--swatch-accent);
}

.theme-picker-option:hover {
    transform: translateY(-1px);
}

.theme-picker-option[aria-checked="true"] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.theme-picker-heading strong {
    color: var(--text-main);
    font-weight: 600;
}

@media (max-width: 640px) {
    .theme-picker-panel {
        position: fixed;
        top: 64px;
        left: 16px;
        right: 16px;
        width: auto;
    }
}