/* ============================================================
   CITADEL THEMES
   ============================================================ */

/* --- DUSK (default dark) ---------------------------------- */
.theme-dusk {
  --bg:        #120e17;
  --bg2:       #1e1626;
  --bg3:       #16121e;
  --border:    #2e2238;
  --border2:   #3a2a4a;
  --accent:    #c9a87c;
  --accent2:   #9e8aac;
  --text:      #c8bdd6;
  --text2:     #9e8aac;
  --muted:     #6e5c80;
  --heading:   #e8ddf0;
  --input-bg:  #16121e;
  --header-bg: #1a1118;
  --ooc-border:#4a3560;
  --success:   #5cb88a;
  --danger:    #c97a7a;
  --info:      #7ab8e8;
  --online:    #5cb88a;
  --badge-bg:  #3c2a4a;
  background-color: var(--bg);
  color: var(--text);
}

/* --- STARGAZER (deep navy gold) --------------------------- */
.theme-stargazer {
  --bg:        #0d1b2e;
  --bg2:       #152338;
  --bg3:       #0a1624;
  --border:    #2a4a7a;
  --border2:   #3a5a8a;
  --accent:    #e8d5a0;
  --accent2:   #c8b078;
  --text:      #c5d8f0;
  --text2:     #7a9abf;
  --muted:     #4a7a9c;
  --heading:   #f0e8c8;
  --input-bg:  #0a1624;
  --header-bg: #080e1a;
  --ooc-border:#1e3a6a;
  --success:   #5cb88a;
  --danger:    #c97a7a;
  --info:      #7ab8e8;
  --online:    #5cb88a;
  --badge-bg:  #1a3260;
  background-color: var(--bg);
  color: var(--text);
}

/* --- FOREST (dark green) ---------------------------------- */
.theme-forest {
  --bg:        #0a1210;
  --bg2:       #121e16;
  --bg3:       #0e1612;
  --border:    #1e3022;
  --border2:   #2a4030;
  --accent:    #7ec99a;
  --accent2:   #5a8a6a;
  --text:      #a8c8b0;
  --text2:     #5a8a6a;
  --muted:     #3a6048;
  --heading:   #d0e8d8;
  --input-bg:  #0e1612;
  --header-bg: #080e0a;
  --ooc-border:#2a5030;
  --success:   #7ec99a;
  --danger:    #c97a7a;
  --info:      #7ab8e8;
  --online:    #7ec99a;
  --badge-bg:  #1a3020;
  background-color: var(--bg);
  color: var(--text);
}

/* --- ROSE (dark rose) ------------------------------------- */
.theme-rose {
  --bg:        #160a10;
  --bg2:       #221018;
  --bg3:       #1a0e14;
  --border:    #3a1a28;
  --border2:   #4a2a38;
  --accent:    #e89ab0;
  --accent2:   #a06a80;
  --text:      #d0a8b8;
  --text2:     #a06a80;
  --muted:     #6a3a50;
  --heading:   #f0d0e0;
  --input-bg:  #1a0e14;
  --header-bg: #120810;
  --ooc-border:#6a2a40;
  --success:   #5cb88a;
  --danger:    #e89ab0;
  --info:      #b0b0e8;
  --online:    #5cb88a;
  --badge-bg:  #3a1a28;
  background-color: var(--bg);
  color: var(--text);
}

/* --- LIGHT (clean light) ---------------------------------- */
.theme-light {
  --bg:        #faf8fc;
  --bg2:       #ffffff;
  --bg3:       #f0ebf7;
  --border:    #e0d8ea;
  --border2:   #c8bcd8;
  --accent:    #7a4fa0;
  --accent2:   #9e7abc;
  --text:      #3a2a4a;
  --text2:     #6a5a7a;
  --muted:     #9a8aaa;
  --heading:   #1e1028;
  --input-bg:  #f5f0fa;
  --header-bg: #f0ebf7;
  --ooc-border:#b09aca;
  --success:   #2a8a50;
  --danger:    #a03030;
  --info:      #2a50a0;
  --online:    #2a8a50;
  --badge-bg:  #e8ddf5;
  background-color: var(--bg);
  color: var(--text);
}

