/* Design reference: approved desktop/mobile home, image 4.
 * Breakpoint tokens document the contract and are read by JS.
 * Native CSS media queries require literal values, mirrored in responsive.css.
 */
:root {
	/* JCtrans brand palette. Action aliases keep existing components in sync. */
	--xnk-primary: #FF6A00;
	--xnk-action: var(--xnk-primary);
	--xnk-primary-hover: #E85F00;
	--xnk-primary-active: var(--xnk-primary-hover);
	--xnk-primary-soft: #FFF1E8;
	--xnk-primary-border: #FFC299;
	--xnk-navy: #102443;
	--xnk-text: #26334A;
	--xnk-muted: #536176;
	--xnk-background: #F1F4F8;
	--xnk-card: #FFFFFF;
	--xnk-border: #D6DEE8;
	--xnk-divider: #DFE5EC;
	--xnk-success: #238348;
	--xnk-success-soft: #E6F6EB;
	--xnk-info: #1764D9;
	--xnk-info-soft: #EAF2FF;
	--xnk-warning: #995C00;
	--xnk-warning-soft: #FFF8E8;
	--xnk-danger: #D92D20;
	--xnk-font-family: "Montserrat", Arial, sans-serif;
	--xnk-font-regular: 400;
	--xnk-font-medium: 500;
	--xnk-font-semibold: 600;
	--xnk-font-bold: 700;
	--xnk-font: var(--xnk-font-family);
	--xnk-text-xs: 0.75rem;
	--xnk-text-sm: 0.9375rem;
	--xnk-text-base: 1.0625rem;
	--xnk-text-base-mobile: 1rem;
	--xnk-text-heading-small: 1rem;
	--xnk-text-lg: 1.125rem;
	--xnk-text-xl: 1.375rem;
	--xnk-leading: 1.5;
	--xnk-leading-heading: 1.3;
	--xnk-weight-normal: var(--xnk-font-regular);
	--xnk-weight-medium: var(--xnk-font-medium);
	--xnk-weight-bold: var(--xnk-font-bold);
	--xnk-space-1: 4px;
	--xnk-space-2: 8px;
	--xnk-space-3: 12px;
	--xnk-space-4: 16px;
	--xnk-space-5: 20px;
	--xnk-space-6: 24px;
	--xnk-space-8: 32px;
	--xnk-space-10: 40px;
	--xnk-space-12: 48px;
	--xnk-radius-sm: 6px;
	--xnk-radius-control: 8px;
	--xnk-radius: 12px;
	--xnk-radius-round: 999px;
	--xnk-shadow: 0 2px 8px rgb(16 36 67 / 4%);
	--xnk-shadow-popover: 0 8px 28px rgb(16 36 67 / 12%);
	--xnk-container: 1536px;
	--xnk-gutter: 32px;
	--xnk-sidebar: 320px;
	--xnk-header-height: 88px;
	--xnk-control-height: 46px;
	--xnk-breakpoint-wide: 1200px;
	--xnk-breakpoint-menu: 1100px;
	--xnk-breakpoint-tablet: 800px;
	--xnk-breakpoint-phone: 480px;
}

@media (max-width: 800px) {
 :root { --xnk-text-base: var(--xnk-text-base-mobile); }
}

@font-face {
 font-family: "Montserrat";
 font-style: normal;
 font-weight: 400;
 font-display: swap;
 src: url("../fonts/montserrat/montserrat-latin-vietnamese-400.woff2") format("woff2");
}

@font-face {
 font-family: "Montserrat";
 font-style: normal;
 font-weight: 500;
 font-display: swap;
 src: url("../fonts/montserrat/montserrat-latin-vietnamese-500.woff2") format("woff2");
}

@font-face {
 font-family: "Montserrat";
 font-style: normal;
 font-weight: 600;
 font-display: swap;
 src: url("../fonts/montserrat/montserrat-latin-vietnamese-600.woff2") format("woff2");
}

@font-face {
 font-family: "Montserrat";
 font-style: normal;
 font-weight: 700;
 font-display: swap;
 src: url("../fonts/montserrat/montserrat-latin-vietnamese-700.woff2") format("woff2");
}