rx-dark-mode.css

/*!
Theme Name: RX Theme
File: assets/css/rx-dark-mode.css
Description: Advanced dark mode system for RX Theme
Author: RxHarun
Version: 1.0.0
*/

/* =========================================================
   RX THEME DARK MODE ROOT TOKENS
   Works with:
   html[data-theme="dark"]
   body.rx-dark-mode
   .rx-dark-mode
   prefers-color-scheme: dark
========================================================= */

:root {
  color-scheme: light dark;

  --rx-transition-fast: 160ms ease;
  --rx-transition-normal: 240ms ease;
  --rx-transition-slow: 360ms ease;

  --rx-dark-bg: #0b0f14;
  --rx-dark-bg-soft: #111827;
  --rx-dark-bg-muted: #172033;
  --rx-dark-surface: #121826;
  --rx-dark-surface-soft: #182235;
  --rx-dark-card: #141c2b;
  --rx-dark-card-hover: #1b2638;

  --rx-dark-text: #e6edf7;
  --rx-dark-text-soft: #cbd5e1;
  --rx-dark-text-muted: #94a3b8;
  --rx-dark-text-faint: #64748b;

  --rx-dark-border: rgba(148, 163, 184, 0.22);
  --rx-dark-border-soft: rgba(148, 163, 184, 0.14);
  --rx-dark-border-strong: rgba(203, 213, 225, 0.35);

  --rx-dark-primary: #60a5fa;
  --rx-dark-primary-hover: #93c5fd;
  --rx-dark-primary-soft: rgba(96, 165, 250, 0.14);

  --rx-dark-secondary: #a78bfa;
  --rx-dark-success: #34d399;
  --rx-dark-warning: #fbbf24;
  --rx-dark-danger: #fb7185;
  --rx-dark-info: #22d3ee;

  --rx-dark-link: #7dd3fc;
  --rx-dark-link-hover: #bae6fd;

  --rx-dark-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.28);
  --rx-dark-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --rx-dark-shadow-lg: 0 18px 55px rgba(0, 0, 0, 0.48);

  --rx-dark-focus: 0 0 0 3px rgba(96, 165, 250, 0.45);

  --rx-dark-code-bg: #0f172a;
  --rx-dark-code-text: #dbeafe;

  --rx-dark-selection-bg: rgba(96, 165, 250, 0.35);
  --rx-dark-selection-text: #ffffff;

  --rx-dark-scrollbar-track: #0b0f14;
  --rx-dark-scrollbar-thumb: #334155;
  --rx-dark-scrollbar-thumb-hover: #475569;
}

/* =========================================================
   DARK MODE ACTIVATION SELECTORS
========================================================= */

html[data-theme="dark"],
body.rx-dark-mode,
.rx-dark-mode {
  --rx-bg: var(--rx-dark-bg);
  --rx-bg-soft: var(--rx-dark-bg-soft);
  --rx-bg-muted: var(--rx-dark-bg-muted);
  --rx-surface: var(--rx-dark-surface);
  --rx-surface-soft: var(--rx-dark-surface-soft);
  --rx-card: var(--rx-dark-card);
  --rx-card-hover: var(--rx-dark-card-hover);

  --rx-text: var(--rx-dark-text);
  --rx-text-soft: var(--rx-dark-text-soft);
  --rx-text-muted: var(--rx-dark-text-muted);
  --rx-text-faint: var(--rx-dark-text-faint);

  --rx-border: var(--rx-dark-border);
  --rx-border-soft: var(--rx-dark-border-soft);
  --rx-border-strong: var(--rx-dark-border-strong);

  --rx-primary: var(--rx-dark-primary);
  --rx-primary-hover: var(--rx-dark-primary-hover);
  --rx-primary-soft: var(--rx-dark-primary-soft);

  --rx-secondary: var(--rx-dark-secondary);
  --rx-success: var(--rx-dark-success);
  --rx-warning: var(--rx-dark-warning);
  --rx-danger: var(--rx-dark-danger);
  --rx-info: var(--rx-dark-info);

  --rx-link: var(--rx-dark-link);
  --rx-link-hover: var(--rx-dark-link-hover);

  --rx-shadow-sm: var(--rx-dark-shadow-sm);
  --rx-shadow-md: var(--rx-dark-shadow-md);
  --rx-shadow-lg: var(--rx-dark-shadow-lg);

  --rx-focus-ring: var(--rx-dark-focus);

  --rx-code-bg: var(--rx-dark-code-bg);
  --rx-code-text: var(--rx-dark-code-text);
}

