/* styles.css (copied verbatim from plugin/styles.css) is written against
 * Obsidian's own design-system CSS custom properties -- --text-normal,
 * --size-4-4, --font-text, etc. -- which don't exist outside Obsidian.
 * Rather than rewrite ~30 var() references across 946 lines, this file
 * supplies compatible values under the same names, loaded before
 * styles.css so its var() lookups resolve normally. Not a pixel-precise
 * recreation of Obsidian's actual theme -- just sensible values, light
 * and dark. Load order matters: this file's <link> must come first in
 * index.html.
 */

:root {
	--background-primary: #ffffff;
	--background-secondary: #f2f3f5;
	--background-modifier-border: rgba(0, 0, 0, 0.1);
	--background-modifier-hover: rgba(0, 0, 0, 0.03);
	--text-normal: #2e3338;
	--text-muted: #6c7086;
	--text-faint: #a6adba;
	--text-accent: #7c3aed;
	--text-on-accent: #ffffff;
	/* Purple, not yellow (Erick, 2026-08-04, after the purple/black-only
	 * pass) -- derived from --text-accent via color-mix rather than a
	 * separate hardcoded rgba(), so the dark-mode override below only has
	 * to change --text-accent and this follows automatically. */
	--text-highlight-bg: color-mix(in srgb, var(--text-accent) 35%, transparent);
	--interactive-accent: #7c3aed;
	--font-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	/* Site's actual chosen faces (Erick, 2026-08-04) -- fonts.css registers
	 * both via @font-face, must load before this file (see its own header
	 * comment). Falls through to --font-text if a font file ever fails to
	 * load, same fallback chain styles.css already builds on these vars. */
	--roget-body-font: "Cormorant Garamond", var(--font-text);
	--roget-display-font: "Merriweather Sans", var(--font-text);
	--font-bold: 700;
	--font-semibold: 600;
	--size-4-1: 4px;
	--size-4-2: 8px;
	--size-4-3: 12px;
	--size-4-4: 16px;
	--size-4-6: 24px;
	--size-4-8: 32px;
	--radius-s: 4px;
	--shadow-s: 0 1px 2px rgba(0, 0, 0, 0.1);
	--layer-popover: 60;
}

@media (prefers-color-scheme: dark) {
	:root {
		--background-primary: #1e1e1e;
		--background-secondary: #161616;
		--background-modifier-border: rgba(255, 255, 255, 0.1);
		--background-modifier-hover: rgba(255, 255, 255, 0.05);
		--text-normal: #dcddde;
		--text-muted: #999999;
		--text-faint: #666666;
		--text-accent: #a985f4;
		--text-on-accent: #1e1e1e;
		--interactive-accent: #a985f4;
	}
}

html,
body {
	margin: 0;
	height: 100%;
	background: var(--background-primary);
	color: var(--text-normal);
	font-family: var(--roget-body-font, var(--font-text));
}

/* Form controls don't inherit the page font by default (the UA
 * stylesheet gives them their own system font) -- reset that so the
 * body font reaches search/text inputs too, then styles.css's own
 * .roget-nav-btn/.roget-side-tab rules layer the display font on top
 * for buttons and tabs specifically. */
button,
input,
select,
textarea {
	font: inherit;
}