/* Wasp — Obsidian theme by Santi Younger */

/* Shared (both color schemes) — per Obsidian "Build a theme" guidance */
body {
	--font-monospace: "Source Code Pro", monospace;
	/* Heading scale (reading + live preview) — matches Obsidian defaults */
	--h1-size: 1.802em;
	--h2-size: 1.556em;
	--h3-size: 1.344em;
	--h4-size: 1.167em;
	--h5-size: 1.067em;
	--h6-size: 1em;
	--h1-weight: 700;
	--h2-weight: 600;
	--h3-weight: 600;
	--h4-weight: 600;
	--h5-weight: 600;
	--h6-weight: 600;
}

/* ── Dark palette ─────────────────────────────────────────────────────────── */
.theme-dark {
	/* Base scale — required for community palette contrast checks (WCAG 4.5:1 on base-10) */
	--color-base-00: #191919;
	--color-base-05: #1f1f1f;
	--color-base-10: #242424;
	--color-base-20: #2a2a2a;
	--color-base-25: #323232;
	--color-base-30: #3d3d3d;
	--color-base-35: #4a4a44;
	--color-base-40: #5c5c54;
	--color-base-50: #9a9284;
	--color-base-60: #bdae93;
	--color-base-70: #d4c9a8;
	--color-base-100: #faf2d6;

	--background-primary: var(--color-base-10);
	--background-primary-alt: var(--color-base-10);
	--background-secondary: var(--color-base-00);
	--background-secondary-alt: var(--color-base-30);
	--background-modifier-border: #f8c537;
	--background-modifier-hover: rgba(255, 255, 255, 0.06);

	--text-normal: #faf2d6;
	--text-faint: #bdae93;
	--text-muted: #bdae93;
	--h1-color: #f8c537;
	--h2-color: #E8D49A;
	--h3-color: #D49335;
	--h4-color: #E0E0E0;
	--h5-color: #C9BEA8;
	--h6-color: #bdae93;
	--text-title-h1: var(--h1-color);
	--text-title-h2: var(--h2-color);
	--text-title-h3: var(--h3-color);
	--text-title-h4: var(--h4-color);
	--text-title-h5: var(--h5-color);
	--text-title-h6: var(--h6-color);
	--text-highlight-bg: #640211;
	--text-link: #83a598;
	--text-a: #f8c537;
	--text-a-hover: #83a598;
	--text-accent: #f8c537;
	--text-accent-hover: #D49335;
	--text-on-accent: #1A2023;
	--text-selection: #f8c537;

	--inline-code: #83a598;
	--code-block: #83a598;
	--pre-code: #3D3D3D;
	--interactive-accent: #f8c537;
	--interactive-accent-rgb: 248, 197, 55;
	--interactive-before: #9a9284;
	--vim-cursor: #f8c537;

	/* Graph view */
	--graph-node: rgb(var(--interactive-accent-rgb));
	--graph-line: rgb(var(--interactive-accent-rgb));
	--graph-node-focused: rgb(var(--interactive-accent-rgb));
	--graph-text: var(--text-normal);

	--callout-title-color: var(--text-normal);

	/* File tree — hover subtle; active = darker amber + white text (not bright gold) */
	--wasp-nav-active-background: #7A5C14;
	--nav-item-background-hover: var(--background-modifier-hover);
	--nav-item-background-active: var(--wasp-nav-active-background);
	--nav-item-color-hover: var(--text-normal);
	--nav-item-color-active: #ffffff;
	--nav-collapse-icon-color: var(--text-faint);
	--nav-collapse-icon-color-collapsed: var(--text-faint);

	/* Wasp-specific UI (settings buttons, etc.) */
	--button-bg-color: #D49335;
	--button-text-color: #242424;
	--button-hover-bg-color: #DAA520;
	--button-hover-text-color: #1A2023;

	--text-sub-accent: var(--text-accent);
}

