/*
 * Memo Theme for Obsidian Publish
 * Inspired by heymemo.ai
 * A dark, minimal theme with warm copper accents
 */

/* ============================================
   FONT IMPORTS
   Using Space Grotesk as alternative to BDO Grotesk
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* ============================================
   ROOT VARIABLES (Shared with App)
   ============================================ */
body {
  /* Typography */
  --font-text-theme: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-interface-theme: 'Space Grotesk', -apple-system, sans-serif;
  --font-monospace-theme: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  --font-text-size: 16px;

  /* Base Colors - Pure Black Background */
  --color-base-00: #000000;
  --color-base-05: #050505;
  --color-base-10: #0a0a0a;
  --color-base-20: #0f0f0f;
  --color-base-25: #141414;
  --color-base-30: #1a1a1a;
  --color-base-35: #1f1f1f;
  --color-base-40: #2a2a2a;
  --color-base-50: #333333;
  --color-base-60: #444444;
  --color-base-70: #666666;
  --color-base-100: #888888;

  /* Semantic Colors */
  --background-primary: #000000;
  --background-primary-alt: #0a0a0a;
  --background-secondary: #0f0f0f;
  --background-secondary-alt: #141414;
  --background-modifier-hover: rgba(255, 255, 255, 0.05);
  --background-modifier-active-hover: rgba(255, 255, 255, 0.08);
  --background-modifier-border: rgba(255, 255, 255, 0.08);
  --background-modifier-border-hover: rgba(255, 255, 255, 0.12);
  --background-modifier-border-focus: rgba(255, 255, 255, 0.18);

  /* Text Colors */
  --text-normal: #ffffff;
  --text-muted: #888888;
  --text-faint: #666666;
  --text-accent: #C8956C;
  --text-accent-hover: #d4a57d;
  --text-on-accent: #000000;
  --text-selection: rgba(200, 149, 108, 0.3);
  --text-highlight-bg: rgba(200, 149, 108, 0.25);

  /* Accent Color - Warm Copper */
  --accent-h: 28;
  --accent-s: 43%;
  --accent-l: 60%;
  --interactive-accent: #C8956C;
  --interactive-accent-hover: #d4a57d;
  --interactive-accent-hsl: 28, 43%, 60%;
  --interactive-normal: #1a1a1a;
  --interactive-hover: #2a2a2a;

  /* Extended Colors */
  --color-red: #e5484d;
  --color-red-rgb: 229, 72, 77;
  --color-orange: #f5a623;
  --color-orange-rgb: 245, 166, 35;
  --color-yellow: #f5a623;
  --color-yellow-rgb: 245, 166, 35;
  --color-green: #30a46c;
  --color-green-rgb: 48, 164, 108;
  --color-cyan: #00a2a0;
  --color-cyan-rgb: 0, 162, 160;
  --color-blue: #0091ff;
  --color-blue-rgb: 0, 145, 255;
  --color-purple: #8b5cf6;
  --color-purple-rgb: 139, 92, 246;
  --color-pink: #d6409f;
  --color-pink-rgb: 214, 64, 159;

  /* Mono RGB */
  --mono-rgb-0: 0, 0, 0;
  --mono-rgb-100: 255, 255, 255;

  /* Cream accent color */
  --memo-cream: #F5F1EB;
  --memo-copper: #C8956C;
  --memo-copper-light: #d4a57d;
  --memo-border: rgba(255, 255, 255, 0.08);
  --memo-border-strong: rgba(255, 255, 255, 0.18);
}

/* ============================================
   PUBLISH-SPECIFIC VARIABLES
   ============================================ */
