/* The look of the booking site's pages, booking, gifts and the Employee Corner (redone 2026-10-25): the business's
   seven colors, set in General Setup and carried in the session's location answer, arrive as the variables below,
   written by look.js into a rule of its own, three for the light look (bg, accent, header) and four for the dark
   (bg, surface, accent, header), with the text colors look.js works out for them (header-text, accent-text, link).
   Everything here is written against the page's html element, its #olsWrapper and Bootstrap's own variables, so any
   page built the booking page's way takes the look whole; rules a page needs for its own controls stay with that
   page. Without a palette the pages keep their plain look. */

/* Named palettes (?palette=, data-palette on the embed): tint the
   page around the cards and the action pills so booking blends
   with the salon's own site. Each palette carries a light and a
   dark variant and composes with the appearance choice above.
   Browsers without color-mix() keep the base shade on hover. */
/* Paint the root too: Safari's overscroll rubber-band reveals the
   canvas behind the page, which is the root's background -- left
   unpainted it flashes white out of family. */
html[data-stx-palette] {
background-color: var(--stx-palette-bg);
}

html[data-stx-palette] body {
background-color: var(--stx-palette-bg);
}

/* the wrapper wears Bootstrap's .bg-light utility, which is
   !important -- meet it in kind */
html[data-stx-palette] #olsWrapper {
background-color: var(--stx-palette-bg) !important;
}

html[data-stx-palette] .btn-dark {
--bs-btn-color: var(--stx-palette-accent-text, #fff);
--bs-btn-bg: var(--stx-palette-accent);
--bs-btn-border-color: var(--stx-palette-accent);
--bs-btn-hover-color: var(--stx-palette-accent-text, #fff);
--bs-btn-hover-bg: color-mix(in srgb, var(--stx-palette-accent) 85%, #000);
--bs-btn-hover-border-color: color-mix(in srgb, var(--stx-palette-accent) 85%, #000);
--bs-btn-active-color: var(--stx-palette-accent-text, #fff);
--bs-btn-active-bg: color-mix(in srgb, var(--stx-palette-accent) 75%, #000);
--bs-btn-active-border-color: color-mix(in srgb, var(--stx-palette-accent) 75%, #000);
--bs-btn-disabled-color: var(--stx-palette-accent-text, #fff);
--bs-btn-disabled-bg: var(--stx-palette-accent);
--bs-btn-disabled-border-color: var(--stx-palette-accent);
}

html[data-bs-theme="dark"][data-stx-palette] .btn-dark {
--bs-btn-color: var(--stx-palette-accent-text, #212529);
--bs-btn-hover-color: var(--stx-palette-accent-text, #212529);
--bs-btn-hover-bg: color-mix(in srgb, var(--stx-palette-accent) 88%, #000);
--bs-btn-hover-border-color: color-mix(in srgb, var(--stx-palette-accent) 88%, #000);
--bs-btn-active-color: var(--stx-palette-accent-text, #212529);
--bs-btn-active-bg: color-mix(in srgb, var(--stx-palette-accent) 78%, #000);
--bs-btn-active-border-color: color-mix(in srgb, var(--stx-palette-accent) 78%, #000);
--bs-btn-disabled-color: var(--stx-palette-accent-text, #212529);
}

/* Dark palette grounds are saturated tones -- mocha, forest,
   plum -- not near-blacks, or every palette reads as the same
   charcoal. The surface tone (a raised shade of the same family)
   feeds Bootstrap's dark surfaces so inputs and cards stay in
   the palette instead of stock blue-gray. */
html[data-bs-theme="dark"][data-stx-palette] {
--bs-body-bg: var(--stx-palette-surface);
--bs-secondary-bg: color-mix(in srgb, var(--stx-palette-surface) 85%, #fff);
--bs-tertiary-bg: color-mix(in srgb, var(--stx-palette-surface) 93%, #fff);
}

/* The header band keeps its dark presence but joins the family:
   a deeper hue of the palette instead of universal black. */
html[data-stx-palette] #olsWrapper .bg-dark {
background-color: var(--stx-palette-header) !important;
color: var(--stx-palette-header-text, #fff) !important;
}
/* Bootstrap's .text-light is !important too: the band's text takes the color that reads on the header. */
html[data-stx-palette] #olsWrapper .bg-dark.text-light,
html[data-stx-palette] #olsWrapper .bg-dark .text-light {
color: var(--stx-palette-header-text, #fff) !important;
}

/* Cards keep a hint of the family too -- pure white reads as the
   standard look against a tinted ground. */
html[data-stx-palette] .card {
--bs-card-bg: color-mix(in srgb, var(--stx-palette-bg) 30%, #fff);
}

html[data-bs-theme="dark"][data-stx-palette] .card {
--bs-card-bg: var(--stx-palette-surface);
}

/* Bootstrap's blue is nobody's family: with a palette active,
   plain links take the accent, and the datepicker's selected day
   follows along. Buttons keep their own colors (a:not(.btn)); the
   gift amount pills are outline-secondary like the delivery pills
   beside them (Aaron, 2026-09-21: the page's choice pills are gray,
   its action pill is the dark one). */
html[data-stx-palette] a:not(.btn) {
color: var(--stx-palette-link, var(--stx-palette-accent));
}

html[data-stx-palette] a:not(.btn):hover {
color: color-mix(in srgb, var(--stx-palette-link, var(--stx-palette-accent)) 80%, #000);
}

html[data-bs-theme="dark"][data-stx-palette] a:not(.btn):hover {
color: color-mix(in srgb, var(--stx-palette-link, var(--stx-palette-accent)) 85%, #fff);
}

/* The vibrant set: saturated accents and richly colored headers
   on purpose -- these families trade a little text contrast for
   punch, like seaglass. Complementary pairs put the first hue in
   the ground and header with the accent answering from across
   the wheel; the monos stay one loud family. */
/* The spa set (light seeds from the companion palette study;
   dark variants composed here to keep both modes) */