/* MOOD — Tokens */

:root {
	--md-f-display: "Italiana", "Bodoni Moda", "Didot", "Times New Roman", serif;
	--md-f-serif:   "Bodoni Moda", "Playfair Display", Georgia, "Times New Roman", serif;
	--md-f-sans:    "Jost", "Poppins", "Century Gothic", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

	--md-t-hero:   clamp(2.25rem, 6.2vw, 3.65rem);
	--md-t-board:  clamp(2.2rem, 7.4vw, 4.4rem);
	--md-t-name:   clamp(1.9rem, 4.6vw, 3rem);
	--md-t-kicker: 0.6rem;
	--md-t-nav:    0.66rem;
	--md-t-head:   0.7rem;
	--md-t-body:   0.85rem;
	--md-t-micro:  0.7rem;

	--md-ls-kicker:  0.42em;
	--md-ls-nav:     0.2em;
	--md-ls-head:    0.18em;
	--md-ls-body:    0.03em;
	--md-ls-display: 0.02em;

	--md-glass: blur(20px);
	--md-r:     26px;
	--md-dash:  18px;
	--md-pad:   clamp(1.75rem, 4vw, 3.25rem);
	--md-shell: 1320px;
	--md-av-w: 300px;
	--md-av-h: 350px;
	--md-gif-w: 300px;
	--md-gif-h: 150px;
	--md-aside-w: 300px;

	--md-bar-t: 44px;
	--md-bar-b: 38px;
	--md-rail:  48px;

	--md-dur:  .25s;
	--md-ease: ease;

	--md-bg-image: url(../../../images/mood/bg.jpg);
}

/* Akzentachse — je Ton ein heller Wert fuer Dunkel, ein dunkler fuer Hell. */
:root {
	--md-acc-d: #b8383a; --md-acc-d-soft: #c86464;
	--md-acc-l: #9b2b2e; --md-acc-l-soft: #8c2b2e;
}
[data-accent="farn"] {
	--md-acc-d: #6f9a68; --md-acc-d-soft: #8ab383;
	--md-acc-l: #3f6b3f; --md-acc-l-soft: #375e37;
}
[data-accent="rost"] {
	--md-acc-d: #bd7a41; --md-acc-d-soft: #d19b70;
	--md-acc-l: #8a5320; --md-acc-l-soft: #7d4b1d;
}
[data-accent="nebel"] {
	--md-acc-d: #6f93a8; --md-acc-d-soft: #8fadc0;
	--md-acc-l: #3d6377; --md-acc-l-soft: #365a6d;
}
[data-accent="heide"] {
	--md-acc-d: #9b7aa8; --md-acc-d-soft: #b295bd;
	--md-acc-l: #63466f; --md-acc-l-soft: #5a3f66;
}

/* Modusachse — Dunkel steht auf blankem :root und ist der Rueckfall. */
:root {
	--md-abyss:       #060606;
	--md-veil:        rgb(6 6 6 / .62);
	--md-halo:        radial-gradient(120% 80% at 50% 0%, rgb(255 255 255 / .05), transparent 60%);
	--md-scrim:       rgb(8 8 8 / .5);
	--md-scrim-solid: #0c0c0c;
	--md-wash:        rgb(255 255 255 / .022);
	--md-chip-bg:     rgb(255 255 255 / .05);
	--md-code-bg:     rgb(0 0 0 / .5);

	--md-rule:      rgb(255 255 255 / .34);
	--md-rule-soft: rgb(255 255 255 / .16);
	--md-rule-hair: rgb(255 255 255 / .09);

	--md-ink:        #f2f2f2;
	--md-ink-bright: #ffffff;
	--md-ink-dim:    #a9a9a9;
	--md-ink-faint:  #6f6f6f;

	--md-accent:      var(--md-acc-d);
	--md-accent-soft: var(--md-acc-d-soft);

	--md-bg-filter:       grayscale(1) contrast(1.05);
	--md-photo-filter:    grayscale(1) contrast(1.05) brightness(.92);
	--md-portrait-filter: grayscale(1) contrast(1.02) brightness(.78);
	--md-portrait-ground: #0b0b0b;
	--md-portrait-x: linear-gradient(90deg, rgb(6 6 6 / .92) 0%, rgb(6 6 6 / .66) 45%, rgb(6 6 6 / .48) 100%);
	--md-portrait-y: linear-gradient(0deg, rgb(6 6 6 / .8) 0%, transparent 35%);
	--md-portrait-y-narrow: linear-gradient(0deg, rgb(6 6 6 / .92) 0%, rgb(6 6 6 / .35) 60%);
	--md-stage-filter: grayscale(1) contrast(1.02) brightness(.5);
	--md-stage-tint: transparent;
	--md-stage-x: linear-gradient(90deg, rgb(6 6 6 / .92) 0%, rgb(6 6 6 / .55) 55%, rgb(6 6 6 / .14) 100%);
	--md-stage-y: linear-gradient(180deg, rgb(6 6 6 / .52) 0%, transparent 36%, transparent 60%, rgb(6 6 6 / .8) 100%);
	--md-stage-y-narrow: linear-gradient(0deg, rgb(6 6 6 / .92) 0%, rgb(6 6 6 / .4) 65%);

	color-scheme: dark;
}

