/*
 * Tailwind v4 theme tokens.
 * These variables restore the custom design-system values that were
 * previously provided through the v3 JS config.
 */
@theme {
	/* Breakpoints. */
	--breakpoint-xxs: 576px;
	--breakpoint-2xl: 1600px;

	/* Font sizes. */
	--text-xxs: 0.5625rem;
	--text-xxs--line-height: 0.8125rem;
	--text-xs: 0.625rem;
	--text-xs--line-height: 0.875rem;
	--text-sm: 0.75rem; /* 12px */
	--text-sm--line-height: 1.125rem;
	--text-base: 0.8125rem; /* 13px */
	--text-base--line-height: 1.25rem;
	--text-md: 0.875rem; /* 14px */
	--text-md--line-height: 1.375rem;
	--text-lg: 1rem; /* 16px */
	--text-lg--line-height: 1.625rem;
	--text-xl: 1.125rem; /* 18px */
	--text-xl--line-height: 1.625rem;
	--text-2xl: 1.25rem; /* 20px */
	--text-2xl--line-height: 1.75rem;
	--text-3xl: 1.5rem; /* 24px */
	--text-3xl--line-height: 2rem;
	--text-4xl: 1.875rem; /* 30px */
	--text-4xl--line-height: 2.25rem;
	--text-5xl: 3.5rem; /* 56px */
	--text-5xl--line-height: 1;

	/* hues used for color tokens */
	--brand-hue: 144.76;
	--yellow-hue: 86.92;
	--blue-hue: 258.55;
	--red-hue: 29.23;
	--orange-hue: 50.56;

	--gray-hue: var(--blue-hue);

	/* Core brand palette. */
	--color-primary-50: oklch(0.95 0.0125 var(--brand-hue) / 0.90);
	--color-primary-100: oklch(0.94 0.02 var(--brand-hue) / 0.90);
	--color-primary-200: oklch(0.89 0.035 var(--brand-hue) / 0.90);
	--color-primary-300: oklch(0.84 0.050 var(--brand-hue) / 0.90);
	--color-primary-400: oklch(0.687 0.095 var(--brand-hue) / 0.90);
	--color-primary-500: oklch(0.5338 0.1405 var(--brand-hue));
	--color-primary-600: oklch(0.527 0.145 var(--brand-hue) / 0.90);
	--color-primary-700: oklch(0.52 0.15 var(--brand-hue) / 0.90);
	--color-primary-800: oklch(0.47 0.14 var(--brand-hue) / 0.90);
	--color-primary-900: oklch(0.4 0.115 var(--brand-hue) / 0.90);
	--color-primary-950: oklch(0.34 0.095 var(--brand-hue) / 0.90);
	--color-primary: var(--color-primary-500);

	/* Semantic colors. */
	--color-green-50: var(--color-primary-50);
	--color-green-100: var(--color-primary-100);
	--color-green-200: var(--color-primary-200);
	--color-green-300: var(--color-primary-300);
	--color-green-400: var(--color-primary-400);
	--color-green-500: var(--color-primary-500);
	--color-green-600: var(--color-primary-600);
	--color-green-700: var(--color-primary-700);
	--color-green-800: var(--color-primary-800);
	--color-green-900: var(--color-primary-900);
	--color-green-950: var(--color-primary-950);
	--color-green: var(--color-green-500);

	/* Yellow family. */
	--color-yellow-50: oklch(0.985 0.02 var(--yellow-hue) / 0.90);
	--color-yellow-100: oklch(0.97 0.04 var(--yellow-hue) / 0.90);
	--color-yellow-200: oklch(0.945 0.07 var(--yellow-hue) / 0.90);
	--color-yellow-300: oklch(0.91 0.11 var(--yellow-hue) / 0.90);
	--color-yellow-400: oklch(0.88 0.145 var(--yellow-hue) / 0.90);
	--color-yellow-500: oklch(0.8541 0.1706 var(--yellow-hue));
	--color-yellow-600: oklch(0.76 0.145 var(--yellow-hue) / 0.90);
	--color-yellow-700: oklch(0.64 0.12 var(--yellow-hue) / 0.90);
	--color-yellow-800: oklch(0.53 0.095 var(--yellow-hue) / 0.90);
	--color-yellow-900: oklch(0.42 0.07 var(--yellow-hue) / 0.90);
	--color-yellow-950: oklch(0.32 0.05 var(--yellow-hue) / 0.90);
	--color-yellow: var(--color-yellow-500);

	/* Blue family. */
	--color-blue-50: oklch(0.95 0.0125 var(--blue-hue) / 0.90);
	--color-blue-100: oklch(0.9 0.03 var(--blue-hue) / 0.90);
	--color-blue-200: oklch(0.87 0.04 var(--blue-hue) / 0.90);
	--color-blue-300: oklch(0.84 0.050 var(--blue-hue) / 0.90);
	--color-blue-400: oklch(0.687 0.095 var(--blue-hue) / 0.90);
	--color-blue-500: oklch(0.5338 0.1405 var(--blue-hue));
	--color-blue-600: oklch(0.527 0.145 var(--blue-hue) / 0.90);
	--color-blue-700: oklch(0.52 0.15 var(--blue-hue) / 0.90);
	--color-blue-800: oklch(0.47 0.14 var(--blue-hue) / 0.90);
	--color-blue-900: oklch(0.3 0.05 var(--blue-hue) / 0.90);
	--color-blue-950: oklch(0.24 0.04 var(--blue-hue) / 0.90);
	--color-blue: var(--color-blue-500);

	/* Red family. */
	--color-red-50: oklch(0.95 0.0125 var(--red-hue) / 0.90);
	--color-red-100: oklch(0.9 0.03 var(--red-hue) / 0.90);
	--color-red-200: oklch(0.87 0.04 var(--red-hue) / 0.90);
	--color-red-300: oklch(0.84 0.050 var(--red-hue) / 0.90);
	--color-red-400: oklch(0.6995 0.139 var(--red-hue) / 0.90);
	--color-red-500: oklch(0.559 0.2281 var(--red-hue));
	--color-red-600: oklch(0.5395 0.189 var(--red-hue) / 0.90);
	--color-red-700: oklch(0.52 0.15 var(--red-hue) / 0.90);
	--color-red-800: oklch(0.47 0.14 var(--red-hue) / 0.90);
	--color-red-900: oklch(0.4 0.115 var(--red-hue) / 0.90);
	--color-red-950: oklch(0.34 0.095 var(--red-hue) / 0.90);
	--color-red: var(--color-red-500);

	/* Orange family. */
	--color-orange-50: oklch(0.99 0.045 var(--orange-hue) / 0.90);
	--color-orange-100: oklch(0.989 0.08 var(--orange-hue) / 0.90);
	--color-orange-200: oklch(0.988 0.13 var(--orange-hue) / 0.90);
	--color-orange-300: oklch(0.987 0.1756 var(--orange-hue));
	--color-orange-400: oklch(0.832 0.1756 var(--orange-hue));
	--color-orange-500: oklch(0.6771 0.1756 var(--orange-hue));
	--color-orange-600: oklch(0.591 0.1756 var(--orange-hue));
	--color-orange-700: oklch(0.505 0.1756 var(--orange-hue));
	--color-orange-800: oklch(0.46 0.16 var(--orange-hue));
	--color-orange-900: oklch(0.415 0.145 var(--orange-hue));
	--color-orange-950: oklch(0.35 0.13 var(--orange-hue));
	--color-orange: var(--color-orange-500);

	/* Text colors. */
	--color-text-white: oklch(1 0.0017 var(--gray-hue) / 0.90);
	--color-text-black: oklch(0.2 0.0017 var(--gray-hue) / 0.90);
	--color-text-gray: oklch(0.45 0.0072 var(--gray-hue) / 0.95);
	--color-text-gray-light: oklch(0.7 0.0072 var(--gray-hue) / 0.95);

	/* Neutral/app tokens. */

	/* Neutral/app tokens. */
	--color-white: #ffffff;
	--color-black: #151615;

	--color-gray: oklch(0.497 0.0165 var(--gray-hue));
	--color-gray-50: oklch(0.9773 0.003 var(--gray-hue));
	--color-gray-100: oklch(0.9752 0.004 var(--gray-hue));
	--color-gray-200: oklch(0.924 0.01 var(--gray-hue));
	--color-gray-300: oklch(0.894 0.01 var(--gray-hue));
	--color-gray-400: oklch(0.850 0.0106 var(--gray-hue));
	--color-gray-500: oklch(0.735 0.0145 var(--gray-hue));
	--color-gray-600: oklch(0.497 0.0165 var(--gray-hue));
	--color-gray-700: oklch(0.352 0.0147 var(--gray-hue));
	--color-gray-800: oklch(0.262 0.0133 var(--gray-hue));
	--color-gray-900: oklch(0.184 0.0095 var(--gray-hue));
	--color-gray-950: oklch(0.097 0.00475 var(--gray-hue));

	--color-button-accent: var(--color-blue);
	--color-border: var(--color-gray-400);
	--color-divider: var(--color-gray-300);

	/* WordPress palette aliases. */
	--color-wp-blue: #2271b1;
	--color-wp-gray: #f0f0f1;
	--color-wp-orange: #d63638;
	--color-wp-black: #1d2327;

	/* Shadows. */
	--shadow-rsp: rgba(0, 0, 0, 0.1) 0 4px 6px -1px, rgba(0, 0, 0, 0.06) 0 2px 4px -1px;
	--shadow-greenShadow: inset 0 0 3px 2px #ecf4ed;
	--shadow-primaryButtonHover: 0 0 0 3px rgba(34, 113, 177, 0.3);
	--shadow-secondaryButtonHover: 0 0 0 3px rgba(0, 0, 0, 0.1);
	--shadow-tertiaryButtonHover: 0 0 0 3px rgba(255, 0, 0, 0.3);
	--shadow-proButtonHover: 0 0 0 3px #b7d4b8;
	--shadow-layered-low-b: 0 1px 1px rgb(0 0 0 / 0.05), 0 2px 2px rgb(0 0 0 / 0.05), 0 4px 4px rgb(0 0 0 / 0.03);
	--shadow-layered-low-t: 0 -1px 1px rgb(0 0 0 / 0.05), 0 -2px 2px rgb(0 0 0 / 0.05), 0 -4px 4px rgb(0 0 0 / 0.03);
	--shadow-layered-mid-b: 0 1px 1px rgb(0 0 0 / 0.05), 0 2px 2px rgb(0 0 0 / 0.05), 0 4px 4px rgb(0 0 0 / 0.03), 0 8px 8px rgb(0 0 0 / 0.025);
	--shadow-layered-mid-t: 0 -1px 1px rgb(0 0 0 / 0.05), 0 -2px 2px rgb(0 0 0 / 0.05), 0 -4px 4px rgb(0 0 0 / 0.03), 0 -8px 8px rgb(0 0 0 / 0.025);
	--shadow-layered-high-b: 0 1px 1px rgb(0 0 0 / 0.06), 0 2px 2px rgb(0 0 0 / 0.05), 0 4px 4px rgb(0 0 0 / 0.03), 0 8px 8px rgb(0 0 0 / 0.025), 0 16px 16px rgb(0 0 0 / 0.025);
	--shadow-layered-high-t: 0 -1px 1px rgb(0 0 0 / 0.06), 0 -2px 2px rgb(0 0 0 / 0.05), 0 -4px 4px rgb(0 0 0 / 0.03), 0 -8px 8px rgb(0 0 0 / 0.025), 0 -16px 16px rgb(0 0 0 / 0.025);

	/* Button hover ring shadows. */
	--shadow-ringPrimary:   0 0 0 3px rgba(43, 129, 51, 0.5);
	--shadow-ringSecondary: 0 0 0 3px rgba(34, 113, 177, 0.5);
	--shadow-ringNeutral:   0 0 0 3px rgba(0, 0, 0, 0.1);
	--shadow-ringDanger:    0 0 0 3px rgba(198, 39, 59, 0.5);
	--shadow-ringSubtle:    0 0 0 3px rgba(0, 0, 0, 0.05);
	--shadow-ringExcluded:  0 0 0 3px rgba(220, 38, 38, 0.08);

	/* Sticky footer bidirectional shadow. */
	--shadow-stickyFooter: 0 -8px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

	/* Grid and animation tokens. */
	--grid-template-columns-auto-1fr-auto: auto 1fr auto;
	--animate-scrollIndicator: scrollIndicator 1.5s ease-in-out;
	--animate-pulseSlow: pulseSlow 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	--animate-shimmer: shimmer 2s infinite;
}