/* --- EMBER (premium) -------------------------------------- */
.theme-ember {
  --bg:        #100a08;
  --bg2:       #1e1210;
  --bg3:       #180e0c;
  --border:    #3a1a10;
  --border2:   #4a2a18;
  --accent:    #e8a87c;
  --accent2:   #a07050;
  --text:      #d0b0a0;
  --text2:     #a07050;
  --muted:     #703a20;
  --heading:   #f0d8c8;
  --input-bg:  #180e0a;
  --header-bg: #0e0806;
  --ooc-border:#5a2a10;
  --success:   #5cb88a;
  --danger:    #e87a5a;
  --info:      #a0b0e8;
  --online:    #5cb88a;
  --badge-bg:  #3a1a10;
  background-color: var(--bg);
  color: var(--text);
}

/* --- TWILIGHT (premium) ----------------------------------- */
.theme-synthwave {
  --bg:        #080810;
  --bg2:       #100818;
  --bg3:       #0e0616;
  --border:    #280840;
  --border2:   #401060;
  --accent:    #e040a0;
  --accent2:   #6020d0;
  --text:      #e8c0e0;
  --text2:     #c080c0;
  --muted:     #805090;
  --heading:   #ffd0f8;
  --input-bg:  #0e0616;
  --header-bg: #060410;
  --ooc-border:#601880;
  --success:   #40d080;
  --danger:    #e84060;
  --info:      #60a0e8;
  --online:    #40d080;
  --badge-bg:  #200838;
  background-color: var(--bg);
  color: var(--text);
}

/* --- Apply CSS variables to elements ---------------------- */
.site-header { background: var(--header-bg); border-bottom: 0.5px solid var(--border); }
.site-logo { color: var(--accent); }
.site-nav a { color: var(--accent2); }
.site-nav a:hover { color: var(--accent); }
.header-avatar-placeholder { background: var(--bg2); color: var(--accent); }
.header-username { color: var(--accent2); }
.header-logout { color: var(--muted); }
.header-icon { color: var(--accent2); }
.icon-badge { background: var(--accent); color: var(--bg); }
.header-badge { background: var(--badge-bg); color: var(--accent); border: 0.5px solid var(--border2); }

.card { background: var(--bg2); border-color: var(--border); }
.card-flat { background: var(--bg2); }
.section-title { color: var(--accent2); }
.page-title { color: var(--heading); }
.page-sub { color: var(--muted); }

.btn { background: var(--bg2); border-color: var(--border2); color: var(--accent); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }
.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-ghost { border-color: var(--border); color: var(--muted); }

.form-input, .form-textarea, .form-select { background: var(--input-bg); border-color: var(--border2); color: var(--text); }
.form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--accent2); }
.form-label { color: var(--text2); }
.form-hint { color: var(--muted); }
.form-error { background: color-mix(in srgb, var(--danger) 10%, var(--bg2)); border-color: var(--danger); color: var(--danger); }
.form-check { color: var(--text2); }

.flash { }
.flash-error { background: color-mix(in srgb, var(--danger) 12%, var(--bg2)); border-color: var(--danger); color: var(--danger); }
.flash-success { background: color-mix(in srgb, var(--success) 12%, var(--bg2)); border-color: var(--success); color: var(--success); }

.post-block { background: var(--bg2); border-color: var(--border); }
.post-header { border-color: var(--border); }
.post-char-name { color: var(--accent); }
.post-player { color: var(--muted); }
.post-body { color: var(--text); }
.post-ooc { border-color: var(--ooc-border); background: var(--bg3); }
.post-ooc-label { color: var(--muted); }
.post-ooc-text { color: var(--text2); }
.post-attachment { background: var(--bg3); border-color: var(--border); color: var(--text2); }
.post-doc-link { background: var(--bg3); border-color: var(--border2); color: var(--accent2); }

.reply-bar { background: var(--bg3); border-color: var(--border); }
.posting-as { background: var(--bg3); border-color: var(--border2); }
.posting-as-label { color: var(--muted); }
.posting-as-name { color: var(--accent); }
.html-mode-indicator { border-color: var(--border); color: var(--muted); }

