/* ==========================================
   LIGHT / MID-DARK THEME PALETTES
   ========================================== */

/* 1. Light Mode (Base Variables) */
:root {
  --cu-bg-main: #ffffff;
  --cu-bg-elevated: #f3f4f6;
  --cu-text-main: #1a1a1a;
  --cu-text-muted: #666666;
  --cu-border: #e5e7eb;
  --cu-header-bg: #ffffff;
}

/* 2. Mid-Dark Mode Variables (#121212) */
html[data-theme="dark"] {
  --cu-bg-main: #121212;
  --cu-bg-elevated: #1e1e1e;
  --cu-text-main: #e4e4e7;
  --cu-text-muted: #a1a1aa;
  --cu-border: #2d2d2d;
  --cu-header-bg: #09090b;

  /* 
   * THE MAGIC TRICK: Hijack Olivero's native CSS variables!
   * We redefine what Olivero thinks "white" and "black" are.
   */
  --color--white: var(--cu-bg-main) !important;
  --color--gray-100: var(--cu-bg-elevated) !important;
  --color--gray-5: var(--cu-text-main) !important; /* Olivero's Black */
  --color-text-neutral-loud: var(--cu-text-main) !important;
  --color-text-neutral-medium: var(--cu-text-main) !important;
  --color-text-neutral-soft: var(--cu-text-muted) !important;
}

/* ==========================================
   GLOBAL THEME APPLICATION
   ========================================== */

/* 
 * Nuke any hardcoded white backgrounds on Olivero's structural divs
 * just in case they aren't using the CSS variables.
 */
html[data-theme="dark"] body,
html[data-theme="dark"] .site-wrapper,
html[data-theme="dark"] .layout-main-wrapper,
html[data-theme="dark"] .page-wrapper,
html[data-theme="dark"] #main-wrapper,
html[data-theme="dark"] #page-wrapper {
  background-color: var(--cu-bg-main) !important;
}

/* Header isolation */
html[data-theme="dark"] #site-header {
  background-color: var(--cu-header-bg) !important;
  border-bottom: 1px solid var(--cu-border) !important;
}

/* Ensure links pop in dark mode */
html[data-theme="dark"] a {
  color: #60a5fa !important;
}

/* Grid Card specific fixes */
html[data-theme="dark"] article.node--view-mode-grid-card .node__author-image img {
  border: 2px solid var(--cu-border) !important;
}

/* ==========================================
   TOGGLE BUTTON STYLING
   ========================================== */
#theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  margin-top: 4px;
  border-radius: 20px;
  background-color: var(--cu-bg-elevated);
  color: var(--cu-text-main);
  border: 1px solid var(--cu-border);
  font-weight: 600;
  cursor: pointer;
}

#theme-toggle-btn:hover {
  background-color: var(--cu-border);
}

/* ==========================================
   SITE BRANDING (LOGO & SLOGAN) OVERRIDES
   ========================================== */

/* 1. Nuke the blue box, background images, and borders */
.site-branding,
.block-system-branding-block,
.region-hero {
  background: transparent !important;
  background-image: none !important; /* Kills Olivero's SVG header curves */
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Kills the background image on the main header wrapper just in case */
#site-header {
  background-image: none !important;
}

/* 2. Style the Site Name (The "Logo") */
.site-branding__name {
  margin: 0 !important;
}

.site-branding__name a {
  color: var(--cu-text-main) !important;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1.75rem !important; 
  font-weight: 800 !important;   /* Extra bold for that tech/tube feel */
  letter-spacing: -1px;          /* Tighten the letters slightly */
  text-decoration: none !important;
  display: block;
}

/* 3. Style the Slogan */
.site-branding__slogan {
  color: var(--cu-text-muted) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  margin-top: 2px !important;
  padding: 0 !important;
}