/* Shared Dark/Light theme overrides. Does not alter page layout or game logic. */
:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="light"] body {
  background: #f4f6fb !important; color: #172033 !important;
  --bg:#f4f6fb; --panel:#ffffff; --panel2:#eef2f8; --card:#ffffff; --card2:#f0f4f9;
  --text:#172033; --ink:#172033; --muted:#5f6d82; --line:#dce3ed;
  --mint:#087f62; --blue:#1677bd; --orange:#a95a12; --ad-bg:#ffffff;
}
:root[data-theme="light"] .cch-site-header { background:#ffffff; color:#172033; border-bottom-color:#dce3ed; }
:root[data-theme="light"] .cch-brand { color:#172033; }
:root[data-theme="light"] .cch-brand-mark { background:#68efc0; color:#06271e; }
:root[data-theme="light"] .cch-brand-copy small,
:root[data-theme="light"] .cch-header-message { color:#5f6d82; }
:root[data-theme="light"] .cch-header-nav a { color:#34445b; }
:root[data-theme="light"] .cch-header-nav a:hover,
:root[data-theme="light"] .cch-header-nav a[aria-current="page"] { background:#e4f8f1; color:#087f62; }
:root[data-theme="light"] .cch-mode-pill { background:#f4f6fb; color:#172033; border-color:#dce3ed; }
:root[data-theme="light"] .topbar,
:root[data-theme="light"] .main-content>header,
:root[data-theme="light"] body>header:not(.topbar) { background:#ffffff !important; color:#172033 !important; border-color:#dce3ed !important; }
:root[data-theme="light"] .main-content>header a,
:root[data-theme="light"] body>header:not(.topbar) a { color:#24364d !important; }
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] .dashboard-card,
:root[data-theme="light"] .card,
:root[data-theme="light"] article,
:root[data-theme="light"] .content-card { color:#172033 !important; }
:root[data-theme="light"] .dashboard-card,
:root[data-theme="light"] .card,
:root[data-theme="light"] article,
:root[data-theme="light"] .content-card,
:root[data-theme="light"] .welcome-panel,
:root[data-theme="light"] .content-tile { background:#ffffff !important; border-color:#dce3ed !important; }
:root[data-theme="light"] .dashboard-card p,
:root[data-theme="light"] .card p,
:root[data-theme="light"] .hero p,
:root[data-theme="light"] .intro,
:root[data-theme="light"] .sub,
:root[data-theme="light"] .muted { color:#5f6d82 !important; }
:root[data-theme="light"] .central-ad { background:linear-gradient(110deg,#edf7f5,#eaf1fb) !important; border-color:#c8d9e8 !important; }
:root[data-theme="light"] .central-ad h2,
:root[data-theme="light"] .central-ad p { color:#172033 !important; }
:root[data-theme="light"] .ad-price { background:#ffffff !important; border-color:#dce3ed !important; }
:root[data-theme="light"] .ad-price span { color:#5f6d82 !important; }
:root[data-theme="light"] .ad-rail .ad,
:root[data-theme="light"] .side-ad { background:#ffffff !important; color:#34445b !important; border-color:#dce3ed !important; }
:root[data-theme="light"] .ad-rail .ad-icon,
:root[data-theme="light"] .ad-icon { background:#eaf1f8 !important; color:#087f62 !important; }
:root[data-theme="light"] .ad-rail .ad strong,
:root[data-theme="light"] .side-ad b { color:#172033 !important; }
:root[data-theme="light"] .ad-rail .ad a,
:root[data-theme="light"] .side-ad small { color:#5f6d82 !important; }
:root[data-theme="light"] .main-content input,
:root[data-theme="light"] .main-content textarea,
:root[data-theme="light"] .main-content select,
:root[data-theme="light"] input,
:root[data-theme="light"] textarea,
:root[data-theme="light"] select { background:#ffffff !important; color:#172033 !important; border-color:#cbd5e1 !important; }
:root[data-theme="light"] .main-content .board button,
:root[data-theme="light"] .main-content .cell { background:#f0f4f9 !important; color:#087f62 !important; border-color:#dce3ed !important; }
:root[data-theme="light"] footer,
:root[data-theme="light"] .site-footer { color:#667085 !important; }
:root[data-theme="light"] .site-footer a,
:root[data-theme="light"] footer a,
:root[data-theme="light"] .back,
:root[data-theme="light"] .secondary { color:#087f62 !important; }
/* Tic-Tac-Toe theme variables are switched without changing its grid or controls. */
:root[data-theme="light"] .game-card,
:root[data-theme="light"] .game-panel,
:root[data-theme="light"] .score-card,
:root[data-theme="light"] .content-tile { background:#ffffff !important; border-color:#dce3ed !important; color:#172033 !important; }
:root[data-theme="light"] .game-card p,
:root[data-theme="light"] .game-panel p,
:root[data-theme="light"] .tagline { color:#5f6d82 !important; }
.cch-mode-pill { cursor:pointer; font:inherit; }


/* Creator ad CTA: maintain readable contrast in the light theme. */
:root[data-theme="light"] .ad-rail .creator-ad a,
:root[data-theme="light"] .ad-rail .creator-ad a:visited {
  background: #087f62 !important;
  color: #ffffff !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
:root[data-theme="light"] .ad-rail .creator-ad a:hover {
  background: #066b53 !important;
  color: #ffffff !important;
}
/* Light theme: white text on central advertisement button */
:root[data-theme="light"] .central-ad .primary-btn,
:root[data-theme="light"] .central-ad .primary-btn:visited {
    color: #ffffff !important;
}
/* Light theme: white text on green action buttons */
:root[data-theme="light"] .central-ad .primary-btn,
:root[data-theme="light"] .central-ad .primary-btn:visited,
:root[data-theme="light"] .card .btn,
:root[data-theme="light"] .card .btn:visited {
    color: #ffffff !important;
    opacity: 1;
}
/* Dark theme: muted teal advertising button */
:root[data-theme="dark"] .main-content .central-ad .ad-price .primary-btn,
:root[data-theme="dark"] .main-content .central-ad .ad-price .primary-btn:visited {
    background-color: #0b665b !important;
    color: #ffffff !important;
    border-color: #0b665b !important;
}

:root[data-theme="dark"] .main-content .central-ad .ad-price .primary-btn:hover {
    background-color: #09564e !important;
    border-color: #09564e !important;
}