/**
 * Global design tokens — light theme default; dark on home only (.ska-theme-dark).
 */
html,
body {
	width: 100%;
	max-width: none;
	margin: 0;
	background: var(--ska-color-bg);
	color: var(--ska-color-text);
	font-family: var(--ska-font-body);
}

:root {
	--ska-layout-max: none;
	--ska-layout-gutter: 0;
	--ska-layout-gutter-inline: clamp(12px, 2vw, 24px);
	--ska-gallery-columns: 8;
	--ska-gallery-gap: 2px;
	--ska-chrome-header-h: 52px;
	--ska-chrome-footer-h: 36px;
	--ska-work-hero-max-height: 80vh;

	--ska-font-heading: "Yellix", system-ui, -apple-system, "Segoe UI", sans-serif;
	--ska-font-body: "Yellix", system-ui, -apple-system, "Segoe UI", sans-serif;

	--ska-fs-14: 14px;
	--ska-fs-16: 16px;
	--ska-fs-18: 18px;
	--ska-fs-24: 24px;
	--ska-fs-36: 36px;
	--ska-fs-48: 48px;
	--ska-fs-88: 88px;

	--ska-color-bg: #faf9f6;
	--ska-color-text: #000000;
	--ska-color-text-muted: #000000;
	--ska-color-text-soft: #000000;
	--ska-color-text-dark: #000000;
	--ska-color-lang: #5e5d5d;
	--ska-color-white: #ffffff;
	--ska-color-border: rgba(11, 11, 11, 0.08);
	--ska-color-border-strong: rgba(11, 11, 11, 0.14);
	--ska-color-surface-elevated: #ffffff;
	--ska-header-footer-bg: rgba(250, 249, 246, 0.94);

	--ska-bg-cream: #f0eeeb;
	--ska-bg-warm: #faf9f6;
	--ska-work-accordion-content-bg: rgba(11, 11, 11, 0.045);
	--ska-bg-light: #f8f6f2;
	--ska-bg-tab-icon: #f0eeeb;

	--ska-z-popup: 250;
	--ska-z-chrome: 300;
	--ska-z-modal: 400;
	--ska-z-lightbox: 1200;

	--ska-gradient-overlay: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.25) 0%,
		rgba(0, 0, 0, 0.15) 50%,
		rgba(0, 0, 0, 0.35) 100%
	);

	--ska-overlay-backdrop: rgba(11, 11, 11, 0.42);
	--ska-dialog-bg: #ffffff;
	--ska-dialog-border: rgba(11, 11, 11, 0.12);
	--ska-dialog-shadow: 0 18px 48px rgba(11, 11, 11, 0.12);
	--ska-dialog-head-border: rgba(11, 11, 11, 0.08);
	--ska-control-muted-bg: rgba(11, 11, 11, 0.06);
	--ska-control-muted-bg-hover: rgba(11, 11, 11, 0.12);
	--ska-scrollbar-thumb: rgba(11, 11, 11, 0.28);
	--ska-scrollbar-track: rgba(11, 11, 11, 0.08);
	--ska-scrollbar-thumb-hover: rgba(11, 11, 11, 0.38);
	--ska-scrollbar-thumb-border: rgba(11, 11, 11, 0.1);
	--ska-link-underline: rgba(11, 11, 11, 0.24);
	--ska-input-focus-border: rgba(11, 11, 11, 0.24);
	--ska-flip-overlay: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.38) 0%,
		rgba(248, 246, 242, 0.56) 100%
	);
	--ska-flip-details-text: #000000;
	--ska-flip-details-muted: #000000;
	--ska-flip-details-border: rgba(11, 11, 11, 0.28);
	--ska-flip-details-shadow: 0 1px 10px rgba(255, 255, 255, 0.75);
	--ska-placeholder-fill: linear-gradient(135deg, rgba(236, 234, 230, 0.98), rgba(248, 246, 242, 0.98));
	--ska-placeholder-stripe: rgba(11, 11, 11, 0.05);
	--ska-skeleton-shine: rgba(255, 255, 255, 0.62);
	--ska-skeleton-base: rgba(236, 234, 230, 0.95);
	--ska-skeleton-highlight: rgba(248, 246, 242, 0.98);
}

body.ska-theme-dark {
	--ska-color-bg: #141414;
	--ska-color-text: #f2f2f0;
	--ska-color-text-muted: #f2f2f0;
	--ska-color-text-soft: #f2f2f0;
	--ska-color-text-dark: #ffffff;
	--ska-color-lang: #a8a8a6;
	--ska-color-white: #1c1c1c;
	--ska-color-border: rgba(255, 255, 255, 0.08);
	--ska-color-border-strong: rgba(255, 255, 255, 0.14);
	--ska-color-surface-elevated: #242424;
	--ska-header-footer-bg: rgba(20, 20, 20, 0.94);

	--ska-bg-cream: #141414;
	--ska-bg-warm: #141414;
	--ska-work-accordion-content-bg: rgba(255, 255, 255, 0.06);
	--ska-bg-light: #181818;
	--ska-bg-tab-icon: #222222;

	--ska-gradient-overlay: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.45) 0%,
		rgba(0, 0, 0, 0.25) 50%,
		rgba(0, 0, 0, 0.55) 100%
	);

	--ska-overlay-backdrop: rgba(8, 8, 8, 0.42);
	--ska-dialog-bg: rgba(24, 24, 24, 0.96);
	--ska-dialog-border: rgba(255, 255, 255, 0.12);
	--ska-dialog-shadow: 0 18px 48px rgba(0, 0, 0, 0.38);
	--ska-dialog-head-border: rgba(255, 255, 255, 0.08);
	--ska-control-muted-bg: rgba(255, 255, 255, 0.06);
	--ska-control-muted-bg-hover: rgba(255, 255, 255, 0.12);
	--ska-scrollbar-thumb: rgba(255, 255, 255, 0.28);
	--ska-scrollbar-track: rgba(255, 255, 255, 0.08);
	--ska-scrollbar-thumb-hover: rgba(255, 255, 255, 0.42);
	--ska-scrollbar-thumb-border: rgba(255, 255, 255, 0.1);
	--ska-link-underline: rgba(255, 255, 255, 0.24);
	--ska-input-focus-border: rgba(255, 255, 255, 0.28);
	--ska-flip-overlay: linear-gradient(
		180deg,
		rgba(8, 8, 8, 0.42) 0%,
		rgba(8, 8, 8, 0.62) 100%
	);
	--ska-flip-details-text: #ffffff;
	--ska-flip-details-muted: rgba(255, 255, 255, 0.82);
	--ska-flip-details-border: rgba(255, 255, 255, 0.42);
	--ska-flip-details-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
	--ska-placeholder-fill: linear-gradient(135deg, rgba(34, 34, 34, 0.95), rgba(28, 28, 28, 0.95));
	--ska-placeholder-stripe: rgba(255, 255, 255, 0.04);
	--ska-skeleton-shine: rgba(255, 255, 255, 0.08);
	--ska-skeleton-base: rgba(34, 34, 34, 0.95);
	--ska-skeleton-highlight: rgba(42, 42, 42, 0.98);
}