/* ============== THEME TOKENS ============== */
/* Light defaults */
:root {
  --bg-image: url('https://portal.sharonai.cloud/static/saish.jpg');

  /* Page + panels */
  --page-bg: #f5f7fb;
  --panel-bg: #ffffff;

  /* Text */
  --text: #0f172a;
  --text-inverse: #ffffff;
  --text-tertiary: #475569;

  /* Headings */
  --heading: #0f172a;        /* dark slate for light mode */

  /* Borders */
  --border-tertiary: transparent;

  /* UI specifics */
  --dropdown-text: #000000;

  /* Background overlay */
  --bg-overlay: rgba(255,255,255,0.0);
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --page-bg: #0b1220;
    --panel-bg: #121826;
    --text: #e5e7eb;
    --text-inverse: #111827;
    --text-tertiary: #94a3b8;
    --heading: #f1f5f9;      /* much lighter headings */
    --border-tertiary: transparent;
    --dropdown-text: #e5e7eb;
    --bg-overlay: rgba(0,0,0,0.35);
  }
}

html.dark, body.dark, html[data-theme="dark"], body[data-theme="dark"] {
  --page-bg: #0b1220;
  --panel-bg: #121826;
  --text: #e5e7eb;
  --text-inverse: #111827;
  --text-tertiary: #94a3b8;
  --heading: #f1f5f9;        /* force light headings */
  --border-tertiary: transparent;
  --dropdown-text: #e5e7eb;
  --bg-overlay: rgba(0,0,0,0.35);
}

/* ============== THEMED ELEMENTS ============== */

.sp-search-container {
  background-color: transparent;
  margin-top: 10px;
  margin-bottom: -20px;
}

.sp-relative > .sp-container {
  border-radius: 8px;
  background-color: var(--panel-bg) !important;
  padding: 20px;
}

body {
  background:
    linear-gradient(var(--bg-overlay), var(--bg-overlay)),
    var(--bg-image) no-repeat center/cover fixed;
  background-color: var(--page-bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue",
               Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji" !important;
}

/* Headings - consistent color across modes */
h1, h2, h3, h4, h5, h6,
.sp-heading, .sp-title, .sp-page-title {
  color: var(--heading) !important;
  font-weight: 600;
}
.sharonai-subnav > div > a {
  color: #0f172a; /* dark text for light mode */
}

/* Dark mode variants */
@media (prefers-color-scheme: dark) {
  .sharonai-subnav {
    color: #f1f5f9; /* light text for dark mode */
  }
}
/* Secondary text */
.sp-grow > .sp-text-tertiary {
  color: var(--text-tertiary) !important;
}

.sp-border-tertiary {
  border-top: 0px;
}

.sp-search-container > .sp-container {
  border-radius: 8px;
  background-color: var(--panel-bg) !important;
  padding: 20px 20px 30px 20px;
}

.sp-sticky {
  padding-top: 10px;
  padding-bottom: 10px;
}

.sp-sticky > .sp-container {
  padding-right: 10px;
  padding-left: 10px;
}

.sp-dropdown-container > .sp-action {
  font-weight: 500;
  font-size: 14px;
  color: var(--dropdown-text);
}

.sp-dropdown-container > .sp-action > .fas {
  display: none !important;
}

.sp-action > .sp-avatar {
  display: none !important;
}

a, .sp-link {
  color: inherit;
}