/**
 * Base — light showroom canvas
 */

html {
	background-color: var(--color-background);
	scroll-behavior: smooth;
}

body {
	background-color: var(--color-background);
	color: var(--color-text-secondary);
	font-family: var(--font-main);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Customizer may set #wrapper background inline */
#wrapper,
#main,
#main.dark {
	background-color: var(--color-background) !important; /* Customizer inline override */
	color: var(--color-text-secondary);
}

a {
	color: var(--color-accent);
	transition: color var(--transition-fast) ease;
}

a:hover,
a:focus {
	color: var(--color-text-primary);
}

::selection {
	background-color: var(--color-accent);
	color: var(--color-surface);
}

hr {
	border: 0;
	border-top: 1px solid var(--color-border);
	margin: var(--space-md) 0;
}

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

/* Section band utilities (design system §11 / §14) */
.section-canvas,
.section-bg-canvas {
	background-color: var(--color-background);
}

.section-surface,
.section-bg-surface,
.bg-white,
.has-white-background-color {
	background-color: var(--color-surface) !important;
	color: var(--color-text-secondary);
}

.section-soft,
.section-bg-soft,
.bg-light,
.has-light-gray-background-color {
	background-color: var(--color-section-soft) !important;
	color: var(--color-text-secondary);
}

.bg-dark,
.has-black-background-color {
	background-color: var(--color-text-primary) !important;
	color: var(--color-surface);
}

.border,
.box,
.col-inner {
	border-color: var(--color-border);
}

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: var(--color-background);
}

::-webkit-scrollbar-thumb {
	background: var(--color-border);
	border-radius: var(--radius-small);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--color-text-secondary);
}