/* Tozan theme head injections — fonts, accent palette, contrast colors.
   Mirrors the inline <style> blocks served by tozan.fueko.net so that
   tozan-screen.css renders 1:1. */

/* latin — normal */
@font-face {
	font-family: 'tiktoksans';
	font-style: normal;
	font-weight: 100 1000;
	font-display: swap;
	src: url('/assets/fonts/tiktoksans/tiktoksans-normal-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext — normal */
@font-face {
	font-family: 'tiktoksans';
	font-style: normal;
	font-weight: 100 1000;
	font-display: swap;
	src: url('/assets/fonts/tiktoksans/tiktoksans-normal-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02AF, U+0300-0301, U+0303, U+0305-0307, U+0309-036F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* Ghost font wiring (theme reads --gh-font-*) */
	--gh-font-heading: 'tiktoksans', sans-serif;
	--gh-font-body: 'tiktoksans', sans-serif;

	/* Display weight (Tozan head override) */
	--font-weight-display: 500;

	/* Logo sizing (Tozan head override) */
	--height-logo-header: 28px;
	--height-logo-footer: 28px;
	--height-logo-mobile-header: 24px;
	--height-logo-mobile-footer: 24px;

	/* Headline scale */
	--headline: 180;

	/* Site accent (overridable inline from Ghost settings) */
	--ghost-accent-color: #d3fd1a;
	--ghost-accent-color-contrast: #120b14;
	--g-accent-color-contrast: #120b14;

	/* Tag accent palette */
	--ghost-accent-aesthetics: #f1ddbc;
	--ghost-accent-ai: #F4C7EE;
	--ghost-accent-art: #fed07c;
	--ghost-accent-balance: #fbcfaa;
	--ghost-accent-blockchain: #0047ff;
	--ghost-accent-branding: #f9666f;
	--ghost-accent-career: #ffe6ad;
	--ghost-accent-community: #ffeb90;
	--ghost-accent-creative: #c2df37;
	--ghost-accent-culture: #f3c37d;
	--ghost-accent-design: #006461;
	--ghost-accent-digital: #122378;
	--ghost-accent-ethics: #b3e0e0;
	--ghost-accent-fashion: #76e4c3;
	--ghost-accent-future: #ffecd5;
	--ghost-accent-health: #98f5af;
	--ghost-accent-humanity: #4b71fc;
	--ghost-accent-identity: #c9cdd8;
	--ghost-accent-innovation: #ffa5b1;
	--ghost-accent-inspiration: #f1ddbc;
	--ghost-accent-lifestyle: #ffe2d6;
	--ghost-accent-mindset: #fdb084;
	--ghost-accent-productivity: #d9cafe;
	--ghost-accent-teamwork: #ffdad8;
	--ghost-accent-technology: #9854d1;
	--ghost-accent-wellbeing: #fff2d5;
	--ghost-accent-work: #464dff;
	--ghost-accent-news: #ededed;

	/* Tag accent contrast (text on tag chip) */
	--ghost-accent-aesthetics-contrast: #120b14;
	--ghost-accent-ai-contrast: #120b14;
	--ghost-accent-art-contrast: #120b14;
	--ghost-accent-balance-contrast: #120b14;
	--ghost-accent-blockchain-contrast: #ffffff;
	--ghost-accent-branding-contrast: #ffffff;
	--ghost-accent-career-contrast: #120b14;
	--ghost-accent-community-contrast: #120b14;
	--ghost-accent-creative-contrast: #120b14;
	--ghost-accent-culture-contrast: #120b14;
	--ghost-accent-design-contrast: #ffffff;
	--ghost-accent-digital-contrast: #ffffff;
	--ghost-accent-ethics-contrast: #120b14;
	--ghost-accent-fashion-contrast: #120b14;
	--ghost-accent-future-contrast: #120b14;
	--ghost-accent-health-contrast: #120b14;
	--ghost-accent-humanity-contrast: #ffffff;
	--ghost-accent-identity-contrast: #120b14;
	--ghost-accent-innovation-contrast: #120b14;
	--ghost-accent-inspiration-contrast: #120b14;
	--ghost-accent-lifestyle-contrast: #120b14;
	--ghost-accent-mindset-contrast: #120b14;
	--ghost-accent-productivity-contrast: #120b14;
	--ghost-accent-teamwork-contrast: #120b14;
	--ghost-accent-technology-contrast: #ffffff;
	--ghost-accent-wellbeing-contrast: #120b14;
	--ghost-accent-work-contrast: #ffffff;
	--ghost-accent-news-contrast: #120b14;
}

/* Author archive — stack social pills above the @handle (Tozan banner layout). */
[data-context="archive"][data-subcontext="author"] .headline-content.g-flex {
	flex-direction: column;
	align-items: flex-start;
}

@media (max-width: 480px) {
	[data-context="archive"][data-subcontext="author"] [data-headline-img="true"] .headline-content.g-flex {
		align-items: center;
	}
}

/* Header chrome accent — keep dropdown accents on Tozan's signature lime
   (#d3fd1a) regardless of the Ghost-synced site accent.
   Branding sync still drives body/content accents via the wrapper inline style;
   this override is scoped to the header only. */
.header-section {
	--ghost-accent-color: #d3fd1a;
	--ghost-accent-color-contrast: #120b14;
	--g-accent-color-contrast: #120b14;
}

.header-logo.g-logo {
	display: flex;
	align-items: center;
	gap: 0.45em;
	line-height: 1;
}

.header-blog-separator {
	align-self: stretch;
	flex-shrink: 0;
	width: 1px;
	background: linear-gradient(
		to bottom,
		transparent,
		currentColor 20%,
		currentColor 80%,
		transparent
	);
}

.header-blog-label {
	line-height: 1;
	white-space: nowrap;
}

@media (min-width: 1201px) {
	.header-search {
		margin-left: 0;
	}
}

/* Counteract Tailwind preflight's `svg { display: block }` inside the header.
   Tozan's own reset leaves <svg> at the browser default (inline), so the
   dropdown chevron and search icons must stay inline with their label text
   instead of wrapping onto a new line. */
.header-section svg {
	display: inline-block;
	vertical-align: middle;
}

/* Dark mode — logo & post headline typography
   Ghost SVG logos keep their baked-in fill; invert them on dark backgrounds.
   Headline titles inherit --g-accent-color-contrast from the wrapper inline
   style (dark on lime accent) which stays dark in dark mode — use body text. */
[data-color-scheme="dark"] :is(header, footer) .g-logo img {
	filter: brightness(0) invert(1);
}

[data-color-scheme="dark"] :is(.headline-title, .headline-content, .headline-meta, .g-about) {
	color: var(--color-font-one);
}

[data-color-scheme="dark"] .headline-content :is(a, p, time, span:not([class*="widget"])) {
	color: inherit;
}

[data-color-scheme="dark"] .headline-meta > small > span:not(:first-child) {
	opacity: var(--opacity-meta);
}

/* TOC — inline card lives inside ghost-koenig; floating clone is on body.
   Both inherit Tozan dark tokens from html; reinforce readable link colors. */
[data-color-scheme="dark"] :is(.toc-section, [data-toc-clone]) {
	color: var(--color-font-one);
}

[data-color-scheme="dark"] .toc-section ul li a {
	color: var(--color-font-one);
	opacity: var(--opacity-meta);
}

[data-color-scheme="dark"] .toc-section ul li a:hover {
	color: var(--color-font-one);
	opacity: 1;
}

@media (prefers-color-scheme: dark) {
	[data-color-scheme="auto"] :is(header, footer) .g-logo img {
		filter: brightness(0) invert(1);
	}

	[data-color-scheme="auto"] :is(.headline-title, .headline-content, .headline-meta, .g-about) {
		color: var(--color-font-one);
	}

	[data-color-scheme="auto"] .headline-content :is(a, p, time, span:not([class*="widget"])) {
		color: inherit;
	}

	[data-color-scheme="auto"] .headline-meta > small > span:not(:first-child) {
		opacity: var(--opacity-meta);
	}

	[data-color-scheme="auto"] :is(.toc-section, [data-toc-clone]) {
		color: var(--color-font-one);
	}

	[data-color-scheme="auto"] .toc-section ul li a {
		color: var(--color-font-one);
		opacity: var(--opacity-meta);
	}

	[data-color-scheme="auto"] .toc-section ul li a:hover {
		color: var(--color-font-one);
		opacity: 1;
	}
}