.published-container {
  /* Page Settings */
  --page-width: 720px;
  --page-padding: 24px;

  /* Page Title */
  --page-title-font: 'Space Grotesk', -apple-system, sans-serif;
  --page-title-color: #ffffff;
  --page-title-size: 2.5rem;
  --page-title-line-height: 1.1;
  --page-title-weight: 600;
  --page-title-style: normal;
  --page-title-variant: normal;

  /* Site Header */
  --header-height: 64px;
  --site-name-color: #ffffff;
  --site-name-color-hover: #C8956C;
  --site-name-font: 'Space Grotesk', -apple-system, sans-serif;
  --site-name-size: 1.25rem;
  --site-name-weight: 600;
  --site-menu-icon-color: #ffffff;
  --site-menu-icon-color-hover: #C8956C;
  --site-menu-icon-size: 24px;

  /* Logo */
  /* --logo-width: 32px;
  --logo-height: 32px;
  --logo-max-width: 120px;
  --logo-max-height: 40px;
  --logo-radius: 0px; */

  /* Component Titles (Backlinks, Graph, TOC) */
  --component-title-color: #888888;
  --component-title-font: 'Space Grotesk', -apple-system, sans-serif;
  --component-title-size: 0.75rem;
  --component-title-style: normal;
  --component-title-transform: uppercase;
  --component-title-variant: normal;
  --component-title-weight: 600;

  /* Outline / Table of Contents */
  --outline-heading-color: #888888;
  --outline-heading-color-hover: #ffffff;
  --outline-heading-color-active: #C8956C;
  --outline-heading-weight-active: 600;

  /* Graph */
  --graph-height: 300px;
}

/* ============================================
   HEADING STYLES
   ============================================ */
body {
  --heading-spacing: 2rem;
  --heading-formatting: #666666;

  /* H1 */
  --h1-color: #ffffff;
  --h1-font: 'Space Grotesk', -apple-system, sans-serif;
  --h1-size: 2rem;
  --h1-line-height: 1.2;
  --h1-style: normal;
  --h1-variant: normal;
  --h1-weight: 600;

  /* H2 */
  --h2-color: #ffffff;
  --h2-font: 'Space Grotesk', -apple-system, sans-serif;
  --h2-size: 1.5rem;
  --h2-line-height: 1.3;
  --h2-style: normal;
  --h2-variant: normal;
  --h2-weight: 600;

  /* H3 */
  --h3-color: #ffffff;
  --h3-font: 'Space Grotesk', -apple-system, sans-serif;
  --h3-size: 1.25rem;
  --h3-line-height: 1.4;
  --h3-style: normal;
  --h3-variant: normal;
  --h3-weight: 600;

  /* H4 */
  --h4-color: #ffffff;
  --h4-font: 'Space Grotesk', -apple-system, sans-serif;
  --h4-size: 1.125rem;
  --h4-line-height: 1.4;
  --h4-style: normal;
  --h4-variant: normal;
  --h4-weight: 600;

  /* H5 */
  --h5-color: #aaaaaa;
  --h5-font: 'Space Grotesk', -apple-system, sans-serif;
  --h5-size: 1rem;
  --h5-line-height: 1.5;
  --h5-style: normal;
  --h5-variant: normal;
  --h5-weight: 600;

  /* H6 */
  --h6-color: #888888;
  --h6-font: 'Space Grotesk', -apple-system, sans-serif;
  --h6-size: 0.875rem;
  --h6-line-height: 1.5;
  --h6-style: normal;
  --h6-variant: normal;
  --h6-weight: 600;
}

/* ============================================
   LINK STYLES
   ============================================ */
body {
  --link-color: #C8956C;
  --link-color-hover: #d4a57d;
  --link-decoration: none;
  --link-decoration-hover: underline;
  --link-external-color: #C8956C;
  --link-external-color-hover: #d4a57d;
  --link-external-decoration: none;
  --link-external-decoration-hover: underline;
  --link-unresolved-color: #666666;
  --link-unresolved-opacity: 0.7;
  --link-unresolved-decoration-style: dashed;
  --link-unresolved-decoration-color: #444444;
}

/* ============================================
   CODE & BLOCKQUOTE
   ============================================ */
body {
  /* Code */
  --code-background: #0f0f0f;
  --code-normal: #ffffff;
  --code-comment: #666666;
  --code-function: #C8956C;
  --code-important: #e5484d;
  --code-keyword: #8b5cf6;
  --code-operator: #888888;
  --code-property: #0091ff;
  --code-punctuation: #888888;
  --code-string: #30a46c;
  --code-tag: #8b5cf6;
  --code-value: #C8956C;

  /* Blockquote */
  --blockquote-background-color: #0a0a0a;
  --blockquote-border-color: #C8956C;
  --blockquote-border-thickness: 3px;
  --blockquote-color: #aaaaaa;
  --blockquote-font-style: normal;
  --blockquote-padding: 1rem 1.5rem;
}