/* =========================================================
   AUTOMATIC DARK MODE BY DEVICE SETTING
   This works only when no manual light theme is forced.
========================================================= */

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --rx-bg: var(--rx-dark-bg);
    --rx-bg-soft: var(--rx-dark-bg-soft);
    --rx-bg-muted: var(--rx-dark-bg-muted);
    --rx-surface: var(--rx-dark-surface);
    --rx-surface-soft: var(--rx-dark-surface-soft);
    --rx-card: var(--rx-dark-card);
    --rx-card-hover: var(--rx-dark-card-hover);

    --rx-text: var(--rx-dark-text);
    --rx-text-soft: var(--rx-dark-text-soft);
    --rx-text-muted: var(--rx-dark-text-muted);
    --rx-text-faint: var(--rx-dark-text-faint);

    --rx-border: var(--rx-dark-border);
    --rx-border-soft: var(--rx-dark-border-soft);
    --rx-border-strong: var(--rx-dark-border-strong);

    --rx-primary: var(--rx-dark-primary);
    --rx-primary-hover: var(--rx-dark-primary-hover);
    --rx-primary-soft: var(--rx-dark-primary-soft);

    --rx-link: var(--rx-dark-link);
    --rx-link-hover: var(--rx-dark-link-hover);
    --rx-shadow-sm: var(--rx-dark-shadow-sm);
    --rx-shadow-md: var(--rx-dark-shadow-md);
    --rx-shadow-lg: var(--rx-dark-shadow-lg);
    --rx-code-bg: var(--rx-dark-code-bg);
    --rx-code-text: var(--rx-dark-code-text);
  }
}

/* =========================================================
   GLOBAL DARK BASE
========================================================= */

html[data-theme="dark"],
html[data-theme="dark"] body,
body.rx-dark-mode {
  background-color: var(--rx-bg);
  color: var(--rx-text);
}

html[data-theme="dark"] body,
body.rx-dark-mode {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[data-theme="dark"] *,
body.rx-dark-mode * {
  border-color: var(--rx-border-soft);
}

html[data-theme="dark"] *::selection,
body.rx-dark-mode *::selection {
  background: var(--rx-dark-selection-bg);
  color: var(--rx-dark-selection-text);
}

/* Smooth color transition only for normal users */
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="dark"] body,
  body.rx-dark-mode,
  html[data-theme="dark"] a,
  body.rx-dark-mode a,
  html[data-theme="dark"] button,
  body.rx-dark-mode button,
  html[data-theme="dark"] input,
  body.rx-dark-mode input,
  html[data-theme="dark"] textarea,
  body.rx-dark-mode textarea,
  html[data-theme="dark"] select,
  body.rx-dark-mode select {
    transition:
      background-color var(--rx-transition-normal),
      color var(--rx-transition-normal),
      border-color var(--rx-transition-normal),
      box-shadow var(--rx-transition-normal);
  }
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
body.rx-dark-mode h1,
body.rx-dark-mode h2,
body.rx-dark-mode h3,
body.rx-dark-mode h4,
body.rx-dark-mode h5,
body.rx-dark-mode h6 {
  color: var(--rx-text);
}

html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] dd,
html[data-theme="dark"] dt,
html[data-theme="dark"] figcaption,
body.rx-dark-mode p,
body.rx-dark-mode li,
body.rx-dark-mode dd,
body.rx-dark-mode dt,
body.rx-dark-mode figcaption {
  color: var(--rx-text-soft);
}

html[data-theme="dark"] small,
html[data-theme="dark"] .rx-muted,
html[data-theme="dark"] .entry-meta,
html[data-theme="dark"] .post-meta,
html[data-theme="dark"] .comment-meta,
body.rx-dark-mode small,
body.rx-dark-mode .rx-muted,
body.rx-dark-mode .entry-meta,
body.rx-dark-mode .post-meta,
body.rx-dark-mode .comment-meta {
  color: var(--rx-text-muted);
}

html[data-theme="dark"] hr,
body.rx-dark-mode hr {
  border-color: var(--rx-border-soft);
  background-color: var(--rx-border-soft);
}

/* =========================================================
   LINKS
========================================================= */

html[data-theme="dark"] a,
body.rx-dark-mode a {
  color: var(--rx-link);
}

html[data-theme="dark"] a:hover,
html[data-theme="dark"] a:focus,
body.rx-dark-mode a:hover,
body.rx-dark-mode a:focus {
  color: var(--rx-link-hover);
}

html[data-theme="dark"] a:focus-visible,
body.rx-dark-mode a:focus-visible {
  outline: none;
  box-shadow: var(--rx-focus-ring);
  border-radius: 4px;
}

/* =========================================================
   LAYOUT WRAPPERS
========================================================= */

html[data-theme="dark"] .site,
html[data-theme="dark"] .site-content,
html[data-theme="dark"] .content-area,
html[data-theme="dark"] .rx-site,
html[data-theme="dark"] .rx-main,
body.rx-dark-mode .site,
body.rx-dark-mode .site-content,
body.rx-dark-mode .content-area,
body.rx-dark-mode .rx-site,
body.rx-dark-mode .rx-main {
  background: var(--rx-bg);
  color: var(--rx-text);
}

html[data-theme="dark"] .rx-container,
html[data-theme="dark"] .rx-wrapper,
body.rx-dark-mode .rx-container,
body.rx-dark-mode .rx-wrapper {
  color: var(--rx-text-soft);
}

/* =========================================================
   HEADER
========================================================= */

html[data-theme="dark"] .site-header,
html[data-theme="dark"] .rx-header,
html[data-theme="dark"] .rx-main-header,
body.rx-dark-mode .site-header,
body.rx-dark-mode .rx-header,
body.rx-dark-mode .rx-main-header {
  background: rgba(11, 15, 20, 0.92);
  color: var(--rx-text);
  border-bottom: 1px solid var(--rx-border-soft);
  box-shadow: var(--rx-shadow-sm);
}