/* Hell — Buetten statt Weiss, Linien hoeher in der Deckkraft. */
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) {
		--md-abyss:       #eeebe6;
		--md-veil:        rgb(238 235 230 / .72);
		--md-halo:        radial-gradient(120% 80% at 50% 0%, rgb(0 0 0 / .045), transparent 60%);
		--md-scrim:       rgb(240 238 233 / .62);
		--md-scrim-solid: #f2f0ec;
		--md-wash:        rgb(255 255 255 / .5);
		--md-chip-bg:     rgb(23 22 26 / .06);
		--md-code-bg:     rgb(23 22 26 / .045);

		--md-rule:      rgb(23 22 26 / .42);
		--md-rule-soft: rgb(23 22 26 / .2);
		--md-rule-hair: rgb(23 22 26 / .11);

		--md-ink:        #17161a;
		--md-ink-bright: #000000;
		--md-ink-dim:    #55525a;
		--md-ink-faint:  #75727b;

		--md-accent:      var(--md-acc-l);
		--md-accent-soft: var(--md-acc-l-soft);

		--md-bg-filter:       grayscale(1) brightness(1.5) contrast(.62);
		--md-photo-filter:    grayscale(1) brightness(1.24) contrast(.82);
		--md-portrait-filter: grayscale(1) brightness(1.26) contrast(.84);
		--md-portrait-ground: #dedad4;
		--md-portrait-x: linear-gradient(90deg, rgb(238 235 230 / .92) 0%, rgb(238 235 230 / .5) 45%, rgb(238 235 230 / .16) 100%);
		--md-portrait-y: linear-gradient(0deg, rgb(238 235 230 / .82) 0%, transparent 35%);
		--md-portrait-y-narrow: linear-gradient(0deg, rgb(238 235 230 / .94) 0%, rgb(238 235 230 / .4) 60%);
		--md-stage-filter: grayscale(1) brightness(1.18) contrast(.8);
		--md-stage-tint: transparent;
		--md-stage-x: linear-gradient(90deg, rgb(238 235 230 / .94) 0%, rgb(238 235 230 / .6) 55%, rgb(238 235 230 / .12) 100%);
		--md-stage-y: linear-gradient(180deg, rgb(238 235 230 / .55) 0%, transparent 36%, transparent 60%, rgb(238 235 230 / .82) 100%);
		--md-stage-y-narrow: linear-gradient(0deg, rgb(238 235 230 / .94) 0%, rgb(238 235 230 / .45) 65%);

		color-scheme: light;
	}
}

