/*
 * Four distinct themes. The differentiation is multi-layered:
 * color, font, shadow style, border style, corner radius, letter-spacing.
 *
 * Goals per theme:
 *   notion  — warm off-white base, soft pop-up cards, Inter
 *   linear  — true dark, semi-transparent borders, precision tracking
 *   claude  — cream + ivory + serif body + terracotta, editorial sanctum
 *   vercel  — stark white, shadow-as-border, aggressive negative tracking
 */

:root,
[data-theme="notion"] {
	--theme-name: "Notion";

	--bg:         #f6f5f4;
	--bg-card:    #ffffff;
	--bg-alt:     #efede9;
	--bg-code:    #f0eee9;

	--fg:         rgba(0, 0, 0, 0.92);
	--fg-muted:   #5f5a54;
	--fg-subtle:  #9a9590;

	--accent:          #0075de;
	--accent-hover:    #005fb8;
	--accent-contrast: #ffffff;
	--accent-weak:     rgba(0, 117, 222, 0.08);

	--border:         rgba(15, 10, 5, 0.1);
	--border-subtle:  rgba(15, 10, 5, 0.06);
	--border-strong:  rgba(15, 10, 5, 0.2);

	--radius:      10px;
	--radius-sm:   6px;
	--radius-pill: 9999px;

	--shadow-card:
		rgba(15, 10, 5, 0.04) 0 4px 18px,
		rgba(15, 10, 5, 0.03) 0 2px 8px,
		rgba(15, 10, 5, 0.02) 0 1px 3px;
	--shadow-lift:
		rgba(15, 10, 5, 0.08) 0 24px 48px -12px,
		rgba(15, 10, 5, 0.05) 0 8px 16px -4px;

	--font-body: "Inter", -apple-system, system-ui, "PingFang SC", "Segoe UI", sans-serif;
	--font-ui:   "Inter", -apple-system, system-ui, "PingFang SC", "Segoe UI", sans-serif;
	--font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

	--hero-weight:     700;
	--heading-weight:  600;
	--body-weight:     400;
	--heading-tracking: -0.025em;
	--body-tracking:    -0.005em;

	color-scheme: light;
}

[data-theme="linear"] {
	--theme-name: "Linear";

	--bg:         #08090a;
	--bg-card:    #0f1011;
	--bg-alt:     #191a1b;
	--bg-code:    #0a0b0c;

	--fg:         #f7f8f8;
	--fg-muted:   #b6bac0;
	--fg-subtle:  #6c7179;

	--accent:          #7170ff;
	--accent-hover:    #8b8bff;
	--accent-contrast: #ffffff;
	--accent-weak:     rgba(113, 112, 255, 0.14);

	--border:         rgba(255, 255, 255, 0.08);
	--border-subtle:  rgba(255, 255, 255, 0.04);
	--border-strong:  rgba(255, 255, 255, 0.16);

	--radius:      6px;
	--radius-sm:   4px;
	--radius-pill: 9999px;

	--shadow-card:
		rgba(0, 0, 0, 0.5) 0 1px 3px,
		rgba(0, 0, 0, 0.3) 0 8px 24px -8px,
		inset 0 1px 0 rgba(255, 255, 255, 0.03);
	--shadow-lift:
		rgba(0, 0, 0, 0.7) 0 32px 64px -24px,
		rgba(0, 0, 0, 0.5) 0 12px 24px -12px,
		rgba(113, 112, 255, 0.15) 0 0 32px -8px;

	--font-body: "Inter", -apple-system, system-ui, "PingFang SC", "Segoe UI", sans-serif;
	--font-ui:   "Inter", -apple-system, system-ui, "PingFang SC", "Segoe UI", sans-serif;
	--font-mono: "Berkeley Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

	--hero-weight:     510;
	--heading-weight:  510;
	--body-weight:     400;
	--heading-tracking: -0.033em;
	--body-tracking:    -0.01em;

	color-scheme: dark;
}