/* ============================================
   CALLOUTS
   ============================================ */
body {
  --callout-border-width: 1px;
  --callout-border-opacity: 0.2;
  --callout-padding: 1rem 1.5rem;
  --callout-radius: 8px;
  --callout-blend-mode: normal;
  --callout-title-color: inherit;
  --callout-title-padding: 0;
  --callout-title-size: inherit;
  --callout-title-weight: 600;
  --callout-content-padding: 0;
  --callout-content-background: transparent;
  --callout-bug: var(--color-red-rgb);
  --callout-default: var(--color-blue-rgb);
  --callout-error: var(--color-red-rgb);
  --callout-example: var(--color-purple-rgb);
  --callout-fail: var(--color-red-rgb);
  --callout-important: var(--color-cyan-rgb);
  --callout-info: var(--color-blue-rgb);
  --callout-question: var(--color-yellow-rgb);
  --callout-success: var(--color-green-rgb);
  --callout-summary: var(--color-cyan-rgb);
  --callout-tip: var(--color-cyan-rgb);
  --callout-todo: var(--color-blue-rgb);
  --callout-warning: var(--color-orange-rgb);
  --callout-quote: 200, 149, 108;
}

/* Custom callout styling */
.callout {
  background-color: #0f0f0f;
  border-color: rgba(255, 255, 255, 0.1);
}

.callout[data-callout="quote"] {
  background-color: transparent;
  border-left: 3px solid #C8956C;
  border-top: none;
  border-right: none;
  border-bottom: none;
}

/* ============================================
   TABLES
   ============================================ */
body {
  --table-background: transparent;
  --table-border-width: 1px;
  --table-border-color: rgba(255, 255, 255, 0.08);
  --table-header-background: #0a0a0a;
  --table-header-background-hover: #141414;
  --table-header-color: #ffffff;
  --table-header-font: inherit;
  --table-header-size: inherit;
  --table-header-weight: 600;
  --table-header-border-width: 1px;
  --table-header-border-color: rgba(255, 255, 255, 0.12);
  --table-row-background-hover: rgba(255, 255, 255, 0.03);
  --table-row-alt-background: #050505;
  --table-row-alt-background-hover: rgba(255, 255, 255, 0.05);
  --table-column-alt-background: transparent;
  --table-column-first-border-width: 1px;
  --table-column-last-border-width: 1px;
  --table-row-last-border-width: 1px;
  --table-cell-padding-x: 1rem;
  --table-cell-padding-y: 0.75rem;
  --table-text-size: inherit;
  --table-text-color: inherit;
  --table-numbers-font-feature-settings: "tnum";
  --table-row-background: transparent;
  --table-row-dragging-background: #1a1a1a;
}

/* ============================================
   LISTS
   ============================================ */
body {
  --list-indent: 1.5rem;
  --list-spacing: 0.25rem;
  --list-marker-color: #C8956C;
  --list-marker-color-hover: #d4a57d;
  --list-marker-color-collapsed: #C8956C;
  --list-bullet-radius: 50%;
  --list-bullet-size: 6px;
  --list-bullet-transform: none;
  --list-numbered-style: decimal;
}

/* ============================================
   TAGS
   ============================================ */
body {
  --tag-background: rgba(200, 149, 108, 0.15);
  --tag-background-hover: rgba(200, 149, 108, 0.25);
  --tag-border: 1px solid rgba(200, 149, 108, 0.3);
  --tag-border-hover: 1px solid rgba(200, 149, 108, 0.5);
  --tag-color: #C8956C;
  --tag-color-hover: #d4a57d;
  --tag-decoration: none;
  --tag-decoration-hover: none;
  --tag-font: inherit;
  --tag-font-weight: 500;
  --tag-padding-x: 0.5rem;
  --tag-padding-y: 0.125rem;
  --tag-radius: 4px;
  --tag-size: 0.875rem;
}

