/*
 * Fasil dark-theme unification — design reminder:
 * Neutral editorial charcoal replaces legacy cool navy; antique gold and lavender
 * remain sparse semantic accents. This stylesheet is dark-only by design.
 */

html[data-theme="dark"] {
  color-scheme: dark;
  --fasil-dark-canvas: #181918;
  --fasil-dark-depth: #111211;
  --fasil-dark-surface: #222321;
  --fasil-dark-surface-raised: #2a2b29;
  --fasil-dark-ink: #f5f2eb;
  --fasil-dark-muted: rgba(245, 242, 235, 0.67);
  --fasil-dark-muted-soft: rgba(245, 242, 235, 0.45);
  --fasil-dark-gold: #d5ae61;
  --fasil-dark-gold-soft: #e6c581;
  --fasil-dark-lavender: #b3a2cf;
  --fasil-dark-border: rgba(229, 220, 201, 0.16);

  /* Compatibility aliases for the pre-existing page-specific systems. */
  --navy: var(--fasil-dark-canvas);
  --navy-deep: var(--fasil-dark-depth);
  --navy-mid: var(--fasil-dark-surface);
  --navy-2: var(--fasil-dark-surface);
  --navy-3: var(--fasil-dark-surface-raised);
  --night: var(--fasil-dark-canvas);
  --bg: var(--fasil-dark-canvas);
  --surface: rgba(248, 244, 236, 0.06);
  --text: var(--fasil-dark-ink);
  --white: var(--fasil-dark-ink);
  --parch: var(--fasil-dark-ink);
  --sand: rgba(248, 244, 236, 0.69);
  --sand-lt: rgba(248, 244, 236, 0.83);
  --muted: var(--fasil-dark-muted);
  --border: var(--fasil-dark-border);
  --gold: var(--fasil-dark-gold);
  --gold2: #bc8d37;
  --gold-lt: var(--fasil-dark-gold-soft);
}

html[data-theme="dark"] body {
  background: var(--fasil-dark-canvas);
  color: var(--fasil-dark-ink);
}

/* Fasil symbol system: a single decision-cut mark, with a deliberate companion for each theme. */
.fasil-brand-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  vertical-align: middle;
  overflow: hidden;
  border-radius: 28%;
}

.fasil-brand-symbol img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}

.fasil-brand-symbol .fasil-symbol-light {
  display: none;
}

html[data-theme="light"] .fasil-brand-symbol .fasil-symbol-dark {
  display: none;
}

html[data-theme="light"] .fasil-brand-symbol .fasil-symbol-light {
  display: block;
}

.fasil-brand-symbol--small { width: 30px; height: 30px; }
.fasil-brand-symbol--medium { width: 38px; height: 38px; }
.fasil-brand-symbol--large { width: 54px; height: 54px; }

/* Do not let legacy wordmarks compete with the decision-cut symbol. */
.fasil-brand-symbol + .fasil-brand-wordmark {
  display: none;
}

/* Quiet material depth shared by recurring overlays and native controls. */
html[data-theme="dark"] :is(input, select, textarea) {
  background-color: var(--fasil-dark-surface);
  border-color: var(--fasil-dark-border);
  color: var(--fasil-dark-ink);
}

html[data-theme="dark"] :is(input, select, textarea)::placeholder {
  color: var(--fasil-dark-muted-soft);
}

html[data-theme="dark"] :is(.sp-seat.reserved, .sp-inv-box img) {
  background-color: var(--fasil-dark-surface);
}

html[data-theme="dark"] :is(.sp-inv-close, .fo-btn, .pkg-cta, .mc-pay-btn) {
  color: var(--fasil-dark-depth);
}

/* Material hierarchy: content sits on quiet warm surfaces, not cool navy slabs. */
html[data-theme="dark"] {
  --card: var(--fasil-dark-surface);
  --card-bg: var(--fasil-dark-surface);
  --panel: var(--fasil-dark-surface);
  --table-head: rgba(213, 174, 97, 0.10);
  --table-row: rgba(248, 244, 236, 0.035);
  --control: var(--fasil-dark-surface-raised);
  --shadow: rgba(0, 0, 0, 0.28);
}

