/* Warm Teal Theme for Obsidian Publish */
/* Soft warm backgrounds with deep teal accents */

/* Import Crimson Pro font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

/* Set root font size - this is what rem units calculate from */
html {
  font-size: 22px !important; /* Base size for desktop */
}

/* Smaller base size for mobile/tablet */
@media (max-width: 768px) {
  html {
    font-size: 19px !important;
  }
}

/* Apply font globally with rem-based sizing */
body {
  --font-text-theme: 'Crimson Pro', Georgia, serif;
  --font-interface-theme: 'Crimson Pro', Georgia, serif;
  --font-text-size: 22px !important; /* Override Obsidian's default variable */
  font-size: 1rem !important; /* Equals html font-size: 22px on desktop, 19px on mobile */
  line-height: 1.6;
}

/* Force markdown content specifically - this is what Obsidian uses for rendered notes */
.markdown-rendered {
  font-size: 22px !important;
  line-height: 1.6 !important;
}

@media (max-width: 768px) {
  .markdown-rendered {
    font-size: 19px !important;
  }
}

/* Light mode - warm beige with teal accents */
.theme-light {
  /* Main backgrounds - soft warm beige */
  --background-primary: #f5f3f0;
  --background-primary-alt: #eeebe6;
  --background-secondary: #e8e4dd;
  --background-secondary-alt: #e0dcd3;
  
  /* Hover and border states */
  --background-modifier-hover: rgba(42, 125, 125, 0.08);
  --background-modifier-active-hover: rgba(42, 125, 125, 0.12);
  --background-modifier-border: #d4cfc5;
  --background-modifier-border-hover: #c4bfb5;
  --background-modifier-border-focus: #2a7d7d;
  
  /* Text colors */
  --text-normal: #2d2d2d;
  --text-muted: #666666;
  --text-faint: #999999;
  
  /* Deep teal accent */
  --text-accent: #2a7d7d;
  --text-accent-hover: #3d9999;
  --interactive-accent: #2a7d7d;
  --interactive-accent-hover: #3d9999;
  --interactive-accent-rgb: 42, 125, 125;
  
  /* Links - teal tones */
  --link-color: #2a7d7d;
  --link-color-hover: #3d9999;
  --link-external-color: #2a7d7d;
  --link-external-color-hover: #3d9999;
  --link-unresolved-color: #6b9999;
  
  /* Tags */
  --tag-color: #2a7d7d;
  --tag-background: rgba(42, 125, 125, 0.1);
  --tag-background-hover: rgba(42, 125, 125, 0.15);
  
  /* UI elements */
  --interactive-normal: #e8e4dd;
  --interactive-hover: #ddd7cc;
  
  /* Code blocks */
  --code-background: #e8e4dd;
  --code-normal: #2d2d2d;
  
  /* Selection */
  --text-selection: rgba(42, 125, 125, 0.2);
  
  /* Blockquotes and callouts */
  --blockquote-border: #2a7d7d;
  --callout-color: #2a7d7d;
  
  /* Scrollbars */
  --scrollbar-bg: rgba(0, 0, 0, 0.05);
  --scrollbar-thumb-bg: rgba(0, 0, 0, 0.15);
  --scrollbar-active-thumb-bg: rgba(42, 125, 125, 0.3);
}

/* Dark mode - warm dark with teal accents */
.theme-dark {
  /* Dark backgrounds with warm undertones */
  --background-primary: #2b2621;
  --background-primary-alt: #332f29;
  --background-secondary: #3a3630;
  --background-secondary-alt: #433e36;
  
  /* Hover and border states */
  --background-modifier-hover: rgba(61, 153, 153, 0.08);
  --background-modifier-active-hover: rgba(61, 153, 153, 0.12);
  --background-modifier-border: #4a453d;
  --background-modifier-border-hover: #5a554d;
  --background-modifier-border-focus: #3d9999;
  
  /* Text colors */
  --text-normal: #e8e4dd;
  --text-muted: #a39a8c;
  --text-faint: #736d62;
  
  /* Lighter teal for dark mode */
  --text-accent: #4db8b8;
  --text-accent-hover: #6dcccc;
  --interactive-accent: #4db8b8;
  --interactive-accent-hover: #6dcccc;
  --interactive-accent-rgb: 77, 184, 184;
  
  /* Links - brighter teal for dark mode */
  --link-color: #4db8b8;
  --link-color-hover: #6dcccc;
  --link-external-color: #4db8b8;
  --link-external-color-hover: #6dcccc;
  --link-unresolved-color: #7da8a8;
  
  /* Tags */
  --tag-color: #4db8b8;
  --tag-background: rgba(77, 184, 184, 0.15);
  --tag-background-hover: rgba(77, 184, 184, 0.2);
  
  /* UI elements */
  --interactive-normal: #3a3630;
  --interactive-hover: #433e36;
  
  /* Code blocks */
  --code-background: #332f29;
  --code-normal: #e8e4dd;
  
  /* Selection */
  --text-selection: rgba(77, 184, 184, 0.25);
  
  /* Blockquotes and callouts */
  --blockquote-border: #4db8b8;
  --callout-color: #4db8b8;
  
  /* Scrollbars */
  --scrollbar-bg: rgba(255, 255, 255, 0.05);
  --scrollbar-thumb-bg: rgba(255, 255, 255, 0.1);
  --scrollbar-active-thumb-bg: rgba(77, 184, 184, 0.3);
}