.thread-card { background: var(--bg2); border-color: var(--border); }
.thread-card:hover { border-color: var(--border2); }
.thread-card-title { color: var(--heading); }
.thread-card-meta, .thread-card-count { color: var(--muted); }

.char-item:hover { background: var(--bg3); border-color: var(--border); }
.char-item.active { background: color-mix(in srgb, var(--accent) 10%, var(--bg3)); border-color: var(--accent2); }
.char-item-name { color: var(--accent); }
.char-check { border-color: var(--border2); }
.char-item.active .char-check { background: var(--accent2); border-color: var(--accent2); }

.tracked-item { border-color: var(--border); }
.tracked-title { color: var(--text2); }
.tracked-new-badge { background: var(--badge-bg); color: var(--accent); }

.thread-chat { background: var(--bg3); border-color: var(--border2); }
.tc-header { border-color: var(--border); }
.tc-label { color: var(--accent2); }
.tc-author { color: var(--accent); }
.tc-input { background: var(--bg3); border-color: var(--border2); color: var(--text); }

.profile-body { background: var(--bg2); border-color: var(--border); }
.profile-avatar { border-color: var(--bg); }
.profile-avatar-placeholder { background: var(--bg3); color: var(--accent); border-color: var(--bg); }
.profile-custom-html { background: var(--bg3); border-color: var(--border); color: var(--text); }
.profile-bio { color: var(--text2); }

.char-card { background: var(--bg2); border-color: var(--border); }
.char-card-avatar-placeholder { background: var(--bg3); color: var(--accent); }
.char-card-name { color: var(--accent); }
.char-card-desc { color: var(--text2); }

.realm-card { background: var(--bg2); border-color: var(--border); }
.realm-card:hover { border-color: var(--border2); }
.realm-card-title { color: var(--heading); }

.thread-ad-card { background: var(--bg2); border-color: var(--border); }
.tac-title { color: var(--heading); }
.wanted-ad { border-color: var(--border); }
.wanted-ad-author { color: var(--accent); }
.wanted-ad-body { color: var(--text2); }

.dm-list { background: var(--bg2); border-color: var(--border); }
.dm-list-header { border-color: var(--border); color: var(--text2); }
.dm-convo-item { border-color: var(--border); }
.dm-convo-item:hover { background: var(--bg3); }
.dm-convo-item.active { background: color-mix(in srgb, var(--accent) 8%, var(--bg3)); }
.dm-convo-av { background: var(--bg3); color: var(--accent); }
.dm-panel { background: var(--bg2); border-color: var(--border); }
.dm-panel-header { border-color: var(--border); }
.dm-bubble { }
.dm-msg.mine .dm-bubble { background: var(--badge-bg); color: var(--heading); }
.dm-msg.theirs .dm-bubble { background: var(--bg3); color: var(--text); border-color: var(--border); }
.dm-input { background: var(--input-bg); border-color: var(--border2); color: var(--text); }
.dm-attach-btn { background: var(--bg3); border-color: var(--border); color: var(--muted); }
.dm-input-row { border-color: var(--border); }

.sitewide-chat { background: var(--header-bg); border-top: 0.5px solid var(--border); }
.sc-toggle { border-bottom: 0.5px solid transparent; }
.sc-label { color: var(--text2); }
.sc-body { border-color: var(--border); }
.sc-messages { }
.sc-author { color: var(--accent); }
.sc-text { color: var(--text2); }
.sc-sidebar { border-color: var(--border); }
.sc-online-user { color: var(--text2); }
.sc-input { background: var(--input-bg); border-color: var(--border2); color: var(--text); }
.sc-send { background: var(--badge-bg); border-color: var(--border2); color: var(--accent); }
.sc-send:hover { opacity: .8; }
.sc-login-prompt { color: var(--muted); }
.sc-login-prompt a { color: var(--accent2); }

.achieve-card { background: var(--bg2); border-color: var(--border); }
.achieve-card.achieve-unlocked { border-color: var(--info); background: color-mix(in srgb, var(--info) 5%, var(--bg2)); }
.achieve-name { color: var(--heading); }
.achieve-how { color: var(--muted); }

