/* fonts: https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600&display=swap */

/*
 * design.css — Anna's Beauty Salon
 *
 * The design layer, loaded after main.css. Carries forward the approved
 * Phase 1 homepage's look: warm cream ground, elegant Cormorant Garamond
 * headings over Inter body, generous whitespace, type-led and colour-blocked
 * because the client supplied no photography.
 *
 * Colours come from tokens.css — this file never defines or redefines a
 * --bs-* colour variable (a rebuild regenerates tokens.css; a local override
 * would bring back the stale-variant bug). The :root block below defines
 * only site-specific tokens built FROM those variables: gradients, shadows,
 * overlays, the heading font, and a couple of surface/ink names.
 */

:root {
	--abs-font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--abs-surface: #fffdfb;
	--abs-cream: #f4ede4;
	--abs-ink: #2a2622;
	--abs-rose-deep: var(--bs-primary-text-emphasis);
	--abs-shadow-sm: 0 6px 16px rgba(var(--bs-dark-rgb), .08);
	--abs-shadow-md: 0 12px 28px rgba(var(--bs-dark-rgb), .12);
	--abs-shadow-lg: 0 18px 45px rgba(var(--bs-dark-rgb), .16);
	--abs-grad-rose: radial-gradient(
		120% 120% at 0% 0%,
		rgba(var(--bs-primary-rgb), .10) 0%,
		rgba(var(--bs-light-rgb), 0) 55%
	);
	--abs-grad-band: linear-gradient(
		180deg,
		rgba(var(--bs-dark-rgb), .58),
		rgba(var(--bs-dark-rgb), .82)
	);
	--abs-grad-gold: linear-gradient(
		135deg,
		var(--bs-warning) 0%,
		var(--bs-primary) 100%
	);
}

/* -----------------------------------------------------------------
   Base type + link feel
   ----------------------------------------------------------------- */

body {
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.abs-display {
	font-family: var(--abs-font-heading);
	letter-spacing: -0.01em;
}

.abs-display {
	font-weight: 700;
	line-height: 1.03;
	letter-spacing: -0.025em;
}

a {
	text-underline-offset: .18em;
}
a:hover {
	text-decoration-thickness: 2px;
}

/* -----------------------------------------------------------------
   Buttons — shape + weight only; colours live in tokens.css
   ----------------------------------------------------------------- */

.btn {
	--bs-btn-border-radius: var(--bs-border-radius-pill);
	--bs-btn-padding-x: 1.25rem;
	--bs-btn-padding-y: .55rem;
	--bs-btn-font-weight: 500;
}

.btn-lg {
	--bs-btn-padding-x: 1.65rem;
	--bs-btn-padding-y: .8rem;
}

/* -----------------------------------------------------------------
   Navbar — brand set in type (no logo supplied).
   bg-body-tertiary is !important, so the bar is recoloured through the
   variable the utility reads, and the link colours are chosen for that
   background (all clear AA on the cream bar).
   ----------------------------------------------------------------- */

.abs-navbar {
	--bs-tertiary-bg-rgb: var(--bs-light-rgb);
	--bs-navbar-color: rgba(var(--bs-dark-rgb), .82);
	--bs-navbar-hover-color: var(--abs-rose-deep);
	--bs-navbar-active-color: var(--abs-rose-deep);
	--bs-navbar-brand-color: var(--abs-ink);
	--bs-navbar-brand-hover-color: var(--abs-rose-deep);
	--bs-navbar-nav-link-padding-x: .85rem;
}

.abs-navbar .navbar-brand {
	font-family: var(--abs-font-heading);
	font-size: clamp(1.2rem, 1.4vw + .9rem, 1.5rem);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.abs-navbar .nav-link {
	font-weight: 500;
}

.abs-navbar .nav-link:hover,
.abs-navbar .nav-link:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.abs-navbar .navbar-toggler:focus-visible {
	outline: 3px solid var(--bs-primary);
	outline-offset: 2px;
}

/* -----------------------------------------------------------------
   Eyebrow + section helpers
   ----------------------------------------------------------------- */

.abs-eyebrow {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--abs-rose-deep);
}

.abs-eyebrow-on-dark {
	color: var(--bs-warning);
}

.abs-section-title {
	max-width: 46rem;
}

.abs-heading-on-dark {
	color: #fff;
}

/* Colour-blocked grounds — alternate cream / rose-subtle / gold-subtle so
   adjacent bands read as distinct without photography. */
.abs-band-cream {
	background-color: var(--bs-light);
}

.abs-band-alt {
	background-color: var(--bs-primary-bg-subtle);
}

.abs-band-gold {
	background-color: var(--bs-warning-bg-subtle);
}

.abs-band-dark {
	background-color: var(--bs-dark);
	color: var(--bs-light);
}

/* -----------------------------------------------------------------
   Homepage hero — split layout. Left column type; right column a soft
   radial-gradient panel with the salon name set large in Cormorant
   Garamond, standing in for the Phase 1 hero photo (client sent none).
   ----------------------------------------------------------------- */

.abs-hero {
	background: var(--abs-grad-rose), var(--abs-cream);
}

.abs-hero__title {
	font-family: var(--abs-font-heading);
	font-weight: 700;
	font-size: clamp(2.4rem, 4.2vw + 1rem, 3.9rem);
	line-height: 1.04;
	letter-spacing: -0.025em;
	color: var(--abs-ink);
}

.abs-hero__media {
	background:
		radial-gradient(90% 90% at 30% 20%, rgba(var(--bs-warning-rgb), .28) 0%, rgba(var(--bs-warning-rgb), 0) 62%),
		radial-gradient(110% 110% at 80% 90%, rgba(var(--bs-primary-rgb), .22) 0%, rgba(var(--bs-primary-rgb), 0) 58%),
		var(--abs-surface);
	border: 1px solid var(--bs-secondary-border-subtle);
	box-shadow: var(--abs-shadow-lg);
}

.abs-hero__mark {
	font-family: var(--abs-font-heading);
	font-weight: 600;
	font-size: clamp(2.6rem, 5vw + 1rem, 4.5rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--abs-ink);
}

.abs-hero__mark-sub {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--abs-rose-deep);
}

