/* =============================================
   DARK MODE - READING EXPERIENCE
   Derived from light mode with adjustments
   ============================================= */

body.dark-mode {
  /* === COLORS === */
  --bg-primary: #1C1C1E;
  --bg-secondary: #2C2C2E;
  --bg-highlight: #1E3A5F;
  --bg-code: #252526;

  --text-primary: #E8E8E8;
  --text-heading: #F5F5F5;
  --text-secondary: #A0A0A0;
  --text-muted: #787878;

  --accent-primary: #60A5FA;
  --accent-hover: #93C5FD;
  --border-light: #3A3A3C;
  --border-medium: #48484A;

  /* === TILE STYLING (Dark Mode) === */
  --sg-card: #1C1C1E;           /* Tile background - same as page */
  --sg-border: #3A3A3C;         /* Tile border - dark gray */
  --sg-bg: #1C1C1E;             /* Page background - dark gray */

  /* === TYPOGRAPHY ADJUSTMENTS === */
  --font-weight-body: 500;      /* +100 for halation compensation */
  --font-weight-heading: 700;   /* +100 */
  --font-weight-ui: 600;        /* +100 */

  --line-height-body-en: 1.75;  /* +0.05 for breathing room */
  --line-height-body-hi: 1.85;  /* +0.05 */
  --line-height-heading: 1.35;  /* +0.05 */

  /* === PAGE & TILE BACKGROUNDS === */
  background: #1C1C1E !important;
}

/* === DARK MODE: PAGE BACKGROUND === */
body.dark-mode {
  background: #1C1C1E !important;
}

/* === DARK MODE: TILE BACKGROUNDS === */
body.dark-mode .article-tile,
body.dark-mode .article-tile.expanded {
  background: #1C1C1E !important;
  border-color: #3A3A3C !important;
}

/* === DARK MODE: TEXT COLORS === */
body.dark-mode .article-title {
  color: #F5F5F5 !important;
}

body.dark-mode .question {
  color: #F5F5F5 !important;
}

body.dark-mode .answer {
  color: #E8E8E8 !important;
}

body.dark-mode .tags,
body.dark-mode .eeat-container,
body.dark-mode .eeat-container * {
  color: #A0A0A0 !important;
}

body.dark-mode .prelude-title,
body.dark-mode .prelude-body {
  color: #E8E8E8 !important;
}

/* === DARK MODE: RIBBONS === */
body.dark-mode .source-ribbon,
body.dark-mode .usability-ribbon {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* === DARK MODE: HIGHLIGHT PALETTE === */
body.dark-mode .highlight-palette {
  background: #2C2C2E !important;
  border-color: #3A3A3C !important;
}

/* === HIGHLIGHT BOXES (DARK) === */
body.dark-mode .article-content .key-fact,
body.dark-mode .article-content .important-box {
  background-color: var(--bg-highlight);
  border-left-color: var(--accent-primary);
  color: #A8C5E6; /* Pale blue, softer than pure white */
}

/* === PULL QUOTES (DARK) === */
body.dark-mode .article-content .pull-quote,
body.dark-mode .article-content blockquote {
  color: var(--text-heading);
  border-left-color: var(--accent-primary);
}

/* === IMAGE TREATMENT (DARK) === */
body.dark-mode .article-content img {
  filter: brightness(0.9);
  border: 1px solid var(--border-light);
}

/* === CODE BLOCKS (DARK) === */
body.dark-mode .article-content code,
body.dark-mode .article-content pre {
  background-color: var(--bg-code);
  border: 1px solid var(--border-light);
}

/* === TEXT HIGHLIGHT COLORS (DARK) === */
/* Solid dark colors - subtle glow effect, text always readable */
body.dark-mode .highlight-yellow {
  background-color: #3d3820 !important;  /* Dark gold */
}

body.dark-mode .highlight-green {
  background-color: #253d1e !important;  /* Dark sage */
}

body.dark-mode .highlight-blue {
  background-color: #2d1e3d !important;  /* Dark lavender */
}

body.dark-mode .highlight-pink {
  background-color: #3d2820 !important;  /* Dark peach */
}

body.dark-mode .highlight-shared {
  background-color: #1e3d3d !important;  /* Dark teal */
  border-bottom: 2px dashed #26a69a !important;
}