/* Sangai Express global display-mode tokens.
 * Load this after public.css and all page-specific stylesheets.
 * Values follow the approved prototype's grayscale dark palette.
 */
:root {
  color-scheme: light;
  --primary: #222222;
  --primary-dark: #3A3A3A;
  --primary-mid: #555555;
  --primary-light: #888888;
  --primary-pale: #CCCCCC;
  --gold: #D4A017;
  --gold-tint: #FFFDF5;
  --gold-border: #E8D580;
  --breaking: #9F3C3B;
  --success: #27AE60;
  --bg-page: #FAFAFA;
  --bg-card: #FFFFFF;
  --bg-alt: #F5F5F5;
  --bg-image: #E2E5EB;
  --border: #E0E0E0;
  --border-light: #F0F0F0;
  --border-pale: #F5F5F5;
  --text-primary: #1A1A1A;
  --text-secondary: #555555;
  --text-muted: #888888;
  --text-faded: #AAAAAA;
  --shadow-card: 0 5px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.05);
  --shadow-hover: 0 4px 16px rgba(0,0,0,.08);
  --shadow-fab: 0 4px 16px rgba(0,0,0,.18), 0 2px 4px rgba(0,0,0,.12);
}

:root[data-mode="dark"] {
  color-scheme: dark;
  --primary: #E8E8E8;
  --primary-dark: #C8C8C8;
  --primary-mid: #A8A8A8;
  --primary-light: #888888;
  --primary-pale: #444444;
  --gold: #E8A838;
  --gold-tint: #2A2218;
  --gold-border: #5A4818;
  --breaking: #C84844;
  --success: #27AE60;
  --bg-page: #0F0F0F;
  --bg-card: #1A1A1A;
  --bg-alt: #222222;
  --bg-image: #2A2A2A;
  --border: #3A3A3A;
  --border-light: #2A2A2A;
  --border-pale: #1E1E1E;
  --text-primary: #E8E8E8;
  --text-secondary: #B8B8B8;
  --text-muted: #888888;
  --text-faded: #666666;
  --shadow-card: 0 1px 3px rgba(0,0,0,.60), 0 1px 0 rgba(0,0,0,.80);
  --shadow-hover: 0 4px 16px rgba(0,0,0,.50);
  --shadow-fab: 0 4px 16px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.35);
}

html,
body {
  min-height: 100%;
  background-color: var(--bg-page, #FAFAFA);
  color: var(--text-primary, #1A1A1A);
}

body,
#mainContent,
#mainContent > .container {
  background-color: var(--bg-page, #FAFAFA);
  color: var(--text-primary, #1A1A1A);
  transition: background-color .2s ease, color .2s ease;
}

.header-wrap,
.site-search {
  background-color: var(--bg-card, #FFFFFF);
  color: var(--text-primary, #1A1A1A);
}

.site-search input,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  background-color: var(--bg-card, #FFFFFF);
  border-color: var(--border, #E0E0E0);
  color: var(--text-primary, #1A1A1A);
}

:root[data-mode="dark"] .profile-section,
:root[data-mode="dark"] .profile-stat,
:root[data-mode="dark"] .profile-dialog,
:root[data-mode="dark"] .saved-item:not(.premium),
:root[data-mode="dark"] .saved-side-card,
:root[data-mode="dark"] .saved-tip,
:root[data-mode="dark"] .saved-load-more,
:root[data-mode="dark"] .article-page .sidebar-card,
:root[data-mode="dark"] .article-page .ad-slot,
:root[data-mode="dark"] .subscription-onboarding .ob-card,
:root[data-mode="dark"] .subscription-onboarding .ob-newsletter,
:root[data-mode="dark"] .subscription-onboarding .ob-topic-pill,
:root[data-mode="dark"] .subscription-onboarding .ob-select {
  background-color: var(--bg-card, #1A1A1A);
  color: var(--text-primary, #E8E8E8);
  border-color: var(--border, #3A3A3A);
}

:root[data-mode="dark"] .saved-item.premium {
  background-color: var(--gold-tint, #2A2218);
  border-color: var(--gold-border, #5A4818);
}

:root[data-mode="dark"] .saved-item.read {
  background-color: var(--bg-alt, #222222);
}

:root[data-mode="dark"] .saved-tip,
:root[data-mode="dark"] .saved-empty,
:root[data-mode="dark"] .offline-note,
:root[data-mode="dark"] .stats-tile,
:root[data-mode="dark"] .subscription-page .trust-badges,
:root[data-mode="dark"] .subscription-page .faq-strip,
:root[data-mode="dark"] .article-page .pull-quote,
:root[data-mode="dark"] .article-page .yt-brief,
:root[data-mode="dark"] .profile-page .profile-row-icon {
  background-color: var(--bg-alt, #222222);
  border-color: var(--border, #3A3A3A);
}

:root[data-mode="dark"] .profile-row,
:root[data-mode="dark"] .profile-row-label,
:root[data-mode="dark"] .saved-item-title,
:root[data-mode="dark"] .suggested-title,
:root[data-mode="dark"] .article-page .article-body,
:root[data-mode="dark"] .article-page .article-headline,
:root[data-mode="dark"] .subscription-page .plan-basic {
  color: var(--text-primary, #E8E8E8);
}

:root[data-mode="dark"] .profile-row,
:root[data-mode="dark"] .profile-section,
:root[data-mode="dark"] .saved-item,
:root[data-mode="dark"] .saved-side-card,
:root[data-mode="dark"] .subscription-page .trust-badges,
:root[data-mode="dark"] .subscription-page .faq-strip {
  border-color: var(--border, #3A3A3A);
}

:root[data-mode="dark"] .profile-row-action:hover,
:root[data-mode="dark"] .profile-row[href]:hover {
  background-color: var(--bg-alt, #222222);
}

/* Keep intentional editorial dark surfaces (masthead hero, subscription CTA,
   onboarding header, and YouTube preview) dark in both display modes. */

:root[data-mode="dark"] .subscription-onboarding .ob-topic-pill.is-selected {
  background: var(--ob-ink, #222222);
  border-color: var(--ob-ink, #222222);
  color: #FFFFFF;
}

:root[data-mode="dark"] .subscription-onboarding .ob-button-primary {
  background: var(--ob-ink, #222222);
  border-color: var(--ob-ink, #222222);
  color: #FFFFFF;
}