@supports (backdrop-filter: blur(12px)) {
  html[data-theme="dark"] .site-header,
  html[data-theme="dark"] .rx-header,
  body.rx-dark-mode .site-header,
  body.rx-dark-mode .rx-header {
    backdrop-filter: blur(12px);
  }
}

html[data-theme="dark"] .site-title,
html[data-theme="dark"] .site-title a,
html[data-theme="dark"] .site-description,
body.rx-dark-mode .site-title,
body.rx-dark-mode .site-title a,
body.rx-dark-mode .site-description {
  color: var(--rx-text);
}

html[data-theme="dark"] .custom-logo,
body.rx-dark-mode .custom-logo {
  filter: brightness(1.03) contrast(1.02);
}

/* =========================================================
   NAVIGATION / MENU
========================================================= */

html[data-theme="dark"] .main-navigation,
html[data-theme="dark"] .primary-menu,
html[data-theme="dark"] .rx-menu,
body.rx-dark-mode .main-navigation,
body.rx-dark-mode .primary-menu,
body.rx-dark-mode .rx-menu {
  background: transparent;
  color: var(--rx-text);
}

html[data-theme="dark"] .main-navigation a,
html[data-theme="dark"] .primary-menu a,
html[data-theme="dark"] .rx-menu a,
body.rx-dark-mode .main-navigation a,
body.rx-dark-mode .primary-menu a,
body.rx-dark-mode .rx-menu a {
  color: var(--rx-text-soft);
}

html[data-theme="dark"] .main-navigation a:hover,
html[data-theme="dark"] .main-navigation a:focus,
html[data-theme="dark"] .main-navigation .current-menu-item > a,
html[data-theme="dark"] .main-navigation .current_page_item > a,
html[data-theme="dark"] .rx-menu a:hover,
html[data-theme="dark"] .rx-menu .current-menu-item > a,
body.rx-dark-mode .main-navigation a:hover,
body.rx-dark-mode .main-navigation a:focus,
body.rx-dark-mode .main-navigation .current-menu-item > a,
body.rx-dark-mode .main-navigation .current_page_item > a,
body.rx-dark-mode .rx-menu a:hover,
body.rx-dark-mode .rx-menu .current-menu-item > a {
  color: var(--rx-primary-hover);
}

html[data-theme="dark"] .main-navigation ul ul,
html[data-theme="dark"] .rx-menu ul ul,
body.rx-dark-mode .main-navigation ul ul,
body.rx-dark-mode .rx-menu ul ul {
  background: var(--rx-surface);
  border: 1px solid var(--rx-border-soft);
  box-shadow: var(--rx-shadow-md);
}

html[data-theme="dark"] .main-navigation ul ul a,
html[data-theme="dark"] .rx-menu ul ul a,
body.rx-dark-mode .main-navigation ul ul a,
body.rx-dark-mode .rx-menu ul ul a {
  color: var(--rx-text-soft);
}

html[data-theme="dark"] .main-navigation ul ul a:hover,
html[data-theme="dark"] .rx-menu ul ul a:hover,
body.rx-dark-mode .main-navigation ul ul a:hover,
body.rx-dark-mode .rx-menu ul ul a:hover {
  background: var(--rx-primary-soft);
  color: var(--rx-primary-hover);
}

/* =========================================================
   MOBILE MENU
========================================================= */

html[data-theme="dark"] .menu-toggle,
html[data-theme="dark"] .rx-menu-toggle,
body.rx-dark-mode .menu-toggle,
body.rx-dark-mode .rx-menu-toggle {
  background: var(--rx-surface);
  color: var(--rx-text);
  border: 1px solid var(--rx-border);
}

html[data-theme="dark"] .menu-toggle:hover,
html[data-theme="dark"] .rx-menu-toggle:hover,
body.rx-dark-mode .menu-toggle:hover,
body.rx-dark-mode .rx-menu-toggle:hover {
  background: var(--rx-card-hover);
  color: var(--rx-primary-hover);
}

/* =========================================================
   DARK MODE TOGGLE BUTTON
========================================================= */

.rx-dark-toggle,
.rx-theme-toggle,
button.rx-dark-toggle,
button.rx-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 42px;
  min-height: 42px;
  padding: 0.55rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--rx-border-soft);
  background: var(--rx-surface);
  color: var(--rx-text);
  cursor: pointer;
  box-shadow: var(--rx-shadow-sm);
}

html[data-theme="dark"] .rx-dark-toggle,
html[data-theme="dark"] .rx-theme-toggle,
body.rx-dark-mode .rx-dark-toggle,
body.rx-dark-mode .rx-theme-toggle {
  background: var(--rx-surface-soft);
  color: var(--rx-text);
  border-color: var(--rx-border);
}

html[data-theme="dark"] .rx-dark-toggle:hover,
html[data-theme="dark"] .rx-theme-toggle:hover,
body.rx-dark-mode .rx-dark-toggle:hover,
body.rx-dark-mode .rx-theme-toggle:hover {
  background: var(--rx-card-hover);
  color: var(--rx-primary-hover);
}

/* =========================================================
   POST / ARTICLE / CONTENT
========================================================= */