/* Repeated structural cards: neutral, warm, and slightly lifted from the canvas. */
html[data-theme="dark"] :is(
  .card, .profile-card, .suggestion-card, .form-card, .pkg-card, .pg-card,
  .mc-debate-card, .goal-card, .goal-item, .debate-card, .ms-card, .r-card,
  .sj-card, .side-card, .cbar-panel, .cp-card, .cp-action-card, .cp-empty,
  .fo-seat-card, .sp-c3-card, .sp-co-stat, .ext-item, .rp-item, .rq-item,
  .sitem, .fp-thread-card, .fp-thread-empty, .fp-ex-empty, .lb-empty,
  .cd-card, .cd-mode-card, .cd-pkg-card, .cd-type-card, .cd-usdt-modal
) {
  background: linear-gradient(145deg, rgba(43, 41, 37, 0.96), rgba(31, 30, 27, 0.96)) !important;
  border-color: var(--fasil-dark-border) !important;
  box-shadow: 0 14px 34px var(--shadow);
}

/* Interactive selections receive depth without turning into a bright blue state. */
html[data-theme="dark"] :is(
  .cd-mode-card.selected, .cd-pkg-card.selected, .cd-type-card.selected,
  .goal-card.active-glow, .cp-nav-item.active, .cp-drawer-item:hover,
  .sp-seat.selected, .fo-seat.selected
) {
  background: linear-gradient(145deg, rgba(213, 174, 97, 0.13), rgba(43, 41, 37, 0.96)) !important;
  border-color: rgba(213, 174, 97, 0.44) !important;
  color: var(--fasil-dark-ink);
  box-shadow: inset 0 1px 0 rgba(248, 244, 236, 0.08), 0 12px 30px rgba(0, 0, 0, 0.24);
}

/* Navigation drawers and modal layers are a deeper material stratum. */
html[data-theme="dark"] :is(
  .cp-sidebar, .cp-drawer, .cp-drawer-head, .cd-usdt-modal,
  .modal-content, .modal-dialog, .offcanvas, .popup, .dialog
) {
  background: var(--fasil-dark-surface-raised) !important;
  border-color: var(--fasil-dark-border) !important;
  color: var(--fasil-dark-ink);
}

html[data-theme="dark"] :is(.cp-drawer-overlay, .modal-backdrop, .overlay) {
  background: rgba(12, 9, 7, 0.72) !important;
}

/* Dense information stays legible through a warm header wash and fine borders. */
html[data-theme="dark"] :is(.data-table, .req-table, .lb-table, .table-wrap, .req-table-wrap) {
  background: rgba(248, 244, 236, 0.025) !important;
  border-color: var(--fasil-dark-border) !important;
}

html[data-theme="dark"] :is(.data-table, .req-table, .lb-table) :is(th, thead td) {
  background: var(--table-head) !important;
  color: var(--fasil-dark-gold-soft);
  border-color: var(--fasil-dark-border);
}

html[data-theme="dark"] :is(.data-table, .req-table, .lb-table) :is(td, tr) {
  border-color: rgba(222, 197, 152, 0.12);
}

html[data-theme="dark"] :is(.data-table, .req-table, .lb-table) tbody tr:hover {
  background: var(--table-row) !important;
}

/* Secondary utility areas must not reintroduce a cold dark fill. */
html[data-theme="dark"] :is(
  .notice, .empty, .empty-hint, .info-box, .status-box, .form-glyph,
  .cp-drawer-close, .badge, .chip
) {
  border-color: var(--fasil-dark-border);
}

html[data-theme="dark"] :is(.notice, .empty, .info-box, .status-box) {
  background: rgba(248, 244, 236, 0.045) !important;
  color: var(--fasil-dark-ink);
}

/* Small floating controls are tactile warm glass rather than translucent navy. */
html[data-theme="dark"] :is(.fp-back, .st-back, .ms-back, .fs-lang-sw) {
  background: rgba(34, 32, 29, 0.86) !important;
  border-color: rgba(222, 197, 152, 0.24) !important;
  color: var(--fasil-dark-ink);
}