/* ── Light palette ────────────────────────────────────────────────────────── */
.theme-light {
	/* Base scale — required for community palette contrast checks (WCAG 4.5:1 on base-10) */
	--color-base-00: #faf6f0;
	--color-base-05: #fffcf7;
	--color-base-10: #faf6f0;
	--color-base-20: #e8dfd0;
	--color-base-25: #ddd4c4;
	--color-base-30: #c9b8a8;
	--color-base-35: #b0a090;
	--color-base-40: #968878;
	--color-base-50: #7a6f5f;
	--color-base-60: #6b5e4f;
	--color-base-70: #5c5044;
	--color-base-100: #2c2419;

	--background-primary: var(--color-base-10);
	--background-primary-alt: var(--color-base-05);
	--background-secondary: var(--color-base-20);
	--background-secondary-alt: var(--color-base-30);
	--background-modifier-border: #C87628;
	--background-modifier-hover: rgba(120, 72, 24, 0.08);

	--text-normal: #2C2419;
	--text-faint: #6B5E4F;
	--text-muted: #5C5044;
	--h1-color: #9A4E12;
	--h2-color: #924e14;
	--h3-color: #8f5514;
	--h4-color: #8F4F14;
	--h5-color: #7A4310;
	--h6-color: #6B3A0E;
	--text-title-h1: var(--h1-color);
	--text-title-h2: var(--h2-color);
	--text-title-h3: var(--h3-color);
	--text-title-h4: var(--h4-color);
	--text-title-h5: var(--h5-color);
	--text-title-h6: var(--h6-color);
	--text-link: #9b4218;
	--text-a: #9B3A1A;
	--text-a-hover: #9b4218;
	--text-accent: #9B3A1A;
	--text-accent-hover: #9b4218;
	--text-on-accent: #1F1A14;
	--text-selection: #E4C07A;
	--text-highlight-bg: #F0E0B8;
	--text-white: #FFFCF7;

	--inline-code: #3D6B5C;
	--pre-code: #EDE6DA;
	--interactive-accent: #D4922A;
	--interactive-accent-rgb: 212, 146, 42;
	--interactive-before: #6b5e4f;
	--vim-cursor: #9B3A1A;

	--graph-node: rgb(var(--interactive-accent-rgb));
	--graph-line: rgb(var(--interactive-accent-rgb));
	--graph-node-focused: rgb(var(--interactive-accent-rgb));
	--graph-text: var(--text-normal);

	--callout-title-color: var(--text-normal);

	--nav-item-background-hover: var(--background-modifier-hover);
	--nav-item-background-active: var(--background-modifier-border);
	--nav-item-color-hover: var(--text-normal);
	--nav-item-color-active: var(--text-on-accent);

	/* Workspace tabs — clear bar vs active pane */
	--tab-container-background: #E8DFD0;
	--tab-background-active: var(--background-primary);
	--tab-text-color: #5C5044;
	--tab-text-color-active: #1F1A14;
	--tab-text-color-focused: #5C5044;
	--tab-text-color-focused-active: #1F1A14;
	--tab-text-color-focused-highlighted: #1F1A14;
	--tab-text-color-focused-active-current: #1F1A14;
	--tab-divider-color: #C9B8A8;
	--tab-outline-color: #C87628;
	--tab-font-weight: 500;
	--tab-font-weight-active: 600;

	--list-marker-color: var(--text-muted);
	--indentation-guide-color: #6b5e4f;

	--button-bg-color: #C87628;
	--button-text-color: #1F1A14;
	--button-hover-bg-color: #A85C18;
	--button-hover-text-color: #FFFCF7;

	--text-sub-accent: var(--text-accent);
}

/* Dark: active file row — ensure white label/icons on darker amber bar */
.theme-dark .tree-item-self.nav-file-title.is-active,
.theme-dark .tree-item-self.nav-folder-title.is-active {
	--icon-color: var(--nav-item-color-active);
}