html[data-theme="dark"] article,
html[data-theme="dark"] .post,
html[data-theme="dark"] .page,
html[data-theme="dark"] .entry-content,
html[data-theme="dark"] .rx-post,
body.rx-dark-mode article,
body.rx-dark-mode .post,
body.rx-dark-mode .page,
body.rx-dark-mode .entry-content,
body.rx-dark-mode .rx-post {
  color: var(--rx-text-soft);
}

html[data-theme="dark"] .entry-title,
html[data-theme="dark"] .entry-title a,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .rx-post-title,
body.rx-dark-mode .entry-title,
body.rx-dark-mode .entry-title a,
body.rx-dark-mode .page-title,
body.rx-dark-mode .rx-post-title {
  color: var(--rx-text);
}

html[data-theme="dark"] .entry-title a:hover,
body.rx-dark-mode .entry-title a:hover {
  color: var(--rx-primary-hover);
}

html[data-theme="dark"] .entry-summary,
html[data-theme="dark"] .excerpt,
html[data-theme="dark"] .rx-excerpt,
body.rx-dark-mode .entry-summary,
body.rx-dark-mode .excerpt,
body.rx-dark-mode .rx-excerpt {
  color: var(--rx-text-soft);
}

/* =========================================================
   CARDS
========================================================= */

html[data-theme="dark"] .rx-card,
html[data-theme="dark"] .post-card,
html[data-theme="dark"] .article-card,
html[data-theme="dark"] .widget,
html[data-theme="dark"] .sidebar .widget,
body.rx-dark-mode .rx-card,
body.rx-dark-mode .post-card,
body.rx-dark-mode .article-card,
body.rx-dark-mode .widget,
body.rx-dark-mode .sidebar .widget {
  background: var(--rx-card);
  color: var(--rx-text-soft);
  border: 1px solid var(--rx-border-soft);
  box-shadow: var(--rx-shadow-sm);
}

html[data-theme="dark"] .rx-card:hover,
html[data-theme="dark"] .post-card:hover,
html[data-theme="dark"] .article-card:hover,
body.rx-dark-mode .rx-card:hover,
body.rx-dark-mode .post-card:hover,
body.rx-dark-mode .article-card:hover {
  background: var(--rx-card-hover);
  border-color: var(--rx-border);
  box-shadow: var(--rx-shadow-md);
}

html[data-theme="dark"] .rx-card-title,
html[data-theme="dark"] .widget-title,
body.rx-dark-mode .rx-card-title,
body.rx-dark-mode .widget-title {
  color: var(--rx-text);
}

/* =========================================================
   BUTTONS
========================================================= */

html[data-theme="dark"] button,
html[data-theme="dark"] .button,
html[data-theme="dark"] .btn,
html[data-theme="dark"] .rx-btn,
html[data-theme="dark"] input[type="button"],
html[data-theme="dark"] input[type="submit"],
html[data-theme="dark"] input[type="reset"],
body.rx-dark-mode button,
body.rx-dark-mode .button,
body.rx-dark-mode .btn,
body.rx-dark-mode .rx-btn,
body.rx-dark-mode input[type="button"],
body.rx-dark-mode input[type="submit"],
body.rx-dark-mode input[type="reset"] {
  background: var(--rx-primary);
  color: #06111f;
  border: 1px solid transparent;
  box-shadow: var(--rx-shadow-sm);
}

html[data-theme="dark"] button:hover,
html[data-theme="dark"] .button:hover,
html[data-theme="dark"] .btn:hover,
html[data-theme="dark"] .rx-btn:hover,
html[data-theme="dark"] input[type="button"]:hover,
html[data-theme="dark"] input[type="submit"]:hover,
html[data-theme="dark"] input[type="reset"]:hover,
body.rx-dark-mode button:hover,
body.rx-dark-mode .button:hover,
body.rx-dark-mode .btn:hover,
body.rx-dark-mode .rx-btn:hover,
body.rx-dark-mode input[type="button"]:hover,
body.rx-dark-mode input[type="submit"]:hover,
body.rx-dark-mode input[type="reset"]:hover {
  background: var(--rx-primary-hover);
  color: #020617;
}

html[data-theme="dark"] .rx-btn-outline,
body.rx-dark-mode .rx-btn-outline {
  background: transparent;
  color: var(--rx-primary-hover);
  border-color: var(--rx-primary);
}

html[data-theme="dark"] .rx-btn-outline:hover,
body.rx-dark-mode .rx-btn-outline:hover {
  background: var(--rx-primary-soft);
  color: var(--rx-primary-hover);
}