.abs-hero__media-icon {
	font-size: clamp(2.5rem, 4vw + 1rem, 3.5rem);
	color: var(--bs-primary);
}

/* -----------------------------------------------------------------
   Inside-page hero — type, eyebrow, lede, panel only.
   Height / layout / scrim live in main.css; this never sets height,
   min-height, padding or margin on the .abs-page-hero section itself.
   ----------------------------------------------------------------- */

.abs-page-hero__inner {
	max-width: 48rem;
	margin-inline: auto;
}

.abs-page-hero__eyebrow {
	color: var(--abs-rose-deep);
	letter-spacing: .12em;
}

.abs-page-hero--photo .abs-page-hero__eyebrow {
	color: var(--bs-warning);
}

.abs-page-hero__title {
	font-family: var(--abs-font-heading);
	font-weight: 700;
	font-size: clamp(2rem, 3vw + 1.25rem, 3.25rem);
	line-height: 1.06;
	letter-spacing: -0.02em;
	margin-bottom: .75rem;
}

.abs-page-hero--photo .abs-page-hero__title {
	color: #fff;
}

.abs-page-hero__lede {
	margin-bottom: 0;
}

.abs-page-hero--photo .abs-page-hero__lede {
	color: rgba(255, 255, 255, .9);
}

/* -----------------------------------------------------------------
   Cards + tiles — shared lift treatment.
   Hover shifts toward brand + lifts; focus mirror; reduced-motion keeps
   the colour shift, drops the motion.
   ----------------------------------------------------------------- */

.card {
	--bs-card-bg: var(--abs-surface);
	--bs-card-border-radius: var(--bs-border-radius-lg);
}

.abs-card-lift {
	border: 1px solid var(--bs-secondary-border-subtle);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.abs-card-lift:hover,
.abs-card-lift:focus-within {
	border-color: var(--bs-primary);
	box-shadow: var(--abs-shadow-md);
	transform: translateY(-3px);
}

.abs-card-lift:focus-visible {
	outline: 3px solid var(--bs-primary);
	outline-offset: 2px;
}

/* Service card — icon badge anchor. */
.abs-service {
	border: 1px solid var(--bs-secondary-border-subtle);
}

.abs-service__icon,
.abs-icon-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background: var(--bs-primary-bg-subtle);
	color: var(--abs-rose-deep);
	flex-shrink: 0;
}

.abs-icon-badge--lg {
	width: 4.25rem;
	height: 4.25rem;
}

.abs-icon-badge--solid {
	background: var(--bs-primary);
	color: #fff;
}

.abs-icon-badge--gold {
	background: var(--bs-warning-bg-subtle);
	color: var(--bs-warning-text-emphasis);
}

.abs-service__link {
	font-weight: 500;
}

/* -----------------------------------------------------------------
   Specials / gold-accented panels
   ----------------------------------------------------------------- */

.abs-panel-gold {
	background: var(--bs-warning-bg-subtle);
	border: 1px solid var(--bs-warning-border-subtle);
	border-radius: var(--bs-border-radius-lg);
}

