/* ============================================================
   CSA Prediction Engine theme for Obsidian Publish
   Derived from prediction-engine.csanalytics.io design tokens
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---------- Design tokens ---------- */
.theme-light {
  --csa-bg: #FAF7F2;
  --csa-bg-warm: #F4EEE2;
  --csa-bg-deep: #ECE4D2;
  --csa-ink: #0E0E0E;
  --csa-ink-muted: #5C584F;
  --csa-ink-faint: #8A8578;
  --csa-border: #DCD5C6;
  --csa-border-strong: #1A1A1A;
  --csa-red: #C8102E;
  --csa-red-deep: #8E0A1F;
  --csa-red-soft: #FBE7EA;

  --background-primary: var(--csa-bg);
  --background-primary-alt: var(--csa-bg);
  --background-secondary: var(--csa-bg);
  --background-secondary-alt: var(--csa-bg-warm);
  --background-modifier-border: var(--csa-border);
  --background-modifier-hover: var(--csa-bg-deep);
  --text-normal: var(--csa-ink);
  --text-muted: var(--csa-ink-muted);
  --text-faint: var(--csa-ink-faint);
  --text-accent: var(--csa-red);
  --text-accent-hover: var(--csa-red-deep);
  --text-selection: var(--csa-red-soft);
  --interactive-accent: var(--csa-red);
  --interactive-accent-hover: var(--csa-red-deep);
  --link-color: var(--csa-red);
  --link-color-hover: var(--csa-red-deep);
  --link-external-color: var(--csa-red);
  --link-external-color-hover: var(--csa-red-deep);
  --hr-color: var(--csa-border);
  --blockquote-border-color: var(--csa-red);
}

/* Dark theme: derived from the site's code-window palette */
.theme-dark {
  --csa-bg: #15130F;
  --csa-bg-warm: #1F1C17;
  --csa-bg-deep: #2C2924;
  --csa-ink: #E8E2D2;
  --csa-ink-muted: #9C9588;
  --csa-ink-faint: #7E7868;
  --csa-border: #2C2924;
  --csa-border-strong: #4D4942;
  --csa-red: #FF6B7E;
  --csa-red-deep: #C8102E;
  --csa-red-soft: #3A1520;

  --background-primary: var(--csa-bg);
  --background-primary-alt: var(--csa-bg-warm);
  --background-secondary: var(--csa-bg-warm);
  --background-secondary-alt: var(--csa-bg-deep);
  --background-modifier-border: var(--csa-border);
  --background-modifier-hover: var(--csa-bg-deep);
  --text-normal: var(--csa-ink);
  --text-muted: var(--csa-ink-muted);
  --text-faint: var(--csa-ink-faint);
  --text-accent: var(--csa-red);
  --text-accent-hover: var(--csa-red-deep);
  --text-selection: var(--csa-red-soft);
  --interactive-accent: var(--csa-red);
  --interactive-accent-hover: var(--csa-red-deep);
  --link-color: var(--csa-red);
  --link-color-hover: var(--csa-red-deep);
  --link-external-color: var(--csa-red);
  --link-external-color-hover: var(--csa-red-deep);
  --hr-color: var(--csa-border);
  --blockquote-border-color: var(--csa-red);
}

