/* Elite Nail Studio — design tokens. Raw colours live only here (Atelier fallbacks) and in the
 * generated palette registry (inc/palette-registry.php); see docs/design-system.md. */

@font-face { font-family: "Cormorant Garamond"; src: url("/wp-content/themes/elite-nail-studio/assets/fonts/cormorant-garamond.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/wp-content/themes/elite-nail-studio/assets/fonts/cormorant-garamond-italic.woff2") format("woff2"); font-weight: 300 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/wp-content/themes/elite-nail-studio/assets/fonts/jost.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; }

/* Colour layers (lowest to highest): the Atelier fallbacks below → the saved palette, printed
 * inline as --ens-c-* on :root (inc/palette.php) → a demo preview, which re-points --ens-c-* on
 * html[data-eds-demo-palette] → a section's tone (.ens-sec-dark, .ens-tone-*, section pattern),
 * which re-points the role tokens (--ens-bg, --ens-text, …) on that section. Role tokens are
 * generated from ens_tones(); components use roles, raw slots only on photography and dark chrome. */
:root {
	/* Palette — Atelier fallbacks */
	--ens-ivory: var(--ens-c-ivory, #F8F4F0);
	--ens-porcelain: var(--ens-c-porcelain, #FFFDFB);
	--ens-linen: var(--ens-c-linen, #F1E6DF);
	--ens-nude: var(--ens-c-nude, #E9D5CC);
	--ens-rose: var(--ens-c-rose, #C99091);
	--ens-rose-ink: var(--ens-c-rose-ink, #8F585A);
	--ens-champagne: var(--ens-c-champagne, #B99A72);
	--ens-champagne-ink: var(--ens-c-champagne-ink, #85683F);
	--ens-espresso: var(--ens-c-espresso, #271D1B);
	--ens-cocoa: var(--ens-c-cocoa, #5E4B45);
	--ens-taupe: var(--ens-c-taupe, #6F5C56);
	--ens-on-rose: var(--ens-c-on-rose, #271D1B);
	--ens-rose-glow: var(--ens-c-rose-glow, #C99091);

	/* Dark chrome and photography (hero, CTA, menu, footer) */
	--ens-dark: var(--ens-espresso);
	--ens-overlay: color-mix(in srgb, var(--ens-espresso) 45%, transparent);
	--ens-on-dark: var(--ens-ivory);
	--ens-on-dark-muted: color-mix(in srgb, var(--ens-ivory) 72%, transparent);
	--ens-line-on-dark: color-mix(in srgb, var(--ens-ivory) 22%, transparent);

	/* Type */
	--ens-font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
	--ens-font-body: "Jost", "Helvetica Neue", Arial, sans-serif;
	--ens-fs-display: clamp(3.25rem, 1.1rem + 8.2vw, 9rem);
	--ens-fs-h1: clamp(2.75rem, 1.7rem + 4.3vw, 5.5rem);
	--ens-fs-h2: clamp(2.25rem, 1.6rem + 2.7vw, 4rem);
	--ens-fs-h3: clamp(1.6rem, 1.35rem + 1vw, 2.25rem);
	--ens-fs-h4: clamp(1.3rem, 1.2rem + .4vw, 1.55rem);
	--ens-fs-lead: clamp(1.1rem, 1rem + .4vw, 1.3rem);
	--ens-fs-body: clamp(1rem, .97rem + .12vw, 1.0625rem);
	--ens-fs-small: .875rem;
	--ens-fs-label: .72rem;
	--ens-tracking-label: .22em;

	/* Space */
	--ens-s-1: 4px; --ens-s-2: 8px; --ens-s-3: 12px; --ens-s-4: 16px; --ens-s-5: 24px;
	--ens-s-6: 32px; --ens-s-7: 48px; --ens-s-8: 64px; --ens-s-9: 96px; --ens-s-10: 128px;
	--ens-section: clamp(72px, 5vw + 52px, 152px);
	--ens-section-sm: clamp(48px, 3vw + 36px, 96px);
	--ens-gutter: clamp(20px, 4vw, 56px);
	--ens-gap: clamp(16px, 2vw, 32px);

	/* Layout */
	--ens-container: 1320px;
	--ens-container-wide: 1560px;
	--ens-container-narrow: 760px;
	--ens-header-h: 88px;

	/* Shape */
	--ens-radius-0: 0;
	--ens-radius-sm: 2px;
	--ens-radius-pill: 999px;
	--ens-radius-arch: 999px 999px 0 0;
	--ens-shadow-sm: 0 1px 2px rgb(39 29 27 / .06);
	--ens-shadow-card: 0 24px 60px -32px rgb(39 29 27 / .28);
	--ens-shadow-float: 0 40px 80px -40px rgb(39 29 27 / .35);

	/* Motion */
	--ens-ease: cubic-bezier(.22, 1, .36, 1);
	--ens-ease-in-out: cubic-bezier(.65, 0, .35, 1);
	--ens-dur-1: .35s;
	--ens-dur-2: .9s;
	--ens-dur-3: 1.4s;
	--ens-stagger: 90ms;
}

@media (max-width: 1024px) {
	:root { --ens-header-h: 72px; }
}

/* Elementor Global Colours follow the theme palette (and a demo preview); the Customizer
 * writes the saved palette into the kit as well (inc/palette-customizer.php). One way only:
 * theme tokens never read --e-global-*. */
body[class*="elementor-kit-"] {
	--e-global-color-ens_ivory: var(--ens-ivory);
	--e-global-color-ens_porcelain: var(--ens-porcelain);
	--e-global-color-ens_linen: var(--ens-linen);
	--e-global-color-ens_nude: var(--ens-nude);
	--e-global-color-ens_rose: var(--ens-rose);
	--e-global-color-ens_rose_ink: var(--ens-rose-ink);
	--e-global-color-ens_champagne: var(--ens-champagne);
	--e-global-color-ens_champagne_ink: var(--ens-champagne-ink);
	--e-global-color-ens_espresso: var(--ens-espresso);
	--e-global-color-ens_cocoa: var(--ens-cocoa);
	--e-global-color-ens_taupe: var(--ens-taupe);
	--e-global-color-primary: var(--ens-espresso);
	--e-global-color-secondary: var(--ens-cocoa);
	--e-global-color-text: var(--ens-cocoa);
	--e-global-color-accent: var(--ens-rose);
}