html[data-theme="dark"] :is(.fp-back:hover, .st-back:hover, .ms-back:hover) {
  background: rgba(213, 174, 97, 0.14) !important;
  border-color: rgba(213, 174, 97, 0.52) !important;
  color: var(--fasil-dark-gold-soft);
}

/* Support's guided panels remain visually distinct without their prior blue-black blocks. */
html[data-theme="dark"] :is(.sp-hero-bg, .sp-sc1, .sp-sc4) {
  background: var(--fasil-dark-depth) !important;
}

html[data-theme="dark"] :is(.sp-contact-box, .sp-seat.reserved, .sp-inv-box img) {
  background: var(--fasil-dark-surface) !important;
  border-color: rgba(213, 174, 97, 0.30) !important;
}

html[data-theme="dark"] :is(.sp-sc1-act-icon.send, .sp-sc1-res-send) {
  background: var(--fasil-dark-gold) !important;
  color: var(--fasil-dark-depth);
}

html[data-theme="dark"] :is(.spt-bar-track, .fp-saql-btn-tip) {
  background: rgba(248, 244, 236, 0.08) !important;
  border-color: var(--fasil-dark-border);
  color: var(--fasil-dark-muted);
}

/* Operations and administration: retain density, lose the legacy blue-black surfaces. */
html[data-theme="dark"] :is(.hd, .fn-float-theme) {
  background: rgba(18, 17, 15, 0.94) !important;
  border-color: rgba(222, 197, 152, 0.20) !important;
  color: var(--fasil-dark-gold-soft);
}

html[data-theme="dark"] :is(
  .file-drop, .submit-section, .benefit-chip, .member-chip,
  .profile-summary, .members-section
) {
  background: rgba(248, 244, 236, 0.045) !important;
  border-color: var(--fasil-dark-border) !important;
  color: var(--fasil-dark-muted);
}

html[data-theme="dark"] :is(select option, .sug-input option) {
  background: var(--fasil-dark-surface-raised) !important;
  color: var(--fasil-dark-ink);
}

html[data-theme="dark"] :is(.srs-card, .wc-card, .sponsee-card) {
  background: rgba(34, 32, 29, 0.88) !important;
  border-color: var(--fasil-dark-border) !important;
  box-shadow: 0 18px 44px var(--shadow);
}

/*
 * Some standalone pages declare :root tokens after this external stylesheet.
 * Keep the dark-only aliases authoritative so legacy inline navy values cannot
 * win by source order. The light mode has no matching rule here.
 */
html[data-theme="dark"] {
  --navy: var(--fasil-dark-canvas) !important;
  --navy-deep: var(--fasil-dark-depth) !important;
  --navy-mid: var(--fasil-dark-surface) !important;
  --navy-2: var(--fasil-dark-surface) !important;
  --navy-3: var(--fasil-dark-surface-raised) !important;
  --night: var(--fasil-dark-canvas) !important;
  --bg: var(--fasil-dark-canvas) !important;
  --card: var(--fasil-dark-surface) !important;
  --card-bg: rgba(34, 32, 29, 0.92) !important;
  --panel: var(--fasil-dark-surface) !important;
  --surface: rgba(248, 244, 236, 0.06) !important;
  --fg: rgba(248, 244, 236, 0.76) !important;
  --fw: var(--fasil-dark-ink) !important;
  --fs: var(--fasil-dark-muted) !important;
  --text: var(--fasil-dark-ink) !important;
  --white: var(--fasil-dark-ink) !important;
  --parch: var(--fasil-dark-ink) !important;
  --sand: rgba(248, 244, 236, 0.69) !important;
  --sand-lt: rgba(248, 244, 236, 0.83) !important;
  --muted: var(--fasil-dark-muted) !important;
  --border: var(--fasil-dark-border) !important;
  --gold: var(--fasil-dark-gold) !important;
  --gold2: #bc8d37 !important;
  --gold-lt: var(--fasil-dark-gold-soft) !important;
}

/* Create-debate uses its own inline variables and background shorthands. */
html[data-theme="dark"] .cd-topbar {
  background: rgba(18, 17, 15, 0.94) !important;
  border-color: rgba(222, 197, 152, 0.20) !important;
}