/* Hell, ausdruecklich gewaehlt */
:root[data-theme="light"] {
	--md-abyss: #eeebe6;
	--md-veil: rgb(238 235 230 / .72);
	--md-halo: radial-gradient(120% 80% at 50% 0%, rgb(0 0 0 / .045), transparent 60%);
	--md-scrim: rgb(240 238 233 / .62);
	--md-scrim-solid: #f2f0ec;
	--md-wash: rgb(255 255 255 / .5);
	--md-chip-bg: rgb(23 22 26 / .06);
	--md-code-bg: rgb(23 22 26 / .045);
	--md-rule: rgb(23 22 26 / .42);
	--md-rule-soft: rgb(23 22 26 / .2);
	--md-rule-hair: rgb(23 22 26 / .11);
	--md-ink: #17161a;
	--md-ink-bright: #000000;
	--md-ink-dim: #55525a;
	--md-ink-faint: #75727b;
	--md-accent: var(--md-acc-l);
	--md-accent-soft: var(--md-acc-l-soft);
	--md-bg-filter: grayscale(1) brightness(1.5) contrast(.62);
	--md-photo-filter: grayscale(1) brightness(1.24) contrast(.82);
	--md-portrait-filter: grayscale(1) brightness(1.26) contrast(.84);
	--md-portrait-ground: #dedad4;
	--md-portrait-x: linear-gradient(90deg, rgb(238 235 230 / .92) 0%, rgb(238 235 230 / .5) 45%, rgb(238 235 230 / .16) 100%);
	--md-portrait-y: linear-gradient(0deg, rgb(238 235 230 / .82) 0%, transparent 35%);
	--md-portrait-y-narrow: linear-gradient(0deg, rgb(238 235 230 / .94) 0%, rgb(238 235 230 / .4) 60%);
	--md-stage-filter: grayscale(1) brightness(1.18) contrast(.8);
	--md-stage-tint: transparent;
	--md-stage-x: linear-gradient(90deg, rgb(238 235 230 / .94) 0%, rgb(238 235 230 / .6) 55%, rgb(238 235 230 / .12) 100%);
	--md-stage-y: linear-gradient(180deg, rgb(238 235 230 / .55) 0%, transparent 36%, transparent 60%, rgb(238 235 230 / .82) 100%);
	--md-stage-y-narrow: linear-gradient(0deg, rgb(238 235 230 / .94) 0%, rgb(238 235 230 / .45) 65%);
	color-scheme: light;
}

/* Dunkel, ausdruecklich gewaehlt */
:root[data-theme="dark"] {
	--md-abyss: #060606;
	--md-veil: rgb(6 6 6 / .62);
	--md-halo: radial-gradient(120% 80% at 50% 0%, rgb(255 255 255 / .05), transparent 60%);
	--md-scrim: rgb(8 8 8 / .5);
	--md-scrim-solid: #0c0c0c;
	--md-wash: rgb(255 255 255 / .022);
	--md-chip-bg: rgb(255 255 255 / .05);
	--md-code-bg: rgb(0 0 0 / .5);
	--md-rule: rgb(255 255 255 / .34);
	--md-rule-soft: rgb(255 255 255 / .16);
	--md-rule-hair: rgb(255 255 255 / .09);
	--md-ink: #f2f2f2;
	--md-ink-bright: #ffffff;
	--md-ink-dim: #a9a9a9;
	--md-ink-faint: #6f6f6f;
	--md-accent: var(--md-acc-d);
	--md-accent-soft: var(--md-acc-d-soft);
	--md-bg-filter: grayscale(1) contrast(1.05);
	--md-photo-filter: grayscale(1) contrast(1.05) brightness(.92);
	--md-portrait-filter: grayscale(1) contrast(1.02) brightness(.78);
	--md-portrait-ground: #0b0b0b;
	--md-portrait-x: linear-gradient(90deg, rgb(6 6 6 / .92) 0%, rgb(6 6 6 / .66) 45%, rgb(6 6 6 / .48) 100%);
	--md-portrait-y: linear-gradient(0deg, rgb(6 6 6 / .8) 0%, transparent 35%);
	--md-portrait-y-narrow: linear-gradient(0deg, rgb(6 6 6 / .92) 0%, rgb(6 6 6 / .35) 60%);
	--md-stage-filter: grayscale(1) contrast(1.02) brightness(.5);
	--md-stage-tint: transparent;
	--md-stage-x: linear-gradient(90deg, rgb(6 6 6 / .92) 0%, rgb(6 6 6 / .55) 55%, rgb(6 6 6 / .14) 100%);
	--md-stage-y: linear-gradient(180deg, rgb(6 6 6 / .52) 0%, transparent 36%, transparent 60%, rgb(6 6 6 / .8) 100%);
	--md-stage-y-narrow: linear-gradient(0deg, rgb(6 6 6 / .92) 0%, rgb(6 6 6 / .4) 65%);
	color-scheme: dark;
}