/* ---------- Typography ---------- */
body {
  --font-text: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-monospace: 'JetBrains Mono', ui-monospace, 'Menlo', monospace;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings: tight tracking, light weights, like the landing page */
h1, .inline-title, .page-header {
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.04;
}
h2 {
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.1;
}
h3, h4 {
  font-weight: 500;
  letter-spacing: -0.015em;
}
h5, h6 {
  font-family: var(--font-monospace);
  font-size: 0.72em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* Italics inside headings become the red accent, mirroring the site */
h1 em, h2 em, h3 em, .inline-title em {
  font-style: normal;
  color: var(--text-accent);
  font-weight: 500;
}

/* ---------- Code ---------- */
/* Code blocks styled as the site's dark code window (both themes) */
body {
  --code-background: #15130F;
  --code-normal: #E8E2D2;
  --code-comment: #7E7868;
  --code-keyword: #FF6B7E;
  --code-string: #D6B675;
  --code-function: #F4C16A;
  --code-property: #B5D6A0;
  --code-tag: #B5D6A0;
  --code-value: #E8E2D2;
  --code-punctuation: #9C9588;
}
.markdown-preview-view pre,
.markdown-rendered pre {
  background: #15130F;
  border: 1px solid var(--csa-border-strong);
  border-radius: 8px;
  box-shadow: 6px 6px 0 rgba(14, 14, 14, 0.9);
  color: #E8E2D2;
  line-height: 1.7;
}
.theme-dark .markdown-preview-view pre,
.theme-dark .markdown-rendered pre {
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5);
}
.markdown-preview-view pre code,
.markdown-rendered pre code {
  color: #E8E2D2;
}
pre .comment { font-style: italic; }

/* Inline code stays light and quiet */
.markdown-preview-view :not(pre) > code,
.markdown-rendered :not(pre) > code {
  background: var(--csa-bg-deep);
  color: var(--csa-red-deep);
  border-radius: 3px;
  padding: 0.1em 0.35em;
  font-size: 0.88em;
}
.theme-dark .markdown-preview-view :not(pre) > code,
.theme-dark .markdown-rendered :not(pre) > code {
  color: var(--csa-red);
}

/* ---------- Structure & details ---------- */
blockquote {
  border-left: 2px solid var(--csa-red);
  background: var(--csa-bg-warm);
  color: var(--text-muted);
  padding: 0.6em 1.2em;
  border-radius: 0 4px 4px 0;
}

hr {
  border: none;
  border-top: 1px solid var(--hr-color);
}

/* Tables: mono uppercase headers, thin rules, like .solution-list */
table {
  border-collapse: collapse;
}
th {
  font-family: var(--font-monospace);
  font-size: 0.72em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-normal);
  border-bottom: 1px solid var(--csa-border-strong);
  text-align: left;
}
td {
  border-bottom: 1px dashed var(--csa-border);
}
th, td {
  padding: 8px 12px;
}

/* Selection */
::selection { background: var(--text-selection); }

/* ---------- Publish chrome ---------- */
/* Sidebar / navigation */
.publish-sidebar,
.site-body-left-column {
  background: var(--csa-bg); /* #FAF7F2 — same as the page background */
  border-right: 1px solid var(--csa-border);
}
.site-body-left-column-site-name,
.site-header-text {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.tree-item-self:hover .tree-item-inner,
.nav-file-title:hover .nav-file-title-content,
.nav-folder-title:hover .nav-folder-title-content {
  color: var(--csa-red);
}
.tree-item-self.is-active .tree-item-inner {
  color: var(--csa-red);
  font-weight: 500;
}

/* Folder labels in mono caps, echoing the site's section labels */
.tree-item-self.mod-collapsible .tree-item-inner {
  font-family: var(--font-monospace);
  font-size: 0.78em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* Subtle paper grain, as on the landing page (delete this block if unwanted) */
.theme-light body::before,
.theme-light .published-container::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image: radial-gradient(circle at 1px 1px, rgba(14,14,14,0.06) 1px, transparent 0);
  background-size: 28px 28px;
}

/* Logo + title inline in the desktop sidebar (Cel's hand-tuned layout:
   80px logo, title pulled up alongside via negative margin).
   Mobile header is left untouched. */
.site-body-left-column-site-logo {
  display: flex;
  vertical-align: bottom;
  width: 80px;
  margin: 0 0 1px -10px;
  text-align: left;
  margin-right: 8px;
}
.site-body-left-column-site-logo img {
  max-height: 100px;
  width: auto;
  object-fit: contain;
  margin: 0;
}
.site-body-left-column-site-name {
  display: flex;
  vertical-align: middle;
  width: 225px;
  margin: -50px 0 0 60px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-align: left;
}

/* Links: no underline until hover, like the site */
.markdown-preview-view a,
.markdown-rendered a {
  text-decoration: none;
  transition: color 0.2s;
}
.markdown-preview-view a:hover,
.markdown-rendered a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}