/**
 * Design Tokens
 *
 * Single source of truth for colors, typography, spacing, radius, shadow and layout.
 * Color / font-size values are mapped from theme.json presets so the block editor
 * and the frontend always share the same palette (hex fallbacks keep the CSS usable
 * even if theme.json is unavailable).
 *
 * Rule: components must consume these variables. Do not hardcode colors or spacing
 * inside component rules.
 */

:root {
	/* ---------------------------------------------------------------------
	 * Colors
	 * ------------------------------------------------------------------ */
	--color-primary: var(--wp--preset--color--primary, #ce4127);
	--color-primary-hover: var(--wp--preset--color--primary-hover, #b03520);
	--color-primary-light: var(--wp--preset--color--primary-light, #fdece7);

	/* Warm accent. Decorative use only (never as text color on white). */
	--color-accent: var(--wp--preset--color--accent, #ff7a59);
	--color-accent-light: #fff3ee;

	--color-background: var(--wp--preset--color--background, #ffffff);
	--color-background-alt: var(--wp--preset--color--background-alt, #faf8f7);
	--color-background-muted: var(--wp--preset--color--background-muted, #f1f3f6);
	--color-surface: var(--wp--preset--color--surface, #ffffff);

	--color-text-primary: var(--wp--preset--color--text-primary, #16233d);
	--color-text-secondary: var(--wp--preset--color--text-secondary, #5a6780);
	--color-text-inverse: var(--wp--preset--color--text-inverse, #ffffff);

	--color-border: var(--wp--preset--color--border, #e3e7ee);
	--color-border-strong: #c8d0dc;

	--color-success: var(--wp--preset--color--success, #1a7353);
	--color-warning: var(--wp--preset--color--warning, #985a00);
	--color-error: var(--wp--preset--color--error, #c0392b);
	--color-info: var(--wp--preset--color--info, #1f6fb2);

	--color-success-light: #e8f5ef;
	--color-warning-light: #fdf3e2;
	--color-error-light: #fdeceb;
	--color-info-light: #eaf3fb;

	--color-focus: #1f6fb2;
	--color-overlay: rgba(22, 35, 61, 0.45);

	/* ---------------------------------------------------------------------
	 * Typography
	 * ------------------------------------------------------------------ */
	--font-family-base: var(
		--wp--preset--font-family--base,
		-apple-system,
		BlinkMacSystemFont,
		"Helvetica Neue",
		"Hiragino Sans",
		"Hiragino Kaku Gothic ProN",
		"Noto Sans JP",
		"Yu Gothic",
		Meiryo,
		sans-serif
	);
	--font-family-numeric: "Helvetica Neue", Arial, var(--font-family-base);

	--font-size-xs: var(--wp--preset--font-size--xs, 0.75rem);
	--font-size-sm: var(--wp--preset--font-size--sm, 0.875rem);
	--font-size-base: var(--wp--preset--font-size--base, 1rem);
	--font-size-lg: var(--wp--preset--font-size--lg, 1.125rem);
	--font-size-xl: var(--wp--preset--font-size--xl, 1.25rem);
	--font-size-2xl: var(--wp--preset--font-size--2xl, 1.5rem);
	--font-size-3xl: var(--wp--preset--font-size--3xl, 1.875rem);
	--font-size-4xl: var(--wp--preset--font-size--4xl, 2.25rem);

	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-bold: 700;

	--line-height-tight: 1.3;
	--line-height-heading: 1.45;
	--line-height-base: 1.8;

	--letter-spacing-tight: -0.01em;
	--letter-spacing-base: 0.01em;

	/* ---------------------------------------------------------------------
	 * Spacing (4px base scale)
	 * ------------------------------------------------------------------ */
	--space-1: 0.25rem; /* 4px */
	--space-2: 0.5rem; /* 8px */
	--space-3: 0.75rem; /* 12px */
	--space-4: 1rem; /* 16px */
	--space-6: 1.5rem; /* 24px */
	--space-8: 2rem; /* 32px */
	--space-12: 3rem; /* 48px */
	--space-16: 4rem; /* 64px */
	--space-24: 6rem; /* 96px */

	/* ---------------------------------------------------------------------
	 * Radius
	 * ------------------------------------------------------------------ */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 20px;
	--radius-full: 999px;

	/* ---------------------------------------------------------------------
	 * Shadow
	 * ------------------------------------------------------------------ */
	--shadow-sm: 0 1px 2px rgba(22, 35, 61, 0.06), 0 1px 3px rgba(22, 35, 61, 0.05);
	--shadow-md: 0 2px 6px rgba(22, 35, 61, 0.07), 0 6px 16px rgba(22, 35, 61, 0.07);
	--shadow-lg: 0 8px 24px rgba(22, 35, 61, 0.1), 0 16px 40px rgba(22, 35, 61, 0.08);

	/* ---------------------------------------------------------------------
	 * Layout
	 * ------------------------------------------------------------------ */
	--content-width: 1120px;
	--content-width-wide: 1280px;
	--content-width-narrow: 720px;
	--content-gutter: var(--space-4);
	--section-gap: var(--space-12);
	--header-height: 56px;

	/* ---------------------------------------------------------------------
	 * Motion & layering
	 * ------------------------------------------------------------------ */
	--transition-fast: 120ms ease;
	--transition-base: 200ms ease;

	--z-base: 1;
	--z-sticky: 100;
	--z-header: 200;
	--z-overlay: 300;

	/* ---------------------------------------------------------------------
	 * Prose (shared by frontend content + editor canvas)
	 * ------------------------------------------------------------------ */
	--prose-h2-size: var(--font-size-2xl);
	--prose-h3-size: var(--font-size-xl);
	--prose-h4-size: var(--font-size-lg);
	--prose-block-gap: var(--space-6);
	--prose-heading-gap-top: var(--space-12);
	--prose-heading-gap-bottom: var(--space-4);
}

@media (min-width: 768px) {
	:root {
		--content-gutter: var(--space-6);
		--section-gap: var(--space-16);
		--header-height: 64px;
		--prose-h2-size: var(--font-size-3xl);
		--prose-h3-size: var(--font-size-2xl);
	}
}

@media (min-width: 1024px) {
	:root {
		--content-gutter: var(--space-8);
	}
}