/* BCI Theme System — Light (default) + Dark mode */

/* ===== LIGHT THEME (DEFAULT) ===== */
:root, .light-theme {
  --bg-page: #f0f2f5;
  --bg-card: #ffffff;
  --bg-card-hover: #f7f9fc;
  --bg-input: #f0f2f5;
  --bg-input-focus: #e8f4fc;
  --bg-header: #0b2233;
  --bg-header-text: #ffffff;
  --bg-accent: #e8f4fc;

  --text-primary: #0b2233;
  --text-secondary: #555555;
  --text-muted: #888888;
  --text-faint: #bbbbbb;
  --text-inverse: #ffffff;

  --border-light: #e5e7eb;
  --border-medium: #d0d5dd;

  --color-blue: #1a7aaa;
  --color-gold: #c8a84b;
  --color-green: #22c55e;
  --color-red: #ef4444;
  --color-orange: #f59e0b;
  --color-purple: #9945FF;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 30px rgba(0,0,0,.12);
}

/* ===== DARK THEME ===== */
.dark-theme {
  --bg-page: #0a1628;
  --bg-card: #0f2235;
  --bg-card-hover: #132a42;
  --bg-input: rgba(255,255,255,.06);
  --bg-input-focus: rgba(26,122,170,.1);
  --bg-header: #0b2233;
  --bg-header-text: #ffffff;
  --bg-accent: rgba(26,122,170,.1);

  --text-primary: #e0e0e0;
  --text-secondary: rgba(255,255,255,.7);
  --text-muted: rgba(255,255,255,.45);
  --text-faint: rgba(255,255,255,.2);
  --text-inverse: #0b2233;

  --border-light: rgba(255,255,255,.08);
  --border-medium: rgba(255,255,255,.15);

  --color-blue: #1a7aaa;
  --color-gold: #c8a84b;
  --color-green: #22c55e;
  --color-red: #ef4444;
  --color-orange: #f59e0b;
  --color-purple: #9945FF;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.2);
  --shadow-md: 0 4px 12px rgba(0,0,0,.3);
  --shadow-lg: 0 8px 30px rgba(0,0,0,.4);
}

/* ===== GLOBAL OVERRIDES ===== */
/* These apply the variables to common elements across all pages */

/* Body background */
.dark-theme body { background: var(--bg-page) !important; color: var(--text-primary) !important; }
.light-theme body { background: var(--bg-page) !important; color: var(--text-primary) !important; }

/* Cards and sections */
.dark-theme .card, .dark-theme .section, .dark-theme .post, .dark-theme .composer,
.dark-theme .fr-card, .dark-theme .fl-profile, .dark-theme .fl-nav {
  background: var(--bg-card) !important; border-color: var(--border-light) !important; box-shadow: var(--shadow-sm) !important;
}
.light-theme .card, .light-theme .section, .light-theme .post, .light-theme .composer,
.light-theme .fr-card, .light-theme .fl-profile, .light-theme .fl-nav {
  background: var(--bg-card) !important; border-color: var(--border-light) !important; box-shadow: var(--shadow-sm) !important;
}

/* Inputs */
.dark-theme input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.dark-theme textarea, .dark-theme select {
  background: var(--bg-input) !important; border-color: var(--border-medium) !important; color: var(--text-primary) !important;
}
.dark-theme select option { color: #0b2233 !important; background: #fff !important; }

.light-theme input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.light-theme textarea, .light-theme select {
  background: var(--bg-input) !important; border-color: var(--border-light) !important; color: var(--text-primary) !important;
}

/* Text colors */
.dark-theme .post-body, .dark-theme .comment-bubble, .dark-theme .post-user,
.dark-theme .fl-name, .dark-theme .fr-item-name, .dark-theme h1, .dark-theme h2, .dark-theme h3 {
  color: var(--text-primary) !important;
}
.dark-theme .post-time, .dark-theme .comment-time, .dark-theme .fl-slug,
.dark-theme .fr-item-sub, .dark-theme .fr-title {
  color: var(--text-muted) !important;
}

/* Comment bubbles */
.dark-theme .comment-bubble { background: rgba(255,255,255,.06) !important; color: var(--text-primary) !important; }
.light-theme .comment-bubble { background: #f0f2f5 !important; color: var(--text-primary) !important; }

/* Post engagement and actions */
.dark-theme .post-engagement { color: var(--text-muted) !important; }
.dark-theme .post-actions button { color: var(--text-secondary) !important; border-color: var(--border-light) !important; }
.dark-theme .post-actions button:hover { background: var(--bg-card-hover) !important; }
.light-theme .post-actions button:hover { background: #f0f2f5 !important; }

/* Composer */
.dark-theme .composer-input { background: var(--bg-input) !important; color: var(--text-primary) !important; }
.dark-theme .composer-actions button { color: var(--text-secondary) !important; }

/* Profile bar */
.dark-theme .profile-bar { background: var(--bg-card) !important; }
.dark-theme .profile-name { color: var(--text-primary) !important; }
.dark-theme .profile-slug, .dark-theme .profile-bio { color: var(--text-secondary) !important; }

/* Tabs */
.dark-theme .tabs { background: var(--bg-card) !important; border-color: var(--border-light) !important; }
.dark-theme .tabs a { color: var(--text-muted) !important; }
.dark-theme .tabs a.active { color: var(--color-blue) !important; }

/* Dashboard overrides — only target dashboard .wrap > .section, not listing/public page sections */
.light-theme .wrap { color: var(--text-primary); }
.light-theme .wrap > .section { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 12px; }

/* Feed sidebar */
.dark-theme .fl-stats span { color: var(--text-primary) !important; }
.dark-theme .fl-nav a { color: var(--text-primary) !important; }
.dark-theme .fl-nav a:hover { background: var(--bg-card-hover) !important; }

/* Island page */
.dark-theme .cover { background-color: #0b2233; }
.dark-theme .listing-card { background: var(--bg-card) !important; border-color: var(--border-light) !important; }
.dark-theme .listing-card h4 { color: var(--text-primary) !important; }
.dark-theme .photo-grid img { border-radius: 4px; }

/* Right sidebar tags */
.dark-theme .tag-cloud a { background: rgba(26,122,170,.15) !important; }
.dark-theme .fr-item-btn { background: rgba(26,122,170,.15) !important; }

/* Scrollbar dark mode */
.dark-theme ::-webkit-scrollbar { width: 6px; }
.dark-theme ::-webkit-scrollbar-track { background: rgba(255,255,255,.02); }
.dark-theme ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; }