html[data-theme="dark"] .cd-card {
  background: linear-gradient(145deg, rgba(43, 41, 37, 0.96), rgba(31, 30, 27, 0.96)) !important;
  border-color: rgba(222, 197, 152, 0.20) !important;
}

html[data-theme="dark"] :is(.cd-input, .cd-textarea, .cd-select) {
  background: rgba(34, 32, 29, 0.94) !important;
  border-color: rgba(213, 174, 97, 0.24) !important;
  color: var(--fasil-dark-ink) !important;
}

html[data-theme="dark"] :is(.cd-type-card, .cd-mode-card, .cd-pkg-card, .cd-usdt-modal) {
  background: linear-gradient(145deg, rgba(43, 41, 37, 0.94), rgba(31, 30, 27, 0.94)) !important;
  border-color: var(--fasil-dark-border) !important;
}

/* Create-debate: keep the gold variant semantic, never a brown structural surface. */
html[data-theme="dark"] :is(.cd-type-card.gold, .cd-type-top-gold) {
  background: linear-gradient(145deg, rgba(43, 41, 37, 0.94), rgba(31, 30, 27, 0.94)) !important;
}

/* Discussion thread: its local inline tokens otherwise reinstate cool navy. */
html[data-theme="dark"] {
  --th-card: rgba(43, 41, 37, 0.82) !important;
  --th-card-2: rgba(31, 30, 27, 0.72) !important;
  --th-blur-bg: rgba(24, 23, 21, 0.94) !important;
  --th-line: rgba(222, 197, 152, 0.18) !important;
  --th-line-soft: rgba(222, 197, 152, 0.10) !important;
  --th-hover: rgba(248, 244, 236, 0.06) !important;
}

html[data-theme="dark"] .th-ss-ph {
  background: linear-gradient(135deg, rgba(179, 162, 207, 0.38), rgba(43, 41, 37, 0.92)) !important;
}

html[data-theme="dark"] .th-hero {
  background: linear-gradient(135deg, rgba(44, 42, 39, 0.98), rgba(45, 42, 52, 0.98)) !important;
}

html[data-theme="dark"] .th-hero-overlay {
  background: linear-gradient(200deg, rgba(24, 23, 21, 0.32) 0%, rgba(18, 17, 15, 0.93) 78%) !important;
}

html[data-theme="dark"] .th-media-remove {
  background: rgba(24, 23, 21, 0.94) !important;
}

/* Story and debate lists share the former navy image overlays. */
html[data-theme="dark"] :is(.st-hero-shade, .fp-hero-shade) {
  background: linear-gradient(to top, var(--fasil-dark-depth) 5%, rgba(24, 23, 21, 0.64) 50%, rgba(24, 23, 21, 0.28) 100%) !important;
}

html[data-theme="dark"] .fp-ex-placeholder {
  background: linear-gradient(135deg, rgba(179, 162, 207, 0.10), rgba(34, 32, 29, 0.74)) !important;
}

/* Support: retain gold and lavender signals while changing only structural bases. */
html[data-theme="dark"] .sp-hero-bg::before {
  background:
    radial-gradient(ellipse at 50% 100%, transparent 30%, rgba(14, 13, 12, 0.78) 100%),
    radial-gradient(ellipse 55% 70% at 70% 35%, rgba(213, 174, 97, 0.12) 0%, transparent 65%),
    radial-gradient(ellipse 30% 50% at 85% 25%, rgba(179, 162, 207, 0.10) 0%, transparent 55%),
    linear-gradient(to left, rgba(24, 23, 21, 0.06) 0%, rgba(24, 23, 21, 0.68) 50%, rgba(18, 17, 15, 0.92) 100%),
    linear-gradient(to top, var(--fasil-dark-depth) 0%, rgba(24, 23, 21, 0.16) 45%, transparent 100%) !important;
}

html[data-theme="dark"] .sp-type-card {
  background: linear-gradient(155deg, rgba(43, 41, 37, 0.90), rgba(31, 30, 27, 0.94)) !important;
}

