/* @settings

name: Chiaroscuro Flow
id: chiaroscuro-flow
settings:
    -
        id: body-font
        title: Body Font
        type: variable-text
        default: Manrope

    -
        id: header-font
        title: Header Font
        type: variable-text
        default: 'Nunito Sans Bold'

    -
        id: background-primary-light
        title: Light Mode Primary Background
        type: variable-color
        opacity: true
        format: rgb
        default: '#FFFFFF'

    -
        id: background-secondary-light
        title: Light Mode Secondary Background
        type: variable-color
        opacity: true
        format: rgb
        default: '#F0F0F0'

    -
        id: background-primary-dark
        title: Dark Mode Primary Background
        type: variable-color
        opacity: true
        format: rgb
        default: '#1E1E1E'

    -
        id: background-secondary-dark
        title: Dark Mode Secondary Background
        type: variable-color
        opacity: true
        format: rgb
        default: '#2D2D2D'

    -
        id: text-normal-light
        title: Light Mode Text Color
        type: variable-color
        format: rgb
        default: '#333333'

    -
        id: text-normal-dark
        title: Dark Mode Text Color
        type: variable-color
        format: rgb
        default: '#DDDDDD'

    -
        id: code-background
        title: Code Block Background (Light Mode)
        type: variable-color
        opacity: true
        format: rgb
        default: '#F0F0F0'

    -
        id: code-background-dark
        title: Dark Mode Code Block Background
        type: variable-color
        opacity: true
        format: rgb
        default: '#2D2D2D'

    -
        id: math-background
        title: Math Block Background (Light Mode)
        type: variable-color
        opacity: true
        format: rgb
        default: '#F0F0F0'

    -
        id: graph-background
        title: Graph View Background
        type: variable-color
        opacity: true
        format: rgb
        default: '#FFFFFF'

    -
        id: graph-dot-size
        title: Graph View Dot Size
        type: variable-number-slider
        default: 1
        min: 0.5
        max: 3
        step: 0.1

    -
        id: graph-dot-spacing
        title: Graph View Dot Spacing
        type: variable-number-slider
        default: 20
        min: 10
        max: 50
        step: 1

*/

body {
	--font-text: var(--body-font, Manrope), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-header: var(--header-font, 'Nunito Sans Bold'), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.theme-light {
	--background-primary: var(--background-primary-light, rgb(255, 255, 255));
	--background-secondary: var(--background-secondary-light, rgb(240, 240, 240));
	--text-normal: var(--text-normal-light, rgb(51, 51, 51));
	--code-background: var(--code-background, rgb(169, 152, 152));
	--math-background: var(--math-background, rgb(169, 152, 152));
}

.theme-dark {
	--background-primary: var(--background-primary-dark, rgb(30, 30, 30));
	--background-secondary: var(--background-secondary-dark, rgb(45, 45, 45));
	--text-normal: var(--text-normal-dark, rgb(221, 221, 221));
	--code-background: var(--code-background-dark, rgb(45, 45, 45));
	--math-background: var(--code-background-dark, rgb(45, 45, 45));
}

/* Mesh gradient backgrounds */
.theme-light .workspace-leaf-content[data-type="markdown"],
.theme-light .markdown-preview-view,
.theme-light .view-content {
	background: none;
	background-image:
		radial-gradient(at 40% 20%, rgba(var(--background-primary-light, 255 255 255) / 0.8) 0px, transparent 50%),
		radial-gradient(at 80% 0%, rgba(var(--background-secondary-light, 240 240 240) / 0.8) 0px, transparent 50%),
		radial-gradient(at 0% 50%, rgba(var(--background-primary-light, 255 255 255) / 0.8) 0px, transparent 50%),
		radial-gradient(at 80% 50%, rgba(var(--background-secondary-light, 240 240 240) / 0.8) 0px, transparent 50%),
		radial-gradient(at 0% 100%, rgba(var(--background-primary-light, 255 255 255) / 0.8) 0px, transparent 50%),
		radial-gradient(at 80% 100%, rgba(var(--background-secondary-light, 240 240 240) / 0.8) 0px, transparent 50%),
		radial-gradient(at 0% 0%, rgba(var(--background-primary-light, 255 255 255) / 0.8) 0px, transparent 50%);
}

.theme-dark .workspace-leaf-content[data-type="markdown"],
.theme-dark .markdown-preview-view,
.theme-dark .view-content {
	background: none;
	background-image:
		radial-gradient(at 40% 20%, rgba(var(--background-primary-dark, 30 30 30) / 0.8) 0px, transparent 50%),
		radial-gradient(at 80% 0%, rgba(var(--background-secondary-dark, 45 45 45) / 0.8) 0px, transparent 50%),
		radial-gradient(at 0% 50%, rgba(var(--background-primary-dark, 30 30 30) / 0.8) 0px, transparent 50%),
		radial-gradient(at 80% 50%, rgba(var(--background-secondary-dark, 45 45 45) / 0.8) 0px, transparent 50%),
		radial-gradient(at 0% 100%, rgba(var(--background-primary-dark, 30 30 30) / 0.8) 0px, transparent 50%),
		radial-gradient(at 80% 100%, rgba(var(--background-secondary-dark, 45 45 45) / 0.8) 0px, transparent 50%),
		radial-gradient(at 0% 0%, rgba(var(--background-primary-dark, 30 30 30) / 0.8) 0px, transparent 50%);
}

/* Ensure content is visible over the gradient */
.markdown-preview-view,
.markdown-source-view {
	background-color: transparent !important;
}

.cm-s-obsidian pre.HyperMD-codeblock,
.markdown-preview-view pre,
.math-block {
	background-color: var(--code-background);
}

.graph-view.color-fill {
	background-color: var(--background-primary);
	background-image:
		radial-gradient(var(--text-muted) var(--graph-dot-size, 1px), transparent var(--graph-dot-size, 1px)),
		radial-gradient(var(--text-muted) var(--graph-dot-size, 1px), transparent var(--graph-dot-size, 1px));
	background-size: var(--graph-dot-spacing, 20px) var(--graph-dot-spacing, 20px);
	background-position: 0 0, calc(var(--graph-dot-spacing, 20px) / 2) calc(var(--graph-dot-spacing, 20px) / 2);
}

/* Ensure proper text color in both modes */
.theme-light .markdown-preview-view,
.theme-light .cm-s-obsidian {
	color: var(--text-normal);
}

.theme-dark .markdown-preview-view,
.theme-dark .cm-s-obsidian {
	color: var(--text-normal);
}

.graph-view {
	color: var(--text-normal);
}

/* Apply fonts */
body, .cm-s-obsidian {
	font-family: var(--font-text);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-header);
}