/*
Theme Name: Kraft
Theme URI: https://kraft.blog
Author: Brandon Kraft
Author URI: https://kraft.blog
Description: A custom block theme for kraft.blog — warm, playful, and content-rich.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kraft
Tags: blog, block-patterns, full-site-editing, custom-colors, custom-fonts
*/

/* ==========================================================================
   Custom Properties — tokens theme.json can't express
   ========================================================================== */

:root {
	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(45, 48, 71, 0.06);
	--shadow-md: 0 2px 8px rgba(45, 48, 71, 0.08);
	--shadow-lg: 0 4px 16px rgba(45, 48, 71, 0.1);
	--shadow-xl: 0 8px 32px rgba(45, 48, 71, 0.12);

	/* Border radius */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-full: 9999px;

	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;
	--transition-slow: 400ms ease;
}

/* ==========================================================================
   Skip Link
   ========================================================================== */

.skip-link {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link:focus {
	background-color: var(--wp--preset--color--surface);
	clip: auto !important;
	clip-path: none;
	color: var(--wp--preset--color--text);
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	outline: 2px solid var(--wp--preset--color--accent-dark);
	outline-offset: 2px;
}

/* ==========================================================================
   Post Content — constrain media to container width
   ========================================================================== */

.wp-block-post-content img,
.wp-block-post-content iframe,
.wp-block-post-content video {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   Focus Styles
   ========================================================================== */

:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-dark);
	outline-offset: 2px;
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0s !important;
		animation-duration: 0s !important;
	}
}

/* ==========================================================================
   Dark Mode — custom property overrides
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	:root {
		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
		--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.25);
		--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.3);
		--shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.35);
	}

	body {
		--wp--preset--color--bg: #1a1b2e;
		--wp--preset--color--surface: #242540;
		--wp--preset--color--surface-alt: #2d2e4a;
		--wp--preset--color--border: #3d3e5a;
		--wp--preset--color--border-light: #33344e;
		--wp--preset--color--text: #e8e6e1;
		--wp--preset--color--text-secondary: #b0afa8;
		--wp--preset--color--text-tertiary: #908f9a;
		--wp--preset--color--text-inverse: #1a1b2e;
		--wp--preset--color--primary: #8b8eff;
		--wp--preset--color--primary-light: #a0a3ff;
		--wp--preset--color--primary-dark: #12132a;
		--wp--preset--color--secondary: #e58e6a;
		--wp--preset--color--secondary-light: #f0a080;
		--wp--preset--color--secondary-dark: #c46a40;
		--wp--preset--color--accent: #f0c060;
		--wp--preset--color--accent-light: #ffe090;
		--wp--preset--color--accent-dark: #d4a030;
		--wp--preset--color--success: #4aaa6c;
		--wp--preset--color--error: #e06060;
		--wp--preset--color--warning: #e0a050;
		--wp--preset--color--info: #5a9ee0;
		--wp--preset--color--fediverse: #8b8cff;
		--wp--preset--color--webmention: #e0845e;
	}
}