/**
 * Chu Tuoc CSS foundation — tokens, base and the requested public classes.
 * Integration/contrast: docs/04-theme/design-system-foundation.md.
 * Load after main.css when adopting this foundation; no runtime dependencies.
 */

:root {
	/* Brand and surfaces. The original orange is a fill, with dark button text. */
	--chutuoc-color-primary: #fb6e2e;
	--chutuoc-color-primary-hover: #ef6425;
	--chutuoc-color-primary-text: #b23a04;
	--chutuoc-color-primary-soft: #feeee7;
	--chutuoc-color-background: #ffffff;
	--chutuoc-color-background-alt: #f5f1eb;
	--chutuoc-color-background-dark: #172126;
	--chutuoc-color-text: #172126;
	--chutuoc-color-muted: #5d666b;
	--chutuoc-color-border: #7d8986;

	/* Explicit foregrounds for dark Footer/section backgrounds. */
	--chutuoc-color-on-dark: #ffffff;
	--chutuoc-color-muted-on-dark: #bbc5ca;
	--chutuoc-color-link-on-dark: #ffd7c5;

	/* Compatibility names for existing theme consumers. */
	--chutuoc-color-primary-dark: var(--chutuoc-color-primary-text);
	--chutuoc-color-heading: var(--chutuoc-color-text);
	--chutuoc-color-surface: var(--chutuoc-color-background);
	--chutuoc-color-surface-dark: var(--chutuoc-color-background-dark);
	--chutuoc-color-control-border: var(--chutuoc-color-border);

	/* Type: pixel equivalents assume the browser's default 16px root size. */
	--chutuoc-font-body: 'Be Vietnam Pro', -apple-system, 'Segoe UI', sans-serif;
	--chutuoc-font-heading: var(--chutuoc-font-body);
	--chutuoc-font-size-body: 1rem;
	--chutuoc-font-size-small: .875rem;
	--chutuoc-font-size-h3: 1.25rem;
	--chutuoc-font-size-h2: clamp(1.625rem, 1.5rem + .625vw, 2rem);
	--chutuoc-font-size-h1: clamp(2rem, 1.5rem + 2.5vw, 3rem);
	--chutuoc-line-height-body: 1.6;
	--chutuoc-line-height-heading: 1.25;

	/* 4, 8, 12, 16, 24, 32, 48, 64, 80, 96px at a 16px root. */
	--chutuoc-space-1: .25rem;
	--chutuoc-space-2: .5rem;
	--chutuoc-space-3: .75rem;
	--chutuoc-space-4: 1rem;
	--chutuoc-space-5: 1.5rem;
	--chutuoc-space-6: 2rem;
	--chutuoc-space-7: 3rem;
	--chutuoc-space-8: 4rem;
	--chutuoc-space-9: 5rem;
	--chutuoc-space-10: 6rem;
	--chutuoc-section-space: var(--chutuoc-space-8);
	--chutuoc-container-gutter: var(--chutuoc-space-4);
	--chutuoc-container-max: 1200px;
	--chutuoc-subtitle-max: 640px;

	--chutuoc-radius-sm: 8px;
	--chutuoc-radius-md: 16px;
	--chutuoc-radius-lg: 24px;
	--chutuoc-shadow-soft: 0 4px 16px rgb(23 33 38 / .06);
}

/* Base layer; keep the root font size under the user's control. */
body {
	margin: 0;
	background-color: var(--chutuoc-color-background);
	color: var(--chutuoc-color-text);
	font-family: var(--chutuoc-font-body);
	font-size: var(--chutuoc-font-size-body);
	line-height: var(--chutuoc-line-height-body);
}

h1,
h2,
h3 {
	color: inherit;
	font-family: var(--chutuoc-font-heading);
	font-weight: 500;
	line-height: var(--chutuoc-line-height-heading);
	overflow-wrap: anywhere;
}

h1 { font-size: var(--chutuoc-font-size-h1); }
h2 { font-size: var(--chutuoc-font-size-h2); }
h3 { font-size: var(--chutuoc-font-size-h3); }
small { font-size: var(--chutuoc-font-size-small); }

/* Layout primitives. Width constraints include no hidden fixed-height content. */
.container {
	box-sizing: border-box;
	width: calc(100% - 2 * var(--chutuoc-container-gutter));
	max-width: var(--chutuoc-container-max);
	min-width: 0;
	margin-inline: auto;
}

.section {
	padding-block: var(--chutuoc-section-space);
	background-color: var(--chutuoc-color-background);
	color: var(--chutuoc-color-text);
}

.section__title,
.chutuoc-section-intro > h2 {
	margin: 0 auto var(--chutuoc-space-5);
	color: inherit;
	font-size: var(--chutuoc-font-size-h2);
	text-align: center;
}

.section__subtitle,
.chutuoc-section-intro > p {
	max-width: var(--chutuoc-subtitle-max);
	margin: 0 auto var(--chutuoc-space-6);
	color: var(--chutuoc-section-muted, var(--chutuoc-color-muted));
	font-size: var(--chutuoc-font-size-body);
	line-height: var(--chutuoc-line-height-body);
	text-align: center;
	overflow-wrap: anywhere;
}

.section--alt { background-color: var(--chutuoc-color-background-alt); }