/* =========================================================
   FORMS
========================================================= */

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
body.rx-dark-mode input,
body.rx-dark-mode textarea,
body.rx-dark-mode select {
  background: var(--rx-surface);
  color: var(--rx-text);
  border: 1px solid var(--rx-border);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
body.rx-dark-mode input::placeholder,
body.rx-dark-mode textarea::placeholder {
  color: var(--rx-text-faint);
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus,
body.rx-dark-mode input:focus,
body.rx-dark-mode textarea:focus,
body.rx-dark-mode select:focus {
  outline: none;
  border-color: var(--rx-primary);
  box-shadow: var(--rx-focus-ring);
}

html[data-theme="dark"] label,
html[data-theme="dark"] legend,
body.rx-dark-mode label,
body.rx-dark-mode legend {
  color: var(--rx-text-soft);
}

html[data-theme="dark"] fieldset,
body.rx-dark-mode fieldset {
  border-color: var(--rx-border);
}

html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"],
body.rx-dark-mode input[type="checkbox"],
body.rx-dark-mode input[type="radio"] {
  accent-color: var(--rx-primary);
}

/* =========================================================
   SEARCH FORM
========================================================= */

html[data-theme="dark"] .search-form,
html[data-theme="dark"] .rx-search-form,
body.rx-dark-mode .search-form,
body.rx-dark-mode .rx-search-form {
  background: var(--rx-surface);
  border: 1px solid var(--rx-border-soft);
}

html[data-theme="dark"] .search-field,
html[data-theme="dark"] .rx-search-input,
body.rx-dark-mode .search-field,
body.rx-dark-mode .rx-search-input {
  background: var(--rx-bg-soft);
  color: var(--rx-text);
}

/* =========================================================
   TABLES
========================================================= */

html[data-theme="dark"] table,
body.rx-dark-mode table {
  background: var(--rx-surface);
  color: var(--rx-text-soft);
  border-color: var(--rx-border);
}

html[data-theme="dark"] th,
body.rx-dark-mode th {
  background: var(--rx-bg-muted);
  color: var(--rx-text);
  border-color: var(--rx-border);
}

html[data-theme="dark"] td,
body.rx-dark-mode td {
  border-color: var(--rx-border-soft);
}

html[data-theme="dark"] tr:nth-child(even),
body.rx-dark-mode tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.025);
}

html[data-theme="dark"] tr:hover,
body.rx-dark-mode tr:hover {
  background: var(--rx-primary-soft);
}

/* =========================================================
   BLOCKQUOTE
========================================================= */

html[data-theme="dark"] blockquote,
body.rx-dark-mode blockquote {
  background: var(--rx-surface);
  color: var(--rx-text-soft);
  border-left: 4px solid var(--rx-primary);
  box-shadow: var(--rx-shadow-sm);
}

html[data-theme="dark"] blockquote cite,
body.rx-dark-mode blockquote cite {
  color: var(--rx-text-muted);
}

/* =========================================================
   CODE / PRE
========================================================= */

html[data-theme="dark"] code,
html[data-theme="dark"] kbd,
html[data-theme="dark"] samp,
body.rx-dark-mode code,
body.rx-dark-mode kbd,
body.rx-dark-mode samp {
  background: var(--rx-code-bg);
  color: var(--rx-code-text);
  border: 1px solid var(--rx-border-soft);
}

html[data-theme="dark"] pre,
body.rx-dark-mode pre {
  background: var(--rx-code-bg);
  color: var(--rx-code-text);
  border: 1px solid var(--rx-border-soft);
  box-shadow: var(--rx-shadow-sm);
}

html[data-theme="dark"] pre code,
body.rx-dark-mode pre code {
  background: transparent;
  border: 0;
}

/* =========================================================
   IMAGES / MEDIA
========================================================= */

html[data-theme="dark"] img,
body.rx-dark-mode img {
  filter: brightness(0.95) contrast(1.04);
}

html[data-theme="dark"] .entry-content img,
body.rx-dark-mode .entry-content img {
  border-color: var(--rx-border-soft);
}

html[data-theme="dark"] iframe,
html[data-theme="dark"] video,
body.rx-dark-mode iframe,
body.rx-dark-mode video {
  background: #000;
  border-color: var(--rx-border-soft);
}

/* Avoid filtering logos/icons too strongly */
html[data-theme="dark"] .custom-logo,
html[data-theme="dark"] .site-logo img,
html[data-theme="dark"] img[src*=".svg"],
body.rx-dark-mode .custom-logo,
body.rx-dark-mode .site-logo img,
body.rx-dark-mode img[src*=".svg"] {
  filter: none;
}

/* =========================================================
   WORDPRESS BLOCKS
========================================================= */

html[data-theme="dark"] .wp-block-group,
html[data-theme="dark"] .wp-block-columns,
html[data-theme="dark"] .wp-block-media-text,
body.rx-dark-mode .wp-block-group,
body.rx-dark-mode .wp-block-columns,
body.rx-dark-mode .wp-block-media-text {
  color: var(--rx-text-soft);
}

html[data-theme="dark"] .wp-block-cover,
body.rx-dark-mode .wp-block-cover {
  color: #ffffff;
}

html[data-theme="dark"] .wp-block-quote,
body.rx-dark-mode .wp-block-quote {
  background: var(--rx-surface);
  border-color: var(--rx-primary);
}

html[data-theme="dark"] .wp-block-pullquote,
body.rx-dark-mode .wp-block-pullquote {
  border-color: var(--rx-border);
  color: var(--rx-text);
}

html[data-theme="dark"] .wp-block-table table,
body.rx-dark-mode .wp-block-table table {
  border-color: var(--rx-border);
}

html[data-theme="dark"] .wp-block-separator,
body.rx-dark-mode .wp-block-separator {
  border-color: var(--rx-border-soft);
}

html[data-theme="dark"] .wp-block-button__link,
body.rx-dark-mode .wp-block-button__link {
  background: var(--rx-primary);
  color: #06111f;
}

html[data-theme="dark"] .wp-block-button__link:hover,
body.rx-dark-mode .wp-block-button__link:hover {
  background: var(--rx-primary-hover);
  color: #020617;
}