.theme-swatch-grid .theme-swatch:hover { border-color: var(--accent2); }
.name-style-opt { border-color: var(--border); background: var(--bg3); }
.name-style-opt.selected { border-color: var(--accent); }

.divider { border-color: var(--border); }

/* --- SAKURA (soft pink light) ----------------------------- */
.theme-sakura {
  --bg:        #fff5f7;
  --bg2:       #ffffff;
  --bg3:       #ffe8ed;
  --border:    #f5c6d0;
  --border2:   #e8a0b0;
  --accent:    #c45c7a;
  --accent2:   #e07a90;
  --text:      #4a2030;
  --text2:     #7a4050;
  --muted:     #b07080;
  --heading:   #2e1020;
  --input-bg:  #fff0f3;
  --header-bg: #ffe0e8;
  --ooc-border:#e8a0b0;
  --success:   #2a8a50;
  --danger:    #c02040;
  --info:      #4060c0;
  --online:    #2a8a50;
  --badge-bg:  #ffd0da;
  background-color: var(--bg);
  color: var(--text);
}

/* --- CREAM (warm parchment light) ------------------------- */
.theme-grimoire {
  --bg:        #f5efe0;
  --bg2:       #ede3ce;
  --bg3:       #ede3ce;
  --border:    #c9a87c;
  --border2:   #b09060;
  --accent:    #8b4a1a;
  --accent2:   #b06030;
  --text:      #3d2408;
  --text2:     #6a4828;
  --muted:     #8b6240;
  --heading:   #1e0e04;
  --input-bg:  #f5efe0;
  --header-bg: #e5d8c0;
  --ooc-border:#c09860;
  --success:   #2a7a30;
  --danger:    #a03020;
  --info:      #304080;
  --online:    #2a7a30;
  --badge-bg:  #ddd0b0;
  background-color: var(--bg);
  color: var(--text);
}

/* --- LAVENDER (soft purple light) ------------------------- */
.theme-steel {
  --bg:        #f0f4f8;
  --bg2:       #ffffff;
  --bg3:       #e4edf5;
  --border:    #c8d8e8;
  --border2:   #a0b8d0;
  --accent:    #2a6090;
  --accent2:   #4a80b0;
  --text:      #0e2030;
  --text2:     #2a4860;
  --muted:     #6888a8;
  --heading:   #060e18;
  --input-bg:  #eaf2f8;
  --header-bg: #d8e8f4;
  --ooc-border:#90b8d8;
  --success:   #2a7a50;
  --danger:    #c02040;
  --info:      #2a6090;
  --online:    #2a7a50;
  --badge-bg:  #d0e0ee;
  background-color: var(--bg);
  color: var(--text);
}

/* Footer & new element theming */
.site-footer { background: var(--header-bg); border-color: var(--border); }
.footer-links a { color: var(--text2); }
.footer-links a:hover { color: var(--accent); }
.footer-copy { color: var(--muted); }
.nav-premium { color: var(--accent) !important; }