.section--dark {
	--chutuoc-section-muted: var(--chutuoc-color-muted-on-dark);
	--chutuoc-button-link-color: var(--chutuoc-color-link-on-dark);
	--chutuoc-button-focus-color: var(--chutuoc-color-primary);
	background-color: var(--chutuoc-color-background-dark);
	color: var(--chutuoc-color-on-dark);
}

/* Native links navigate; native buttons perform actions. */
:is(.btn-primary, .btn-secondary, .btn-link, .chutuoc-btn, .chutuoc-text-link, .chutuoc-services-text-link, .wp-element-button) {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--chutuoc-space-2);
	min-width: 44px;
	min-height: 44px;
	max-width: 100%;
	padding: var(--chutuoc-space-2) var(--chutuoc-space-5);
	border: 1px solid transparent;
	border-radius: var(--chutuoc-radius-md);
	font: inherit;
	font-size: var(--chutuoc-font-size-body);
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	white-space: normal;
	overflow-wrap: anywhere;
	appearance: none;
	cursor: pointer;
	transition: background-color 160ms ease, border-color 160ms ease;
}

:is(.btn-primary, .chutuoc-btn--primary, .wp-element-button) {
	background-color: var(--chutuoc-color-primary);
	color: var(--chutuoc-color-text);
}

:is(.btn-primary, .chutuoc-btn--primary, .wp-element-button):hover:not(:disabled):not([aria-disabled='true']),
:is(.btn-primary, .chutuoc-btn--primary, .wp-element-button):active:not(:disabled):not([aria-disabled='true']) {
	background-color: var(--chutuoc-color-primary-hover);
	text-decoration: none;
}

:is(.btn-primary, .chutuoc-btn--primary, .wp-element-button):active:not(:disabled):not([aria-disabled='true']) {
	border-color: var(--chutuoc-color-primary-text);
}

:is(.btn-secondary, .chutuoc-btn--outline, .wp-block-button:where(.is-style-outline) > .wp-block-button__link, :where(.wp-block-button) > .wp-block-button__link.is-style-outline) {
	border-color: var(--chutuoc-color-primary-text);
	background-color: var(--chutuoc-color-background);
	color: var(--chutuoc-color-primary-text);
}

:is(.btn-secondary, .chutuoc-btn--outline, .wp-block-button:where(.is-style-outline) > .wp-block-button__link, :where(.wp-block-button) > .wp-block-button__link.is-style-outline):hover:not(:disabled):not([aria-disabled='true']) {
	background-color: var(--chutuoc-color-primary-soft);
	text-decoration: none;
}

:is(.btn-secondary, .chutuoc-btn--outline, .wp-block-button:where(.is-style-outline) > .wp-block-button__link, :where(.wp-block-button) > .wp-block-button__link.is-style-outline):active:not(:disabled):not([aria-disabled='true']) {
	background-color: var(--chutuoc-color-background-alt);
	text-decoration: none;
}

:is(.btn-link, .chutuoc-text-link, .chutuoc-services-text-link) {
	padding-inline: 0;
	border-radius: var(--chutuoc-radius-sm);
	background-color: transparent;
	color: var(--chutuoc-button-link-color, var(--chutuoc-color-primary-text));
	text-decoration: underline;
	text-underline-offset: .2em;
}

:is(.btn-link, .chutuoc-text-link, .chutuoc-services-text-link):hover:not(:disabled):not([aria-disabled='true']) {
	color: var(--chutuoc-button-link-color, var(--chutuoc-color-primary-text));
	text-decoration-thickness: 2px;
}

:is(.btn-link, .chutuoc-text-link, .chutuoc-services-text-link):active:not(:disabled):not([aria-disabled='true']) {
	text-decoration-thickness: 2px;
	text-underline-offset: .125em;
}

:is(.btn-primary, .btn-secondary, .btn-link, .chutuoc-btn, .chutuoc-text-link, .chutuoc-services-text-link, .wp-element-button):focus-visible {
	outline: 3px solid var(--chutuoc-button-focus-color, var(--chutuoc-color-primary-text));
	outline-offset: 3px;
	text-decoration: none;
}

:is(.btn-link, .chutuoc-text-link, .chutuoc-services-text-link):focus-visible { text-decoration: underline; }

/* No opacity fading: disabled text retains its measured color contrast. */
:is(.btn-primary, .btn-secondary, .btn-link, .chutuoc-btn, .chutuoc-text-link, .chutuoc-services-text-link, .wp-element-button):is(:disabled, [aria-disabled='true']) {
	border-color: var(--chutuoc-color-border);
	background-color: var(--chutuoc-color-background-alt);
	color: var(--chutuoc-color-muted);
	opacity: 1;
	text-decoration: none;
	cursor: not-allowed;
}

:is(.btn-link, .chutuoc-text-link, .chutuoc-services-text-link):is(:disabled, [aria-disabled='true']) {
	border-color: transparent;
	background-color: transparent;
	color: var(--chutuoc-section-muted, var(--chutuoc-color-muted));
}

@media (min-width: 64rem) {
	:root {
		--chutuoc-section-space: var(--chutuoc-space-10);
		--chutuoc-container-gutter: var(--chutuoc-space-6);
	}
}

@media (prefers-reduced-motion: reduce) {
	:is(.btn-primary, .btn-secondary, .btn-link, .chutuoc-btn, .chutuoc-text-link, .chutuoc-services-text-link, .wp-element-button) { transition: none; }
}