/**
 * SalimPick design tokens.
 *
 * Color tokens live in theme.json (theme-palette1..11, exposed to CSS as
 * --wp--preset--color--{slug}) so the block editor's color picker stays in
 * sync. Everything theme.json doesn't cover — spacing, radius, shadow,
 * typography — lives here as plain custom properties.
 *
 * These are a starting point, not final values — adjust freely once real
 * layouts are being built.
 */

:root {
	/* Typography */
	--sp-font-family: var(--wp--preset--font-family--salimpick-sans, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, "Noto Sans KR", "Malgun Gothic", "맑은 고딕", sans-serif);

	--sp-font-size-xs: 0.75rem;   /* 12px */
	--sp-font-size-sm: 0.875rem;  /* 14px */
	--sp-font-size-base: 1rem;    /* 16px */
	--sp-font-size-lg: 1.125rem;  /* 18px */
	--sp-font-size-xl: 1.375rem;  /* 22px */
	--sp-font-size-2xl: 1.75rem;  /* 28px */
	--sp-font-size-3xl: 2.5rem;   /* 40px */

	--sp-line-height-body: 1.7;
	--sp-line-height-heading: 1.35;

	/* Spacing scale */
	--sp-space-1: 0.25rem;  /* 4px */
	--sp-space-2: 0.5rem;   /* 8px */
	--sp-space-3: 0.75rem;  /* 12px */
	--sp-space-4: 1rem;     /* 16px */
	--sp-space-5: 1.5rem;   /* 24px */
	--sp-space-6: 2rem;     /* 32px */
	--sp-space-7: 3rem;     /* 48px */
	--sp-space-8: 4rem;     /* 64px */

	/* Shape */
	--sp-border-width: 1px;
	--sp-radius-sm: 6px;
	--sp-radius-md: 10px;
	--sp-radius-lg: 12px;
	--sp-radius-full: 999px;

	/* Elevation — used sparingly; cards rely on --sp-border, not shadow */
	--sp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);

	/* Color aliases onto the theme.json palette, for readability at call sites.
	   theme-palette4 ("Strong text") and theme-palette6 ("Subtle text (Muted)")
	   are currently identical to palette3/palette5 respectively and unused by
	   any of these aliases — left in theme.json rather than removed, since a
	   Kadence Blocks editor session may already reference those slugs by name;
	   deleting them is a decision for whoever actually needs the visual
	   distinction they were meant to provide. */
	--sp-color-bg: var(--wp--preset--color--theme-palette9, #fafaf8);
	--sp-color-surface: var(--wp--preset--color--theme-palette8, #ffffff);
	--sp-color-text: var(--wp--preset--color--theme-palette3, #222222);
	--sp-color-text-muted: var(--wp--preset--color--theme-palette5, #5f645f);
	--sp-color-border: var(--wp--preset--color--theme-palette7, #e8eae6);
	--sp-color-primary: var(--wp--preset--color--theme-palette1, #7f9c8a);
	--sp-color-primary-hover: var(--wp--preset--color--theme-palette12, #6c8875);
	--sp-color-primary-soft: var(--wp--preset--color--theme-palette2, #eef4f0);
	--sp-color-beige: var(--wp--preset--color--theme-palette10, #f5f0e8);
	--sp-color-blue-soft: var(--wp--preset--color--theme-palette11, #eef3f5);

	/* A darker sage specifically for link TEXT that must meet WCAG AA
	   (4.5:1) on light backgrounds — --sp-color-primary itself (#7f9c8a)
	   only reaches ~2.99:1 on white, which is why new text-contrast-
	   sensitive components use this instead rather than repeating that
	   gap. #566c5d measured at ~5.68:1 on white / ~5.09:1 on
	   --sp-color-primary-soft. See docs/design/CTA-DESIGN-DECISION-20260902.md. */
	--sp-color-link-accessible: #566c5d;
}

body {
	font-family: var(--sp-font-family);
	color: var(--sp-color-text);
	background-color: var(--sp-color-bg);
	line-height: var(--sp-line-height-body);
}

h1, h2, h3, h4, h5, h6 {
	line-height: var(--sp-line-height-heading);
}

/* --sp-color-link-accessible, not --sp-color-primary: sage measures
   ~2.99:1 on white/beige, under the WCAG 2.1 SC 1.4.11 3:1 non-text-
   contrast minimum for a focus indicator (2026-09-16 a11y pass). */
:where(.salimpick-header, .salimpick-footer, .salimpick-section) a:focus-visible,
:where(.salimpick-header, .salimpick-footer, .salimpick-section) button:focus-visible {
	outline: 2px solid var(--sp-color-link-accessible);
	outline-offset: 2px;
}

.screen-reader-text {
	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;
}

@media (prefers-reduced-motion: reduce) {
	.salimpick-section *,
	.salimpick-header *,
	.salimpick-footer * {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}