.theme-dark .tree-item-self.nav-file-title.is-active .tree-item-inner,
.theme-dark .tree-item-self.nav-folder-title.is-active .tree-item-inner,
.theme-dark .tree-item-self.nav-file-title.is-active .nav-file-title-content,
.theme-dark .tree-item-self.nav-folder-title.is-active .nav-folder-title-content,
.theme-dark .tree-item-self.nav-file-title.is-active .svg-icon,
.theme-dark .tree-item-self.nav-folder-title.is-active .svg-icon,
.theme-dark .tree-item-self.nav-file-title.is-active svg,
.theme-dark .tree-item-self.nav-folder-title.is-active svg {
	color: var(--nav-item-color-active);
	stroke: var(--nav-item-color-active);
}

/* ── Dark: selection & search (gold highlight needs dark foreground) ───── */
.theme-dark .cm-s-obsidian span.obsidian-search-match-highlight {
	color: var(--text-normal);
	background-color: #483699;
}

.theme-dark ::selection,
.theme-dark .markdown-preview-view ::selection,
.theme-dark .markdown-rendered ::selection,
.theme-dark .markdown-source-view.mod-cm6 .cm-editor .cm-line ::selection,
.theme-dark .cm-editor .cm-line ::selection {
	background-color: var(--text-selection);
	color: var(--text-on-accent);
}

.theme-dark .markdown-source-view.mod-cm6 .cm-editor .cm-selectionBackground,
.theme-dark .markdown-source-view.mod-cm6 .cm-editor .cm-selectionMatchBackground,
.theme-dark .cm-editor .cm-selectionBackground,
.theme-dark .cm-editor .cm-selectionMatchBackground {
	background-color: var(--text-selection);
}

.theme-dark .cm-editor .cm-selection {
	color: var(--text-on-accent);
}

/* ── Light: selection, tabs, editor syntax ──────────────────────────────── */
.theme-light ::selection,
.theme-light .markdown-preview-view ::selection,
.theme-light .markdown-rendered ::selection,
.theme-light .markdown-source-view.mod-cm6 .cm-editor .cm-line ::selection,
.theme-light .cm-editor .cm-line ::selection {
	background-color: var(--text-selection);
	color: var(--text-on-accent);
}

.theme-light .markdown-source-view.mod-cm6 .cm-editor .cm-selectionBackground,
.theme-light .markdown-source-view.mod-cm6 .cm-editor .cm-selectionMatchBackground,
.theme-light .cm-editor .cm-selectionBackground,
.theme-light .cm-editor .cm-selectionMatchBackground {
	background-color: var(--text-selection);
}

.theme-light .cm-editor .cm-selection {
	color: var(--text-on-accent);
}

/* Light: workspace tab chrome (icons + titles follow tab variables) */
.theme-light .workspace-tab-header:not(.is-active) .workspace-tab-header-inner-title,
.theme-light .workspace-tab-header:not(.is-active) .workspace-tab-header-inner-icon {
	color: var(--tab-text-color);
	opacity: 1;
}

.theme-light .workspace-tab-header.is-active .workspace-tab-header-inner-title,
.theme-light .workspace-tab-header.is-active .workspace-tab-header-inner-icon,
.theme-light .workspace-tab-header.is-active .workspace-tab-header-status-icon {
	color: var(--tab-text-color-focused-active);
}

.theme-light .workspace-tab-header.is-active .svg-icon,
.theme-light .workspace-tab-header.is-active svg {
	color: var(--tab-text-color-focused-active);
	stroke: var(--tab-text-color-focused-active);
}

/* Light: faint editor markers — quotes/callouts only (not bold/italic) */
.theme-light .cm-s-obsidian span.cm-formatting-quote,
.theme-light .cm-s-obsidian span.cm-hmd-callout,
.theme-light .cm-s-obsidian span.cm-quote,
.theme-light .cm-s-obsidian .cm-line:not(.cm-active) span.cm-formatting-quote,
.theme-light .cm-s-obsidian .cm-line:not(.cm-active) span.cm-hmd-callout,
.theme-light .cm-s-obsidian .cm-line:not(.cm-active) span.cm-quote {
	color: var(--text-muted);
	opacity: 1;
}