html[data-theme="dark"] .wp-block-latest-posts__post-title,
html[data-theme="dark"] .wp-block-categories a,
html[data-theme="dark"] .wp-block-archives a,
body.rx-dark-mode .wp-block-latest-posts__post-title,
body.rx-dark-mode .wp-block-categories a,
body.rx-dark-mode .wp-block-archives a {
  color: var(--rx-link);
}

/* =========================================================
   WORDPRESS ALIGNMENT / CAPTION
========================================================= */

html[data-theme="dark"] .wp-caption,
body.rx-dark-mode .wp-caption {
  background: var(--rx-surface);
  border: 1px solid var(--rx-border-soft);
}

html[data-theme="dark"] .wp-caption-text,
body.rx-dark-mode .wp-caption-text {
  color: var(--rx-text-muted);
}

/* =========================================================
   COMMENTS
========================================================= */

html[data-theme="dark"] .comments-area,
html[data-theme="dark"] .comment-list,
body.rx-dark-mode .comments-area,
body.rx-dark-mode .comment-list {
  color: var(--rx-text-soft);
}

html[data-theme="dark"] .comment-body,
body.rx-dark-mode .comment-body {
  background: var(--rx-card);
  border: 1px solid var(--rx-border-soft);
  box-shadow: var(--rx-shadow-sm);
}

html[data-theme="dark"] .comment-author,
html[data-theme="dark"] .comment-author a,
body.rx-dark-mode .comment-author,
body.rx-dark-mode .comment-author a {
  color: var(--rx-text);
}

html[data-theme="dark"] .comment-metadata,
html[data-theme="dark"] .comment-metadata a,
body.rx-dark-mode .comment-metadata,
body.rx-dark-mode .comment-metadata a {
  color: var(--rx-text-muted);
}

html[data-theme="dark"] .comment-reply-link,
body.rx-dark-mode .comment-reply-link {
  color: var(--rx-primary-hover);
}

/* =========================================================
   PAGINATION
========================================================= */

html[data-theme="dark"] .pagination,
html[data-theme="dark"] .nav-links,
body.rx-dark-mode .pagination,
body.rx-dark-mode .nav-links {
  color: var(--rx-text-soft);
}

html[data-theme="dark"] .page-numbers,
body.rx-dark-mode .page-numbers {
  background: var(--rx-surface);
  color: var(--rx-text-soft);
  border: 1px solid var(--rx-border-soft);
}

html[data-theme="dark"] .page-numbers.current,
html[data-theme="dark"] .page-numbers:hover,
body.rx-dark-mode .page-numbers.current,
body.rx-dark-mode .page-numbers:hover {
  background: var(--rx-primary);
  color: #06111f;
  border-color: var(--rx-primary);
}

/* =========================================================
   BREADCRUMBS
========================================================= */

html[data-theme="dark"] .breadcrumbs,
html[data-theme="dark"] .rx-breadcrumbs,
body.rx-dark-mode .breadcrumbs,
body.rx-dark-mode .rx-breadcrumbs {
  color: var(--rx-text-muted);
}

html[data-theme="dark"] .breadcrumbs a,
html[data-theme="dark"] .rx-breadcrumbs a,
body.rx-dark-mode .breadcrumbs a,
body.rx-dark-mode .rx-breadcrumbs a {
  color: var(--rx-link);
}

/* =========================================================
   SIDEBAR
========================================================= */

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .widget-area,
body.rx-dark-mode .sidebar,
body.rx-dark-mode .widget-area {
  color: var(--rx-text-soft);
}

html[data-theme="dark"] .widget ul li,
body.rx-dark-mode .widget ul li {
  border-color: var(--rx-border-soft);
}

html[data-theme="dark"] .widget a,
body.rx-dark-mode .widget a {
  color: var(--rx-link);
}

html[data-theme="dark"] .widget a:hover,
body.rx-dark-mode .widget a:hover {
  color: var(--rx-link-hover);
}

/* =========================================================
   FOOTER
========================================================= */

html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .rx-footer,
body.rx-dark-mode .site-footer,
body.rx-dark-mode .rx-footer {
  background: var(--rx-bg-soft);
  color: var(--rx-text-soft);
  border-top: 1px solid var(--rx-border-soft);
}

html[data-theme="dark"] .site-footer a,
html[data-theme="dark"] .rx-footer a,
body.rx-dark-mode .site-footer a,
body.rx-dark-mode .rx-footer a {
  color: var(--rx-link);
}

html[data-theme="dark"] .site-footer a:hover,
html[data-theme="dark"] .rx-footer a:hover,
body.rx-dark-mode .site-footer a:hover,
body.rx-dark-mode .rx-footer a:hover {
  color: var(--rx-link-hover);
}

/* =========================================================
   ALERTS / BADGES
========================================================= */

html[data-theme="dark"] .rx-alert,
body.rx-dark-mode .rx-alert {
  background: var(--rx-surface);
  color: var(--rx-text-soft);
  border: 1px solid var(--rx-border);
}

html[data-theme="dark"] .rx-alert-success,
body.rx-dark-mode .rx-alert-success {
  background: rgba(52, 211, 153, 0.12);
  color: #bbf7d0;
  border-color: rgba(52, 211, 153, 0.35);
}