/* Tag category colors adapt to theme */
.theme-light .tag-genre        { background: #f5e8d0; color: #8a5c2a; border-color: #d4bc98; }
.theme-light .tag-fandom       { background: #d0f0ee; color: #1e6860; border-color: #70c0b8; }
.theme-light .tag-warning      { background: #fde8e8; color: #c02040; border-color: #e09090; }
.theme-light .tag-relationship { background: #f0e0ff; color: #6a3ab0; border-color: #c0a0e8; }
.theme-sakura .tag-genre        { background: #ffe8d8; color: #8a3a18; border-color: #d4a898; }
.theme-sakura .tag-fandom       { background: #d8f0ee; color: #1e5858; border-color: #70c0b8; }
.theme-sakura .tag-warning      { background: #fde0e0; color: #c01030; border-color: #e08888; }
.theme-sakura .tag-relationship { background: #f8e0ff; color: #8a3ab0; border-color: #d0a0e8; }
.theme-steel .tag-genre      { background: #f0e0c8; color: #7a4a18; border-color: #c4a888; }
.theme-grimoire .tag-genre       { background: #e8d8b0; color: #6a3a10; border-color: #b09060; }
.theme-solarpunk .tag-genre     { background: #d8f0c8; color: #2a5a10; border-color: #90c070; }
.theme-crimson .tag-genre       { background: #280808; color: #e08080; border-color: #580808; }

/* --- VOID (premium dark) ---------------------------------- */
.theme-void {
  --bg:        #06060e;
  --bg2:       #100e1a;
  --bg3:       #0c0a16;
  --border:    #201840;
  --border2:   #302858;
  --accent:    #8060d8;
  --accent2:   #a080f0;
  --text:      #b0a8d8;
  --text2:     #8070b0;
  --muted:     #504880;
  --heading:   #e0d8f8;
  --input-bg:  #0c0a16;
  --header-bg: #04040c;
  --ooc-border:#402868;
  --success:   #5cb88a;
  --danger:    #e87a9a;
  --info:      #7ab8e8;
  --online:    #5cb88a;
  --badge-bg:  #201840;
  background-color: var(--bg);
  color: var(--text);
}

/* --- BLUSH (premium light) -------------------------------- */
.theme-blush {
  --bg:        #fdf6f0;
  --bg2:       #ffffff;
  --bg3:       #faeee4;
  --border:    #e8cdb8;
  --border2:   #d4a888;
  --accent:    #b05020;
  --accent2:   #c87840;
  --text:      #2e1408;
  --text2:     #5a3020;
  --muted:     #9a6848;
  --heading:   #180a02;
  --input-bg:  #faf2ec;
  --header-bg: #f5e4d4;
  --ooc-border:#d4a878;
  --success:   #2a8a50;
  --danger:    #c02040;
  --info:      #4060c0;
  --online:    #2a8a50;
  --badge-bg:  #f8ddc8;
  background-color: var(--bg);
  color: var(--text);
}

/* --- MINT (premium light) --------------------------------- */
.theme-solarpunk {
  --bg:        #f2f7ee;
  --bg2:       #e8f2e0;
  --bg3:       #e0ecd8;
  --border:    #a8c890;
  --border2:   #80a868;
  --accent:    #3d7a18;
  --accent2:   #5a9a28;
  --text:      #1e4010;
  --text2:     #3a6028;
  --muted:     #5a8040;
  --heading:   #0c1e08;
  --input-bg:  #eaf4e2;
  --header-bg: #daecd0;
  --ooc-border:#80b860;
  --success:   #3d7a18;
  --danger:    #a03020;
  --info:      #2050a0;
  --online:    #3d7a18;
  --badge-bg:  #c8e8b0;
  background-color: var(--bg);
  color: var(--text);
}

/* --- DAWNMIST (premium dark) ------------------------------ */
.theme-witching {
  --bg:        #10080e;
  --bg2:       #180c1a;
  --bg3:       #140a16;
  --border:    #2a1030;
  --border2:   #401848;
  --accent:    #d0a0e8;
  --accent2:   #608030;
  --text:      #d8c0e0;
  --text2:     #a888c0;
  --muted:     #705880;
  --heading:   #f0d8ff;
  --input-bg:  #140a16;
  --header-bg: #0a0610;
  --ooc-border:#502860;
  --success:   #70a840;
  --danger:    #e06080;
  --info:      #80a8d0;
  --online:    #70a840;
  --badge-bg:  #201028;
  background-color: var(--bg);
  color: var(--text);
}

/* --- CRIMSON (premium horror red/black) ------------------- */
.theme-crimson {
  --bg:        #0a0000;
  --bg2:       #140808;
  --bg3:       #0e0404;
  --border:    #3a0808;
  --border2:   #580c0c;
  --accent:    #cc2020;
  --accent2:   #a81818;
  --text:      #e8c0c0;
  --text2:     #a07070;
  --muted:     #803030;
  --heading:   #ffdddd;
  --input-bg:  #0e0404;
  --header-bg: #060000;
  --ooc-border:#500808;
  --success:   #508040;
  --danger:    #cc2020;
  --info:      #7090c0;
  --online:    #508040;
  --badge-bg:  #280808;
  background-color: var(--bg);
  color: var(--text);
}