/* Synced from brand/tokens.css by scripts/brand-sync.mjs. Do not edit: change brand/ and run npm run brand:sync. */
/* Shaida Beauty v2.2. Brand tokens for the future theme.
 * tokens.json owns named colors; build_guide.py synchronizes this palette.
 * Champagne is decoration only. Core palette: pearl, veil, blush, mineral, kohl.
 */

@font-face {
	font-family: "Bodoni Moda";
	src: url("../fonts/bodoni-moda-var.woff2") format("woff2");
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Bodoni Moda";
	src: url("../fonts/bodoni-moda-italic-var.woff2") format("woff2");
	font-weight: 400 600;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Jost";
	src: url("../fonts/jost-var.woff2") format("woff2");
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Palette — named swatches */
	--veil: #faf8f4;      /* soft white */
	--pearl: #ffffff;     /* clean white */
	--linen: #f0ebe3;     /* pale neutral */
	--nude: #d7cfc4;      /* decorative divider */
	--blush: #e8dace;     /* soft sand */
	--champagne: #c4a276; /* muted champagne / gold accent */
	--gilt: #8a6739;      /* text-safe gold */
	--mineral: #086b68;   /* signature mineral teal */
	--rosewood: #086b68;  /* legacy mineral alias */
	--taupe: #625e59;     /* secondary text */
	--cocoa: #343936;     /* body text (charcoal) */
	--cacao: #202725;     /* primary button */
	--cacao-deep: #121a17;/* primary button hover */
	--kohl: #202725;      /* ink logo and headings */

	/* Roles — components use these, never the swatches */
	--c-bg: var(--veil);
	--c-surface: var(--pearl);
	--c-surface-alt: var(--linen);
	--c-surface-inverse: var(--kohl);
	--c-accent: var(--mineral);
	--c-accent-soft: var(--blush);
	--c-accent-text: var(--mineral);
	--c-text: var(--cocoa);
	--c-text-muted: var(--taupe);
	--c-text-inverse: var(--pearl);
	--c-heading: var(--kohl);
	--c-link: var(--cocoa);
	--c-link-hover: var(--mineral);
	--c-cta: var(--cacao);
	--c-cta-text: var(--pearl);
	--c-cta-hover: var(--cacao-deep);
	--c-focus: var(--mineral);
	--c-border: var(--nude);

	/* Type */
	--f-display: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
	--f-editorial: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
	--f-body: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;

	/* Fluid type scale (360px → 1280px) */
	--fs-xs: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
	--fs-sm: clamp(0.9375rem, 0.91rem + 0.12vw, 1rem);
	--fs-base: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);
	--fs-lg: clamp(1.1875rem, 1.13rem + 0.28vw, 1.375rem);
	--fs-xl: clamp(1.375rem, 1.26rem + 0.55vw, 1.75rem);
	--fs-2xl: clamp(1.75rem, 1.53rem + 1vw, 2.375rem);
	--fs-3xl: clamp(2.125rem, 1.75rem + 1.7vw, 3.25rem);
	--fs-4xl: clamp(2.625rem, 2rem + 2.8vw, 4.5rem);

	--lh-tight: 1.1;
	--lh-heading: 1.2;
	--lh-body: 1.65;
	--ls-label: 0.04em;   /* sentence-case labels */
	--ls-display: -0.025em; /* confident geometric headlines */

	/* Space (4px base) */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--sp-9: 6rem;
	--sp-section: clamp(3rem, 8vw, 7rem);

	/* Layout */
	--w-content: 70ch;
	--w-wide: 1200px;
	--gutter: clamp(1rem, 4vw, 2rem);

	/* Shape */
	--radius-sm: 0px;
	--radius-md: 6px;
	--radius-arch: 999px 999px 0 0; /* optional bridal image crop; not a brand motif */
	--radius-pill: 999px;
	--border-hair: 1px solid var(--c-border);
	--rule-accent: 1px solid var(--c-accent);
	--shadow-soft: 0 12px 32px -18px rgb(30 25 24 / 0.28);

	/* Buttons */
	--btn-height: 3rem;
	--btn-pad-x: 1.75rem;
	--btn-radius: var(--radius-sm);
	--btn-font: var(--fw-medium) var(--fs-sm) / 1 var(--f-body);
	--btn-tracking: 0.02em;

	/* Focus */
	--focus-ring: 0 0 0 3px var(--c-bg), 0 0 0 6px var(--c-focus);

	/* Motion */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur: 200ms;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur: 0ms;
	}
}