/* Universal styles for both light and dark mode */

/* Logo styling - displayed in site header */
.site-header-logo img {
  max-height: 190px !important;
  width: 190px !important;
  object-fit: contain;
  display: block;
}

/* Alternative logo selector if the above doesn't work */
.published-container .site-header img {
  max-height: 190px !important;
  width: 190px !important;
  object-fit: contain;
}

/* Navigation menu font size */
.tree-item-self,
.nav-file-title,
.nav-folder-title,
.site-body-left-column .tree-item-inner {
  font-size: 1.1rem !important; /* ~24px on desktop, ~21px on mobile */
  line-height: 1.5;
}

/* Make folder titles slightly bolder for hierarchy clarity */
.nav-folder-title {
  font-weight: 500;
}

/* Smoother scrollbars */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-bg);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-active-thumb-bg);
}

/* Internal links styling */
a.internal-link {
  color: var(--link-color);
  text-decoration: none;
}

a.internal-link:hover {
  color: var(--link-color-hover);
  text-decoration: underline;
}

/* External links */
a.external-link {
  color: var(--link-external-color);
  text-decoration: none;
}

a.external-link:hover {
  color: var(--link-external-color-hover);
  text-decoration: underline;
}

/* Unresolved links (links to notes that don't exist) */
a.is-unresolved {
  color: var(--link-unresolved-color);
  opacity: 0.7;
}

/* Tags */
.tag {
  background-color: var(--tag-background);
  color: var(--tag-color);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.9em;
}

.tag:hover {
  background-color: var(--tag-background-hover);
}

/* Blockquotes */
blockquote {
  border-left: 3px solid var(--blockquote-border);
  padding-left: 1em;
  margin-left: 0;
}

/* Code blocks */
pre code {
  background-color: var(--code-background);
  color: var(--code-normal);
}

/* Inline code */
code {
  background-color: var(--code-background);
  color: var(--code-normal);
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 0.9em;
}

/* Headers maintain text-normal color with slight emphasis on hover */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-normal);
}

/* Responsive heading sizes using rem */
h1 {
  font-size: 2.4rem; /* ~53px on desktop, ~46px on mobile */
  line-height: 1.2;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

h2 {
  font-size: 1.8rem; /* ~40px on desktop, ~34px on mobile */
  line-height: 1.3;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

h3 {
  font-size: 1.5rem; /* ~33px on desktop, ~29px on mobile */
  line-height: 1.3;
}

h4 {
  font-size: 1.2rem; /* ~26px on desktop, ~23px on mobile */
  line-height: 1.4;
}

h5, h6 {
  font-size: 1.05rem; /* ~23px on desktop, ~20px on mobile */
  line-height: 1.4;
}

h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover {
  color: var(--text-accent);
}

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

/* Checkboxes */
input[type="checkbox"] {
  accent-color: var(--interactive-accent);
}

/* Search highlights */
.search-result-file-matched-text {
  background-color: var(--text-selection);
  color: var(--text-accent);
}

/* Gentler shadows for modals and menus */
.modal,
.menu,
.suggestion-container {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--background-modifier-border);
}

/* Navigation improvements */
.site-body-left-column {
  border-right: 1px solid var(--background-modifier-border);
}

/* Improve readability in site header */
.site-header {
  border-bottom: 1px solid var(--background-modifier-border);
}

/* Table of contents */
.toc-item.is-active {
  color: var(--text-accent);
  font-weight: 500;
}

/* Graph view (if enabled) */
.graph-view.color-fill-tag {
  color: var(--tag-color);
}

.graph-view.color-fill-focused {
  color: var(--text-accent);
}