.abs-panel-gold .abs-panel-gold__title {
	color: var(--bs-warning-text-emphasis);
}

.abs-panel-rose {
	background: var(--bs-primary-bg-subtle);
	border: 1px solid var(--bs-primary-border-subtle);
	border-radius: var(--bs-border-radius-lg);
}

.abs-ribbon {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bs-warning-text-emphasis);
}

/* -----------------------------------------------------------------
   Gradient band — replaces the Phase 1 full-bleed photo section.
   Structural pieces (position, min-height) sit on the section; the
   gradient layer stands in for the old <img> + scrim.
   ----------------------------------------------------------------- */

.abs-band-grad {
	isolation: isolate;
	min-height: 45vh;
	display: flex;
	align-items: center;
	color: #fff;
}

.abs-band-grad__layer {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--abs-grad-band), var(--abs-grad-gold);
}

.abs-band-grad__layer--rose {
	background: linear-gradient(
			135deg,
			rgba(var(--bs-primary-rgb), .92) 0%,
			rgba(var(--bs-dark-rgb), .92) 100%
		);
}

/* Frosted panel over the gradient — same treatment as Phase 1's band panel. */
.abs-glass {
	background: rgba(20, 20, 20, .45);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--bs-border-radius-lg);
	color: #fff;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.abs-glass {
		background: rgba(20, 20, 20, .88);
	}
}

.abs-glass .text-body-secondary {
	color: rgba(255, 255, 255, .78) !important;
}

.abs-stars {
	color: var(--bs-warning);
}

.abs-rating {
	font-family: var(--abs-font-heading);
	font-size: clamp(3.25rem, 6vw + 1rem, 4.75rem);
	font-weight: 600;
	line-height: 1;
}

/* Outline-light button on a dark band reverses to solid so its hover
   doesn't dissolve into the gradient. */
.abs-band-grad .btn-outline-light {
	--bs-btn-color: #fff;
	--bs-btn-border-color: rgba(255, 255, 255, .55);
	--bs-btn-hover-bg: #fff;
	--bs-btn-hover-color: var(--abs-rose-deep);
	--bs-btn-hover-border-color: #fff;
	--bs-btn-active-color: var(--abs-rose-deep);
	--bs-btn-active-bg: #fff;
	--bs-btn-active-border-color: #fff;
}

/* -----------------------------------------------------------------
   Visit strip / map
   ----------------------------------------------------------------- */

.abs-visit-note {
	color: var(--bs-secondary-text-emphasis);
}

.abs-map {
	border: 1px solid var(--bs-secondary-border-subtle);
	border-radius: var(--bs-border-radius-lg);
	overflow: hidden;
}

.abs-contact-list {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}

.abs-contact-list__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--bs-primary-bg-subtle);
	color: var(--abs-rose-deep);
	flex-shrink: 0;
}

/* -----------------------------------------------------------------
   Footer
   ----------------------------------------------------------------- */

.abs-footer {
	background-color: var(--bs-light);
}

.abs-footer .abs-footer__social a:not(.btn) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	border: 1px solid var(--bs-secondary-border-subtle);
	color: var(--bs-secondary-text-emphasis);
	transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.abs-footer .abs-footer__social a:not(.btn):hover,
.abs-footer .abs-footer__social a:not(.btn):focus-visible {
	color: #fff;
	background-color: var(--bs-primary);
	border-color: var(--bs-primary);
	text-decoration: none;
}

.abs-footer .abs-footer__social a:focus-visible {
	outline: 3px solid var(--bs-primary);
	outline-offset: 2px;
}

/* -----------------------------------------------------------------
   Reveal-on-scroll — gated on .abs-js so no-JS keeps everything visible.
   ----------------------------------------------------------------- */

.abs-reveal {
	opacity: 1;
}

.abs-js .abs-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .5s ease, transform .5s ease;
}

.abs-js .abs-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* -----------------------------------------------------------------
   Reduced motion — drop transitions/transforms, keep colour shifts.
   ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.abs-card-lift,
	.abs-service,
	.abs-footer .abs-footer__social a,
	.abs-js .abs-reveal {
		transition: none;
	}

	.abs-card-lift:hover,
	.abs-card-lift:focus-within,
	.abs-service:hover,
	.abs-service:focus-within {
		transform: none;
	}

	.abs-js .abs-reveal {
		opacity: 1;
		transform: none;
	}
}
</｜｜DSML｜｜ parameter>
</｜｜DSML｜｜ invoke>
</｜｜DSML｜｜ calls>