:root {
	--acbest-color-primary-blue: #0b4f8a;
	--acbest-color-secondary-blue: #1f7bbf;
	--acbest-color-accent-gold: #c99a2e;
	--acbest-color-light-background: #f6f8fb;
	--acbest-color-surface: #ffffff;
	--acbest-color-surface-muted: #eef3f8;
	--acbest-color-border: #d8e1ea;
	--acbest-color-dark-text: #1b2430;
	--acbest-color-muted-text: #52616f;
	--acbest-color-white: #ffffff;

	--acbest-font-family-base: "Noto Sans Thai", "Noto Sans", Arial, sans-serif;
	--acbest-font-family-heading: "Noto Sans Thai", "Noto Sans", Arial, sans-serif;

	--acbest-font-size-xs: 0.75rem;
	--acbest-font-size-sm: 0.875rem;
	--acbest-font-size-md: 1rem;
	--acbest-font-size-lg: 1.125rem;
	--acbest-font-size-xl: 1.375rem;
	--acbest-font-size-2xl: 1.75rem;
	--acbest-font-size-3xl: 2.25rem;

	--acbest-line-height-tight: 1.25;
	--acbest-line-height-base: 1.7;
	--acbest-line-height-loose: 1.9;

	--acbest-font-weight-regular: 400;
	--acbest-font-weight-medium: 500;
	--acbest-font-weight-semibold: 600;
	--acbest-font-weight-bold: 700;

	--acbest-space-1: 0.25rem;
	--acbest-space-2: 0.5rem;
	--acbest-space-3: 0.75rem;
	--acbest-space-4: 1rem;
	--acbest-space-5: 1.5rem;
	--acbest-space-6: 2rem;
	--acbest-space-7: 3rem;
	--acbest-space-8: 4rem;

	--acbest-container-sm: 40rem;
	--acbest-container-md: 64rem;
	--acbest-container-lg: 75rem;
	--acbest-container-xl: 86rem;

	--acbest-radius-sm: 0.25rem;
	--acbest-radius-md: 0.5rem;
	--acbest-radius-lg: 0.75rem;

	--acbest-shadow-sm: 0 1px 2px rgb(27 36 48 / 8%);
	--acbest-shadow-md: 0 8px 24px rgb(27 36 48 / 10%);

	--acbest-focus-ring: 0 0 0 3px rgb(31 123 191 / 25%);
}

html {
	max-width: 100%;
	overflow-x: hidden;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	background: var(--acbest-color-light-background);
	color: var(--acbest-color-dark-text);
	max-width: 100%;
	overflow-x: hidden;
	overflow-wrap: anywhere;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

img,
video {
	max-width: 100%;
	height: auto;
}

.acbest-page svg,
.acbest-site-header svg,
.acbest-site-footer svg {
	max-width: 100%;
}

a {
	color: var(--acbest-color-primary-blue);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

a:hover,
a:focus {
	color: var(--acbest-color-secondary-blue);
}

:focus-visible {
	outline: none;
	box-shadow: var(--acbest-focus-ring);
}