html[data-theme="dark"] :is(.sp-type-card.active, .sp-amt-btn:hover, .sp-amt-btn.sel) {
  background: linear-gradient(155deg, rgba(213, 174, 97, 0.12), rgba(43, 41, 37, 0.94)) !important;
}

html[data-theme="dark"] :is(.sp-info-box, .sp-co-summary) {
  background: rgba(43, 41, 37, 0.82) !important;
  border-color: var(--fasil-dark-border) !important;
}

html[data-theme="dark"] .sp-ms-ep-card {
  background: linear-gradient(155deg, rgba(43, 41, 37, 0.98), rgba(18, 17, 15, 0.99)) !important;
}

html[data-theme="dark"] .sp-ms-ep-card::after {
  border-bottom-color: rgba(43, 41, 37, 0.98) !important;
}

html[data-theme="dark"] .sp-pay-card {
  background: linear-gradient(155deg, rgba(43, 41, 37, 0.92), rgba(31, 30, 27, 0.96)) !important;
  border-color: var(--fasil-dark-border) !important;
}

/* Gratitude page: donor names, the empty state, and its closing call to action. */
html[data-theme="dark"] .th-name {
  background: linear-gradient(155deg, rgba(43, 41, 37, 0.90), rgba(31, 30, 27, 0.94)) !important;
}

html[data-theme="dark"] .th-empty {
  background: rgba(43, 41, 37, 0.62) !important;
}

html[data-theme="dark"] .th-cta {
  background: linear-gradient(155deg, rgba(43, 41, 37, 0.80), rgba(31, 30, 27, 0.92)) !important;
}

/* The sponsorship confirmation has intentionally generic class names. */
html[data-theme="dark"] body > .card {
  background: linear-gradient(155deg, rgba(43, 41, 37, 0.94), rgba(31, 30, 27, 0.96)) !important;
  border-color: rgba(213, 174, 97, 0.25) !important;
}

/* Account and debate templates previously sat outside this stylesheet entirely. */
html[data-theme="dark"] [style*="background:#111e3a"] {
  background: linear-gradient(145deg, rgba(43, 41, 37, 0.97), rgba(31, 30, 27, 0.98)) !important;
  border-color: var(--fasil-dark-border) !important;
}

/* Debate directory: search and restricted-debate surfaces keep a quiet warm material. */
html[data-theme="dark"] :is(
  .fd-hero-search-big input, .fd-hero-search, .fd-search:focus,
  .fd-overlay-input, .fd-overlay-thumb, .fd-private-card, .fd-private-card:hover
) {
  background: rgba(43, 41, 37, 0.92) !important;
  border-color: var(--fasil-dark-border) !important;
  color: var(--fasil-dark-ink) !important;
}

/* Discussion-board directory: retain lavender as a meaning cue, never as a navy base. */
html[data-theme="dark"] .fa-page-hero-overlay {
  background: linear-gradient(150deg, rgba(18, 17, 15, 0.98) 0%, rgba(43, 41, 37, 0.92) 44%, rgba(18, 17, 15, 0.96) 100%) !important;
}

html[data-theme="dark"] :is(.fa-ticker, .fa-board-card, .fa-featured-card, .fa-debate-card) {
  background: linear-gradient(155deg, rgba(43, 41, 37, 0.96), rgba(31, 30, 27, 0.97)) !important;
  border-color: var(--fasil-dark-border) !important;
}

html[data-theme="dark"] :is(.fa-board-img-placeholder, .fa-debate-img-placeholder) {
  background: linear-gradient(135deg, rgba(43, 41, 37, 0.96), rgba(31, 30, 27, 0.86)) !important;
}

html[data-theme="dark"] .fa-featured-img-placeholder {
  background: linear-gradient(135deg, rgba(43, 41, 37, 0.96), rgba(179, 162, 207, 0.18)) !important;
}

/* Debate result: the outcome remains celebratory while its cards stop reading as blue panels. */
html[data-theme="dark"] .rs-winner {
  background: linear-gradient(135deg, rgba(213, 174, 97, 0.13), rgba(43, 41, 37, 0.93)) !important;
  border-color: rgba(213, 174, 97, 0.34) !important;
}