[data-theme="claude"] {
	--theme-name: "Claude";

	--bg:         #f5f4ed;
	--bg-card:    #faf9f5;
	--bg-alt:     #ece9dd;
	--bg-code:    #ebe8dc;

	--fg:         #1a1a18;
	--fg-muted:   #5e5d59;
	--fg-subtle:  #87867f;

	--accent:          #c96442;
	--accent-hover:    #d97757;
	--accent-contrast: #faf9f5;
	--accent-weak:     rgba(201, 100, 66, 0.1);

	--border:         #e4e1d4;
	--border-subtle:  #ece9dd;
	--border-strong:  #cfccbe;

	--radius:      12px;
	--radius-sm:   8px;
	--radius-pill: 9999px;

	--shadow-card:
		0 0 0 1px rgba(20, 20, 19, 0.06),
		0 1px 2px rgba(20, 20, 19, 0.04),
		0 4px 12px rgba(20, 20, 19, 0.03);
	--shadow-lift:
		0 0 0 1px rgba(20, 20, 19, 0.1),
		0 2px 4px rgba(20, 20, 19, 0.04),
		0 16px 40px -12px rgba(20, 20, 19, 0.12);

	--font-body: "Iowan Old Style", "Apple Garamond", "Songti SC", Georgia, "Times New Roman", serif;
	--font-ui:   "Inter", -apple-system, system-ui, "PingFang SC", "Segoe UI", sans-serif;
	--font-mono: "SF Mono", Menlo, "JetBrains Mono", monospace;

	--hero-weight:     600;
	--heading-weight:  600;
	--body-weight:     400;
	--heading-tracking: -0.015em;
	--body-tracking:    0;

	color-scheme: light;
}

[data-theme="vercel"] {
	--theme-name: "Vercel";

	--bg:         #ffffff;
	--bg-card:    #ffffff;
	--bg-alt:     #fafafa;
	--bg-code:    #fafafa;

	--fg:         #171717;
	--fg-muted:   #525252;
	--fg-subtle:  #8f8f8f;

	--accent:          #0072f5;
	--accent-hover:    #0058c7;
	--accent-contrast: #ffffff;
	--accent-weak:     rgba(0, 114, 245, 0.08);

	/* Vercel's signature: borders are shadows. These tokens are
	   left effectively-invisible so nothing renders a real border;
	   shadow-card does the border-drawing job instead. */
	--border:         rgba(0, 0, 0, 0);
	--border-subtle:  rgba(0, 0, 0, 0);
	--border-strong:  rgba(0, 0, 0, 0);

	--radius:      12px;
	--radius-sm:   8px;
	--radius-pill: 9999px;

	--shadow-card:
		rgba(0, 0, 0, 0.08) 0 0 0 1px,
		rgba(0, 0, 0, 0.04) 0 2px 2px,
		rgba(0, 0, 0, 0.04) 0 8px 8px -8px;
	--shadow-lift:
		rgba(0, 0, 0, 0.12) 0 0 0 1px,
		rgba(0, 0, 0, 0.06) 0 2px 4px,
		rgba(0, 0, 0, 0.12) 0 24px 48px -12px;

	--font-body: "Geist", "Inter", -apple-system, system-ui, "PingFang SC", "Segoe UI", sans-serif;
	--font-ui:   "Geist", "Inter", -apple-system, system-ui, "PingFang SC", "Segoe UI", sans-serif;
	--font-mono: "Geist Mono", "JetBrains Mono", "SF Mono", Menlo, monospace;

	--hero-weight:     600;
	--heading-weight:  600;
	--body-weight:     400;
	--heading-tracking: -0.045em;
	--body-tracking:    -0.011em;

	color-scheme: light;
}

/* Smooth cross-theme transition where supported (Chrome 111+) */
@supports (view-transition-name: none) {
	html { view-transition-name: root; }
	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: 0.35s;
	}
}

/* Always-on fallback: transition the major surfaces on token change. */
body,
.site-header,
.site-footer,
.post,
.post-card,
.category-card,
.hero,
.theme-switcher {
	transition:
		background-color 0.28s ease,
		color 0.28s ease,
		border-color 0.28s ease,
		box-shadow 0.28s ease;
}