/* ==========================================================================
   THE SKIN MATRIX — DESIGN TOKENS
   Single source of truth for the palette, type and rhythm defined by the
   approved HTML prototype. Loaded on every page, before every other sheet.
   ========================================================================== */

:root {
	/* Brand palette — taken verbatim from the prototype. */
	--sm-gold: #C9A15B;
	--sm-gold-dark: #b88e45;
	--sm-burgundy: #5A2F33;
	--sm-burgundy-deep: #3c1e21;
	--sm-ivory: #FAF8F5;
	--sm-charcoal: #1B1B1B;

	/* Derived tints, so component rules never re-declare raw rgba(). */
	--sm-gold-08: rgba(201, 161, 91, .08);
	--sm-gold-12: rgba(201, 161, 91, .12);
	--sm-gold-14: rgba(201, 161, 91, .14);
	--sm-gold-16: rgba(201, 161, 91, .16);
	--sm-gold-20: rgba(201, 161, 91, .20);
	--sm-gold-30: rgba(201, 161, 91, .30);
	--sm-gold-40: rgba(201, 161, 91, .40);

	/* Text greys, warm-biased to sit with the ivory ground. */
	--sm-text: #1B1B1B;
	--sm-text-soft: #5d5d5d;
	--sm-text-muted: #6d6d6d;
	--sm-text-quiet: #7a7a7a;

	/* Type */
	--sm-font-head: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--sm-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--sm-font-btn: 'Montserrat', 'Inter', -apple-system, 'Segoe UI', sans-serif;

	/* Rhythm */
	--sm-container: 1280px;
	--sm-container-wide: 1480px;
	--sm-gutter: 40px;
	--sm-gutter-sm: 22px;
	--sm-section-y: 90px;
	--sm-section-y-sm: 64px;

	/* Elevation */
	--sm-shadow-card: 0 8px 24px rgba(27, 27, 27, .05);
	--sm-shadow-card-hover: 0 24px 48px rgba(27, 27, 27, .13);
	--sm-shadow-raised: 0 20px 50px rgba(27, 27, 27, .10);
	--sm-shadow-float: 0 24px 60px rgba(27, 27, 27, .15);

	/* Motion */
	--sm-ease: cubic-bezier(.4, 0, .2, 1);
	--sm-ease-menu: cubic-bezier(.77, 0, .18, 1);

	/* Layering — kept well below Elementor's editor UI (z-index 99999+). */
	--sm-z-header: 9000;
	--sm-z-mobile-menu: 9100;
	--sm-z-float: 8900;
	--sm-z-modal: 9500;

	/* Breakpoints, documented here for reference; media queries can't use vars.
	   1340 / 1100 / 992 / 768 / 560 / 480 / 420 / 380 — all from the prototype. */
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--sm-ease: linear;
		--sm-ease-menu: linear;
	}
}