/* ============================================
   HORIZONTAL RULE
   ============================================ */
body {
  --hr-color: rgba(255, 255, 255, 0.08);
  --hr-thickness: 1px;
}

/* ============================================
   EMBEDS
   ============================================ */
body {
  --embed-background: #0a0a0a;
  --embed-border-left: 2px solid #C8956C;
  --embed-border-right: none;
  --embed-border-top: none;
  --embed-border-bottom: none;
  --embed-padding: 1rem 1.5rem;
  --embed-font-style: inherit;
  --embed-blockquote-height: 2px;
  --embed-blockquote-color: rgba(255, 255, 255, 0.08);
  --embed-title-color: #ffffff;
  --embed-title-font: 'Space Grotesk', -apple-system, sans-serif;
  --embed-title-weight: 600;
  --embed-title-size: 1.125rem;
  --embed-title-line-height: 1.4;
  --embed-title-style: normal;
  --embed-title-variant: normal;
}

/* ============================================
   PUBLISH-SPECIFIC STYLES
   ============================================ */

/* Main container background */
.published-container {
  background-color: #000000;
  color: #ffffff;
}

/* Site header styling */
.site-header {
  background-color: #000000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-header .site-name {
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Navigation sidebar */
.site-nav {
  background-color: #000000;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.site-nav .nav-item {
  color: #888888;
  font-weight: 400;
  transition: color 0.2s ease;
}

.site-nav .nav-item:hover {
  color: #ffffff;
}

.site-nav .nav-item.is-active {
  color: #C8956C;
  font-weight: 500;
}

/* Search styling */
.search-input {
  background-color: #0f0f0f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #ffffff;
}

.search-input:focus {
  border-color: #C8956C;
  outline: none;
}

.search-input::placeholder {
  color: #666666;
}

/* Graph view */
.graph-view {
  background-color: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

/* Backlinks */
.backlinks {
  background-color: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 1rem;
}

.backlinks .backlink-item {
  color: #888888;
  transition: color 0.2s ease;
}

.backlinks .backlink-item:hover {
  color: #ffffff;
}

/* Outline / TOC */
.outline {
  background-color: transparent;
}

.outline .outline-item {
  color: #888888;
  font-size: 0.875rem;
  transition: color 0.2s ease;
}

.outline .outline-item:hover {
  color: #ffffff;
}

.outline .outline-item.is-active {
  color: #C8956C;
  font-weight: 600;
}

/* Footer */
.site-footer {
  background-color: #000000;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #666666;
  font-size: 0.875rem;
}

.site-footer a {
  color: #888888;
  transition: color 0.2s ease;
}

.site-footer a:hover {
  color: #C8956C;
}

/* ============================================
   CONTENT STYLING
   ============================================ */

/* Main content area */
.markdown-preview-view {
  background-color: #000000;
  color: #ffffff;
  line-height: 1.7;
}

/* Paragraphs */
.markdown-preview-view p {
  margin-bottom: 1.25rem;
}

/* Emphasis (italic) - used for accent words like heymemo.ai */
.markdown-preview-view em {
  color: #C8956C;
  font-style: italic;
}

/* Strong/Bold */
.markdown-preview-view strong {
  color: #ffffff;
  font-weight: 600;
}

/* Links in content */
.markdown-preview-view a {
  color: #C8956C;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.markdown-preview-view a:hover {
  color: #d4a57d;
  border-bottom-color: #d4a57d;
}

/* External links */
.markdown-preview-view a.external-link {
  color: #C8956C;
}

.markdown-preview-view a.external-link:hover {
  color: #d4a57d;
}

/* Headings in content */
.markdown-preview-view h1 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.markdown-preview-view h2 {
  margin-top: 2rem;
  margin-bottom: 0.875rem;
  letter-spacing: -0.01em;
}

.markdown-preview-view h3 {
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}

.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6 {
  margin-top: 1.5rem;
  margin-bottom: 0.625rem;
}

/* Code blocks */
.markdown-preview-view pre {
  background-color: #0f0f0f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 1rem;
}

.markdown-preview-view code {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  padding: 0.125rem 0.375rem;
  font-size: 0.875em;
}

.markdown-preview-view pre code {
  background-color: transparent;
  padding: 0;
}

/* Blockquotes */
.markdown-preview-view blockquote {
  background-color: #0a0a0a;
  border-left: 3px solid #C8956C;
  border-radius: 0 8px 8px 0;
  margin: 1.5rem 0;
  padding: 1rem 1.5rem;
  color: #aaaaaa;
}

.markdown-preview-view blockquote p:last-child {
  margin-bottom: 0;
}

/* Tables */
.markdown-preview-view table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  overflow: hidden;
  margin: 1.5rem 0;
}

.markdown-preview-view th {
  background-color: #0a0a0a;
  color: #ffffff;
  font-weight: 600;
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.markdown-preview-view td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.markdown-preview-view tr:last-child td {
  border-bottom: none;
}

.markdown-preview-view tr:nth-child(even) {
  background-color: #050505;
}

/* Lists */
.markdown-preview-view ul,
.markdown-preview-view ol {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.markdown-preview-view li {
  margin-bottom: 0.375rem;
}

.markdown-preview-view ul > li::marker {
  color: #C8956C;
}

/* Task lists */
.markdown-preview-view .task-list-item-checkbox {
  accent-color: #C8956C;
}

/* Tags */
.markdown-preview-view a.tag {
  background-color: rgba(200, 149, 108, 0.15);
  border: 1px solid rgba(200, 149, 108, 0.3);
  border-radius: 4px;
  color: #C8956C;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.125rem 0.5rem;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.markdown-preview-view a.tag:hover {
  background-color: rgba(200, 149, 108, 0.25);
  border-color: rgba(200, 149, 108, 0.5);
  color: #d4a57d;
}

/* Horizontal rule */
.markdown-preview-view hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 2rem 0;
}

/* Images */
.markdown-preview-view img {
  border-radius: 8px;
}

/* Embeds */
.markdown-preview-view .markdown-embed {
  background-color: #0a0a0a;
  border-left: 2px solid #C8956C;
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.5rem;
}

/* Callouts */
.markdown-preview-view .callout {
  border-radius: 8px;
  margin: 1.5rem 0;
}

.markdown-preview-view .callout-title {
  font-weight: 600;
}

.markdown-preview-view .callout-icon {
  color: #C8956C;
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */
body {
  --scrollbar-active-thumb-bg: rgba(255, 255, 255, 0.2);
  --scrollbar-bg: transparent;
  --scrollbar-thumb-bg: rgba(255, 255, 255, 0.1);
  --scrollbar-width: 8px;
  --scrollbar-height: 8px;
}

/* Webkit scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Tablet breakpoint */
@media (max-width: 1000px) {
  .published-container {
    --page-padding: 20px;
  }

  body {
    --h1-size: 1.75rem;
    --h2-size: 1.375rem;
    --h3-size: 1.125rem;
  }
}

/* Mobile breakpoint */
@media (max-width: 750px) {
  .published-container {
    --page-padding: 16px;
    --page-title-size: 1.75rem;
  }

  body {
    --font-text-size: 15px;
    --h1-size: 1.5rem;
    --h2-size: 1.25rem;
    --h3-size: 1.125rem;
    --h4-size: 1rem;
  }

  .site-header {
    --header-height: 56px;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  .published-container {
    background-color: #ffffff;
    color: #000000;
  }

  .site-header,
  .site-nav,
  .site-footer,
  .outline,
  .graph-view,
  .backlinks {
    display: none;
  }

  .markdown-preview-view {
    background-color: #ffffff;
    color: #000000;
  }
}

/* ============================================
   ANIMATIONS & TRANSITIONS
   ============================================ */

/* Smooth transitions for interactive elements */
a,
button,
.nav-item,
.outline-item,
.backlink-item {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* Focus styles for accessibility */
a:focus-visible,
button:focus-visible,
.search-input:focus-visible {
  outline: 2px solid #C8956C;
  outline-offset: 2px;
}

/* Selection color */
::selection {
  background-color: rgba(200, 149, 108, 0.3);
  color: #ffffff;
}