html[data-theme="dark"] :is(.rs-score-bar, .rs-goal-row, .rs-quote-card, .rs-team-card, .rs-chain) {
  background: rgba(43, 41, 37, 0.88) !important;
  border-color: var(--fasil-dark-border) !important;
}

/* Directory preloader: the first visual frame must belong to the warm dark system. */
html[data-theme="dark"] #fd-preloader {
  background: var(--fasil-dark-depth) !important;
}

/* The shared mobile drawer is injected after page styles, so give it an explicit warm material. */
html[data-theme="dark"] .fn-drawer {
  background: linear-gradient(180deg, rgba(34, 32, 29, 0.99), rgba(18, 17, 15, 0.99)) !important;
  border-color: var(--fasil-dark-border) !important;
}
html[data-theme="dark"] .fn-header {
  background: rgba(18, 17, 15, 0.94) !important;
  border-color: var(--fasil-dark-border) !important;
}
html[data-theme="dark"] .fn-saql-wrap .fn-saql-tip {
  background: rgba(34, 32, 29, 0.98) !important;
  border-color: var(--fasil-dark-border) !important;
}

/* Preserve debate-cover media while moving its tint and all structural panels to warm charcoal. */
html[data-theme="dark"] .db-hero-overlay {
  background: linear-gradient(135deg, rgba(18, 17, 15, 0.80), rgba(34, 32, 29, 0.54) 54%, rgba(18, 17, 15, 0.86)) !important;
}
html[data-theme="dark"] :is(.db-main, .db-chain-ticker, .db-floor-bar, .db-phase-strip, .db-timelocker) {
  background: linear-gradient(155deg, rgba(43, 41, 37, 0.96), rgba(31, 30, 27, 0.98)) !important;
  border-color: var(--fasil-dark-border) !important;
}
html[data-theme="dark"] :is(.db-goal-card, .db-sponsor-card, .db-winner-banner, .db-notif-panel) {
  background: linear-gradient(155deg, rgba(43, 41, 37, 0.96), rgba(31, 30, 27, 0.98)) !important;
  border-color: var(--fasil-dark-border) !important;
}
html[data-theme="dark"] .db-winner-banner {
  background: linear-gradient(135deg, rgba(213, 174, 97, 0.13), rgba(43, 41, 37, 0.96) 54%, rgba(31, 30, 27, 0.99)) !important;
  border-color: rgba(213, 174, 97, 0.36) !important;
}
html[data-theme="dark"] .db-team-card.ai-card {
  background: linear-gradient(145deg, rgba(179, 162, 207, 0.12), rgba(43, 41, 37, 0.98) 58%, rgba(31, 30, 27, 0.99)) !important;
  border-color: rgba(179, 162, 207, 0.30) !important;
}
html[data-theme="dark"] .db-team-card.ai-card .db-team-bg-overlay {
  background: linear-gradient(135deg, rgba(43, 41, 37, 0.86), rgba(31, 30, 27, 0.92)) !important;
}

/* Profile: this template names its large visual surfaces with the pr- prefix. */
html[data-theme="dark"] :is(.pr-card, .pr-section, .pr-stat-box, .pr-skill-row, .pr-debate-card, .pr-empty, .pr-modal-content) {
  background: linear-gradient(155deg, rgba(43, 41, 37, 0.96), rgba(31, 30, 27, 0.98)) !important;
  border-color: var(--fasil-dark-border) !important;
}

/* Lists: only fallback media and its readable bottom wash change; real img elements retain their sources. */
html[data-theme="dark"] :is(.fd-card-img-placeholder, .fd-private-card-placeholder, .fa-board-img-placeholder, .fa-featured-img-placeholder, .fa-debate-img-placeholder) {
  background: linear-gradient(135deg, rgba(43, 41, 37, 0.98), rgba(31, 30, 27, 0.90)) !important;
}
html[data-theme="dark"] :is(.fd-card-img-overlay, .fa-board-img-overlay) {
  background: linear-gradient(transparent, rgba(18, 17, 15, 0.88)) !important;
}