:root {
	color-scheme: light dark;

	/* Primitive: colour. */
	--sj-paper-50: #fdfbf6;
	--sj-paper-100: #f4f0e8;
	--sj-paper-200: #e6ded1;
	--sj-graphite-700: #2e2b2b;
	--sj-graphite-800: #211f20;
	--sj-graphite-900: #161415;
	--sj-graphite-950: #0d0c0d;
	--sj-white: #ffffff;
	--sj-black: #000000;
	--sj-oxblood-400: #9b555c;
	--sj-oxblood-500: #742f36;
	--sj-oxblood-600: #5e242b;
	--sj-green-500: #2f684d;
	--sj-red-500: #9c3030;

	/* Primitive: spacing, based on 4px. */
	--sj-space-1: 0.25rem;
	--sj-space-2: 0.5rem;
	--sj-space-3: 0.75rem;
	--sj-space-4: 1rem;
	--sj-space-5: 1.25rem;
	--sj-space-6: 1.5rem;
	--sj-space-8: 2rem;
	--sj-space-10: 2.5rem;
	--sj-space-12: 3rem;
	--sj-space-16: 4rem;
	--sj-space-20: 5rem;
	--sj-space-24: 6rem;
	--sj-space-32: 8rem;
	--sj-space-40: 10rem;

	/* Primitive: typography. */
	--sj-font-body: "Helvetica Neue", "Avenir Next", Arial, sans-serif;
	--sj-font-display: "Iowan Old Style", Baskerville, "Times New Roman", serif;
	--sj-font-size-xs: 0.75rem;
	--sj-font-size-sm: 0.875rem;
	--sj-font-size-base: 1rem;
	--sj-font-size-lg: clamp(1.0625rem, 1.3vw, 1.25rem);
	--sj-font-size-h3: clamp(1.5rem, 2.7vw, 2.5rem);
	--sj-font-size-h2: clamp(2.5rem, 5.9vw, 6.4rem);
	--sj-font-size-display: clamp(4rem, 11.8vw, 12rem);
	--sj-leading-tight: 0.9;
	--sj-leading-heading: 1.02;
	--sj-leading-body: 1.65;
	--sj-tracking-tight: -0.045em;
	--sj-tracking-label: 0.14em;

	/* Primitive: geometry and depth. */
	--sj-radius-none: 0;
	--sj-radius-xs: 0.125rem;
	--sj-radius-sm: 0.25rem;
	--sj-shadow-raised: 0 0.25rem 0.75rem color-mix(in srgb, var(--sj-black) 8%, transparent), 0 1.5rem 3rem color-mix(in srgb, var(--sj-black) 7%, transparent);
	--sj-shadow-overlay: 0 0.5rem 1.5rem color-mix(in srgb, var(--sj-black) 12%, transparent), 0 2rem 5rem color-mix(in srgb, var(--sj-black) 18%, transparent);

	/* Primitive: motion and layering. */
	--sj-motion-fast: 120ms;
	--sj-motion-base: 200ms;
	--sj-motion-medium: 280ms;
	--sj-motion-slow: 400ms;
	--sj-motion-reveal: 600ms;
	--sj-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--sj-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
	--sj-z-base: 0;
	--sj-z-content: 10;
	--sj-z-header: 50;
	--sj-z-overlay: 100;
	--sj-z-progress: 120;
	--sj-z-menu: 200;
	--sj-z-cursor-rope: 280;
	--sj-z-cursor: 290;
	--sj-z-flash: 300;
	--sj-z-loader: 400;

	/* Semantic: intentional light mode. */
	--sj-surface-canvas: var(--sj-paper-100);
	--sj-surface-raised: var(--sj-paper-50);
	--sj-surface-overlay: color-mix(in srgb, var(--sj-graphite-950) 92%, transparent);
	--sj-surface-inverse: var(--sj-graphite-900);
	--sj-text-primary: var(--sj-graphite-900);
	--sj-text-secondary: color-mix(in srgb, var(--sj-graphite-900) 74%, transparent);
	--sj-text-muted: color-mix(in srgb, var(--sj-graphite-900) 56%, transparent);
	--sj-text-inverse: var(--sj-paper-50);
	--sj-border-hairline: color-mix(in srgb, var(--sj-graphite-900) 14%, transparent);
	--sj-border-strong: color-mix(in srgb, var(--sj-graphite-900) 42%, transparent);
	--sj-accent: var(--sj-accent-user, var(--sj-oxblood-500));
	--sj-focus: var(--sj-oxblood-500);
	--sj-success: var(--sj-green-500);
	--sj-error: var(--sj-red-500);

	/* Component. */
	--sj-button-bg: var(--sj-graphite-900);
	--sj-button-text: var(--sj-paper-50);
	--sj-button-border: var(--sj-graphite-900);
	--sj-button-radius: var(--sj-radius-none);
	--sj-input-bg: var(--sj-surface-raised);
	--sj-input-text: var(--sj-text-primary);
	--sj-input-border: var(--sj-border-strong);
	--sj-input-radius: var(--sj-radius-xs);
	--sj-status-radius: var(--sj-radius-sm);
	--sj-card-radius: var(--sj-radius-none);
	--sj-header-text: var(--sj-text-inverse);
	--sj-admin-bar-height: 0px;
	--sj-shell-gutter: max(clamp(var(--sj-space-5), 4vw, var(--sj-space-16)), env(safe-area-inset-left), env(safe-area-inset-right));
	--sj-shell-max: 100rem;
	--sj-section-space: clamp(var(--sj-space-20), 10vw, var(--sj-space-40));
}

@media (prefers-color-scheme: dark) {
	:root {
		--sj-focus: var(--sj-paper-50);
		--sj-surface-canvas: var(--sj-graphite-950);
		--sj-surface-raised: var(--sj-graphite-900);
		--sj-surface-overlay: color-mix(in srgb, var(--sj-black) 88%, transparent);
		--sj-surface-inverse: var(--sj-paper-100);
		--sj-text-primary: var(--sj-paper-50);
		--sj-text-secondary: color-mix(in srgb, var(--sj-paper-50) 76%, transparent);
		--sj-text-muted: color-mix(in srgb, var(--sj-paper-50) 58%, transparent);
		--sj-text-inverse: var(--sj-graphite-950);
		--sj-border-hairline: color-mix(in srgb, var(--sj-paper-50) 16%, transparent);
		--sj-border-strong: color-mix(in srgb, var(--sj-paper-50) 40%, transparent);
		--sj-button-bg: var(--sj-paper-50);
		--sj-button-text: var(--sj-graphite-950);
		--sj-button-border: var(--sj-paper-50);
		--sj-input-bg: var(--sj-graphite-900);
		--sj-input-text: var(--sj-paper-50);
		--sj-input-border: color-mix(in srgb, var(--sj-paper-50) 38%, transparent);
	}
}

@media (min-width: 783px) {
	.admin-bar {
		--sj-admin-bar-height: 32px;
	}
}

@media (max-width: 782px) {
	.admin-bar {
		--sj-admin-bar-height: 46px;
	}
}