html[data-theme="dark"] .rx-alert-warning,
body.rx-dark-mode .rx-alert-warning {
  background: rgba(251, 191, 36, 0.12);
  color: #fde68a;
  border-color: rgba(251, 191, 36, 0.35);
}

html[data-theme="dark"] .rx-alert-danger,
body.rx-dark-mode .rx-alert-danger {
  background: rgba(251, 113, 133, 0.12);
  color: #fecdd3;
  border-color: rgba(251, 113, 133, 0.35);
}

html[data-theme="dark"] .rx-alert-info,
body.rx-dark-mode .rx-alert-info {
  background: rgba(34, 211, 238, 0.12);
  color: #cffafe;
  border-color: rgba(34, 211, 238, 0.35);
}

html[data-theme="dark"] .rx-badge,
body.rx-dark-mode .rx-badge {
  background: var(--rx-primary-soft);
  color: var(--rx-primary-hover);
  border: 1px solid var(--rx-border-soft);
}

/* =========================================================
   MEDICAL ARTICLE SPECIAL BOXES
========================================================= */

html[data-theme="dark"] .rx-medical-note,
html[data-theme="dark"] .rx-health-box,
html[data-theme="dark"] .rx-clinical-box,
body.rx-dark-mode .rx-medical-note,
body.rx-dark-mode .rx-health-box,
body.rx-dark-mode .rx-clinical-box {
  background: linear-gradient(
    135deg,
    rgba(96, 165, 250, 0.12),
    rgba(167, 139, 250, 0.08)
  );
  color: var(--rx-text-soft);
  border: 1px solid var(--rx-border);
  box-shadow: var(--rx-shadow-sm);
}

html[data-theme="dark"] .rx-warning-box,
body.rx-dark-mode .rx-warning-box {
  background: rgba(251, 191, 36, 0.12);
  color: #fde68a;
  border: 1px solid rgba(251, 191, 36, 0.35);
}

html[data-theme="dark"] .rx-danger-box,
body.rx-dark-mode .rx-danger-box {
  background: rgba(251, 113, 133, 0.12);
  color: #fecdd3;
  border: 1px solid rgba(251, 113, 133, 0.35);
}

/* =========================================================
   AUTHOR BOX
========================================================= */

html[data-theme="dark"] .author-box,
html[data-theme="dark"] .rx-author-box,
body.rx-dark-mode .author-box,
body.rx-dark-mode .rx-author-box {
  background: var(--rx-card);
  color: var(--rx-text-soft);
  border: 1px solid var(--rx-border-soft);
  box-shadow: var(--rx-shadow-sm);
}

html[data-theme="dark"] .author-box-title,
html[data-theme="dark"] .rx-author-name,
body.rx-dark-mode .author-box-title,
body.rx-dark-mode .rx-author-name {
  color: var(--rx-text);
}

/* =========================================================
   RELATED POSTS
========================================================= */

html[data-theme="dark"] .related-posts,
html[data-theme="dark"] .rx-related-posts,
body.rx-dark-mode .related-posts,
body.rx-dark-mode .rx-related-posts {
  color: var(--rx-text-soft);
}

html[data-theme="dark"] .related-post,
html[data-theme="dark"] .rx-related-card,
body.rx-dark-mode .related-post,
body.rx-dark-mode .rx-related-card {
  background: var(--rx-card);
  border: 1px solid var(--rx-border-soft);
  box-shadow: var(--rx-shadow-sm);
}

html[data-theme="dark"] .related-post:hover,
html[data-theme="dark"] .rx-related-card:hover,
body.rx-dark-mode .related-post:hover,
body.rx-dark-mode .rx-related-card:hover {
  background: var(--rx-card-hover);
}

/* =========================================================
   TAGS / CATEGORIES
========================================================= */

html[data-theme="dark"] .cat-links a,
html[data-theme="dark"] .tags-links a,
html[data-theme="dark"] .rx-tag,
html[data-theme="dark"] .rx-category,
body.rx-dark-mode .cat-links a,
body.rx-dark-mode .tags-links a,
body.rx-dark-mode .rx-tag,
body.rx-dark-mode .rx-category {
  background: var(--rx-surface);
  color: var(--rx-link);
  border: 1px solid var(--rx-border-soft);
}

html[data-theme="dark"] .cat-links a:hover,
html[data-theme="dark"] .tags-links a:hover,
html[data-theme="dark"] .rx-tag:hover,
html[data-theme="dark"] .rx-category:hover,
body.rx-dark-mode .cat-links a:hover,
body.rx-dark-mode .tags-links a:hover,
body.rx-dark-mode .rx-tag:hover,
body.rx-dark-mode .rx-category:hover {
  background: var(--rx-primary-soft);
  color: var(--rx-primary-hover);
  border-color: var(--rx-primary);
}

/* =========================================================
   MODAL / POPUP / OFFCANVAS
========================================================= */

html[data-theme="dark"] .rx-modal,
html[data-theme="dark"] .rx-popup,
html[data-theme="dark"] .rx-offcanvas,
body.rx-dark-mode .rx-modal,
body.rx-dark-mode .rx-popup,
body.rx-dark-mode .rx-offcanvas {
  background: var(--rx-surface);
  color: var(--rx-text-soft);
  border: 1px solid var(--rx-border);
  box-shadow: var(--rx-shadow-lg);
}