/* Headings: sizes/weights on body, colors on .theme-* — Obsidian applies them in reading + edit (#10) */

/* Graph view highlights (WebGL bridge) */
.theme-dark .graph-view.color-circle,
.theme-dark .graph-view.color-fill-highlight,
.theme-dark .graph-view.color-line-highlight,
.theme-light .graph-view.color-circle,
.theme-light .graph-view.color-fill-highlight,
.theme-light .graph-view.color-line-highlight {
	color: rgb(var(--interactive-accent-rgb));
}

/* ── Misc editor / UI ───────────────────────────────────────────────────── */
.cm-s-obsidian span.cm-formatting-link {
	color: var(--text-normal);
}

body .markdown-source-view .CodeMirror-guttermarker-subtle {
	color: var(--text-normal);
}

.theme-light .vertical-tab-header-group-title {
	color: var(--text-white);
}

/*-----------------------------------------*/
/* End of main theme, extra functionality can be added below */

.markdown-source-view {
	font-family: var(--font-monospace);
}

body .cm-fat-cursor .CodeMirror-cursor {
	background-color: var(--vim-cursor);
	opacity: 0.8;
	width: 9px;
	visibility: visible;
}

button.mod-cta {
	background-color: var(--button-bg-color);
	color: var(--button-text-color);
	font-weight: 600;
}

button.mod-cta:hover,
button.mod-cta:focus {
	background-color: var(--button-hover-bg-color);
	color: var(--button-text-color);
	font-weight: 600;
}

.vertical-tab-nav-item.is-active {
	background-color: var(--button-bg-color);
	color: var(--button-text-color);
	font-weight: 600;
}

.vertical-tab-nav-item.is-active:hover,
.vertical-tab-nav-item.is-active:focus {
	background-color: var(--button-hover-bg-color);
	color: var(--button-text-color);
	font-weight: 600;
}

body:not(.is-phone) .vertical-tab-nav-item.is-active {
	--background-modifier-hover: var(--button-hover-bg-color);
	--icon-color: var(--button-text-color);
	background-color: var(--button-bg-color);
	color: var(--button-text-color);
	font-weight: 600;
}

body:not(.is-phone) .vertical-tab-nav-item.is-active:hover,
body:not(.is-phone) .vertical-tab-nav-item.is-active:focus {
	background-color: var(--button-hover-bg-color);
	color: var(--button-text-color);
	font-weight: 600;
}

.checkbox-container.is-enabled {
	background-color: var(--button-bg-color);
	color: var(--button-text-color);
}

.checkbox-container.is-enabled:hover,
.checkbox-container.is-enabled:focus {
	background-color: var(--button-hover-bg-color);
	color: var(--button-text-color);
}

.flair.mod-pop {
	background-color: var(--button-bg-color);
	color: var(--button-text-color);
}

.flair.mod-pop:hover,
.flair.mod-pop:focus {
	background-color: var(--button-hover-bg-color);
	color: var(--button-text-color);
}

/** hr styles — PREVIEW MODE */
.cm-line hr,
.markdown-preview-view hr {
	margin-block-start: 4em;
	margin-block-end: 4em;
	border: none;
	height: 0;
	border-bottom: 1px solid;
	border-image-slice: 1;
	border-width: 1px;
	border-image-source: linear-gradient(to right, transparent, var(--text-accent), transparent);
}

.cm-line hr::after,
.markdown-preview-view hr::after {
	display: inline-block;
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
	transform-origin: 50% 50%;
	padding: 0.5rem;
	color: var(--text-sub-accent);
	background-color: var(--background-primary);
}