html[data-theme="dark"] .rx-modal-backdrop,
body.rx-dark-mode .rx-modal-backdrop {
  background: rgba(0, 0, 0, 0.72);
}

/* =========================================================
   TOOLTIPS
========================================================= */

html[data-theme="dark"] .rx-tooltip,
body.rx-dark-mode .rx-tooltip {
  background: #020617;
  color: #f8fafc;
  border: 1px solid var(--rx-border-soft);
  box-shadow: var(--rx-shadow-md);
}

/* =========================================================
   SCROLLBAR
========================================================= */

html[data-theme="dark"],
body.rx-dark-mode {
  scrollbar-color: var(--rx-dark-scrollbar-thumb) var(--rx-dark-scrollbar-track);
}

html[data-theme="dark"] ::-webkit-scrollbar,
body.rx-dark-mode ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track,
body.rx-dark-mode ::-webkit-scrollbar-track {
  background: var(--rx-dark-scrollbar-track);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb,
body.rx-dark-mode ::-webkit-scrollbar-thumb {
  background: var(--rx-dark-scrollbar-thumb);
  border-radius: 999px;
  border: 3px solid var(--rx-dark-scrollbar-track);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
body.rx-dark-mode ::-webkit-scrollbar-thumb:hover {
  background: var(--rx-dark-scrollbar-thumb-hover);
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

html[data-theme="dark"] :focus-visible,
body.rx-dark-mode :focus-visible {
  outline: none;
  box-shadow: var(--rx-focus-ring);
}

html[data-theme="dark"] .screen-reader-text:focus,
body.rx-dark-mode .screen-reader-text:focus {
  background: var(--rx-primary);
  color: #020617;
}

/* =========================================================
   WORDPRESS ADMIN BAR FRONTEND COMPATIBILITY
========================================================= */

html[data-theme="dark"] #wpadminbar,
body.rx-dark-mode #wpadminbar {
  background: #020617;
}

html[data-theme="dark"] #wpadminbar a,
body.rx-dark-mode #wpadminbar a {
  color: #e2e8f0;
}

/* =========================================================
   EMBEDS / ADS / THIRD PARTY SAFE WRAPPERS
========================================================= */

html[data-theme="dark"] .rx-embed,
html[data-theme="dark"] .rx-ad-box,
html[data-theme="dark"] .rx-sponsored-box,
body.rx-dark-mode .rx-embed,
body.rx-dark-mode .rx-ad-box,
body.rx-dark-mode .rx-sponsored-box {
  background: var(--rx-surface);
  color: var(--rx-text-muted);
  border: 1px solid var(--rx-border-soft);
}

/* =========================================================
   UTILITY CLASSES
========================================================= */

html[data-theme="dark"] .rx-bg,
body.rx-dark-mode .rx-bg {
  background: var(--rx-bg) !important;
}

html[data-theme="dark"] .rx-bg-soft,
body.rx-dark-mode .rx-bg-soft {
  background: var(--rx-bg-soft) !important;
}

html[data-theme="dark"] .rx-surface,
body.rx-dark-mode .rx-surface {
  background: var(--rx-surface) !important;
}

html[data-theme="dark"] .rx-text,
body.rx-dark-mode .rx-text {
  color: var(--rx-text) !important;
}

html[data-theme="dark"] .rx-text-soft,
body.rx-dark-mode .rx-text-soft {
  color: var(--rx-text-soft) !important;
}

html[data-theme="dark"] .rx-text-muted,
body.rx-dark-mode .rx-text-muted {
  color: var(--rx-text-muted) !important;
}

html[data-theme="dark"] .rx-border,
body.rx-dark-mode .rx-border {
  border-color: var(--rx-border) !important;
}

/* =========================================================
   HIGH CONTRAST SUPPORT
========================================================= */

@media (prefers-contrast: more) {
  html[data-theme="dark"],
  body.rx-dark-mode {
    --rx-border: rgba(255, 255, 255, 0.55);
    --rx-border-soft: rgba(255, 255, 255, 0.35);
    --rx-text: #ffffff;
    --rx-text-soft: #f1f5f9;
    --rx-link: #bfdbfe;
    --rx-link-hover: #ffffff;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  html[data-theme="dark"] *,
  html[data-theme="dark"] *::before,
  html[data-theme="dark"] *::after,
  body.rx-dark-mode *,
  body.rx-dark-mode *::before,
  body.rx-dark-mode *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   PRINT SAFETY
   Print should stay clean and readable.
========================================================= */

@media print {
  html[data-theme="dark"] body,
  body.rx-dark-mode {
    background: #ffffff !important;
    color: #000000 !important;
  }

  html[data-theme="dark"] *,
  body.rx-dark-mode * {
    background: transparent !important;
    color: #000000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  html[data-theme="dark"] a,
  body.rx-dark-mode a {
    color: #000000 !important;
    text-decoration: underline;
  }
}

wp_enqueue_style(
    'rx-dark-mode',
    get_template_directory_uri() . '/assets/css/rx-dark-mode.css',
    array('rx-main'),
    wp_get_theme()->get('Version')
);

document.documentElement.setAttribute('data-theme', 'dark');

document.documentElement.setAttribute('data-theme', 'light');