/**
 * Design tokens
 *
 * The single source of truth for the visual system. Every value here is
 * derived from the FlorenStyle Brand Guidelines; nothing is invented.
 * Components must consume these tokens rather than hard-coded values.
 *
 * @package FlorenStyle
 */

:root {
	/* ---------------------------------------------------------------------
	 * Brand palette — exactly as specified in the Brand Guidelines.
	 * ------------------------------------------------------------------ */
	--fs-black: #000000;         /* RGB 0,0,0        */
	--fs-white: #ffffff;         /* RGB 255,255,255  */
	--fs-red: #cc202a;           /* RGB 204,32,42    */
	--fs-grey: #8d898a;          /* RGB 141,137,138  */

	/* ---------------------------------------------------------------------
	 * Supporting neutrals.
	 * The guidelines permit warm, luxury-inspired neutrals where additional
	 * tones are required. These are tinted from --fs-grey so the whole
	 * surface family stays in the same warm key as the brand grey.
	 * ------------------------------------------------------------------ */
	--fs-bone: #faf9f8;          /* Page surface — a warm off-white        */
	--fs-alabaster: #f4f2f0;     /* Alternating section surface            */
	--fs-stone: #e8e5e2;         /* Muted panels, image placeholders       */
	--fs-hairline: #dedad6;      /* Rules and borders on light surfaces    */
	--fs-ink: #171514;           /* Warm near-black for long-form body copy */
	--fs-onyx: #0d0c0c;          /* Dark section surface                   */

	/* Semantic surface and text roles. */
	--fs-surface: var(--fs-bone);
	--fs-surface-alt: var(--fs-alabaster);
	--fs-surface-dark: var(--fs-black);
	--fs-text: var(--fs-ink);
	--fs-text-muted: #6a6564;    /* 5.9:1 on --fs-bone — passes AA         */
	--fs-text-invert: var(--fs-white);
	--fs-text-invert-muted: rgba(255, 255, 255, 0.72);
	--fs-accent: var(--fs-red);
	--fs-border: var(--fs-hairline);
	--fs-border-invert: rgba(255, 255, 255, 0.18);

	/* Focus ring — must remain visible on both light and dark surfaces. */
	--fs-focus: var(--fs-red);
	--fs-focus-invert: var(--fs-white);

	/* ---------------------------------------------------------------------
	 * Typography
	 * Cormorant SC — titles and subtitles.
	 * Lato        — body text.
	 * ------------------------------------------------------------------ */
	--fs-font-display: 'Cormorant SC', 'Cormorant Garamond', 'Times New Roman', serif;
	--fs-font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	--fs-weight-light: 300;
	--fs-weight-regular: 400;
	--fs-weight-medium: 500;
	--fs-weight-semibold: 600;
	--fs-weight-bold: 700;
	--fs-weight-black: 900;

	/*
	 * Fluid type scale. Each step interpolates between a mobile and a
	 * desktop size across the 20rem–100rem viewport range, so typography
	 * scales continuously rather than jumping at breakpoints.
	 */
	--fs-step--2: clamp(0.694rem, 0.68rem + 0.07vw, 0.75rem);
	--fs-step--1: clamp(0.833rem, 0.8rem + 0.17vw, 0.9375rem);
	--fs-step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--fs-step-1: clamp(1.2rem, 1.13rem + 0.35vw, 1.5rem);
	--fs-step-2: clamp(1.44rem, 1.31rem + 0.65vw, 2rem);
	--fs-step-3: clamp(1.728rem, 1.5rem + 1.14vw, 2.75rem);
	--fs-step-4: clamp(2.074rem, 1.68rem + 1.97vw, 3.75rem);
	--fs-step-5: clamp(2.488rem, 1.85rem + 3.19vw, 5rem);
	--fs-step-6: clamp(2.986rem, 1.94rem + 5.23vw, 6.5rem);

	--fs-leading-tight: 1.06;
	--fs-leading-display: 1.12;
	--fs-leading-snug: 1.35;
	--fs-leading-body: 1.75;

	/*
	 * Cormorant SC is a small-caps face. Generous letterspacing is what
	 * makes it read as couture rather than cramped, so tracking is treated
	 * as a first-class token.
	 */
	--fs-tracking-display: 0.02em;
	--fs-tracking-title: 0.04em;
	--fs-tracking-eyebrow: 0.34em;
	--fs-tracking-button: 0.18em;
	--fs-tracking-nav: 0.14em;

	/* Optimal measure for long-form copy. */
	--fs-measure: 68ch;
	--fs-measure-narrow: 54ch;

	/* ---------------------------------------------------------------------
	 * Spacing — an 8px-based scale for consistent vertical rhythm.
	 * ------------------------------------------------------------------ */
	--fs-space-3xs: 0.25rem;
	--fs-space-2xs: 0.5rem;
	--fs-space-xs: 0.75rem;
	--fs-space-s: 1rem;
	--fs-space-m: 1.5rem;
	--fs-space-l: 2rem;
	--fs-space-xl: 3rem;
	--fs-space-2xl: 4rem;
	--fs-space-3xl: 6rem;
	--fs-space-4xl: 8rem;

	/* Section padding scales fluidly so the airy rhythm survives on mobile. */
	--fs-section-y: clamp(4.5rem, 3rem + 7.5vw, 11rem);
	--fs-section-y-tight: clamp(3rem, 2rem + 5vw, 7rem);

	/* ---------------------------------------------------------------------
	 * Layout
	 * ------------------------------------------------------------------ */
	--fs-container: 1440px;
	--fs-container-wide: 1720px;
	--fs-container-text: 780px;
	--fs-gutter: clamp(1.25rem, 0.7rem + 2.75vw, 4.5rem);
	--fs-grid-gap: clamp(1.25rem, 0.8rem + 2.2vw, 3.5rem);

	--fs-header-height: 5.5rem;
	--fs-header-height-scrolled: 4.5rem;

	/* ---------------------------------------------------------------------
	 * Borders and elevation
	 * The guidelines call for an architectural, understated language:
	 * near-square corners and shadow used only to lift, never to decorate.
	 * ------------------------------------------------------------------ */
	--fs-radius: 0;
	--fs-radius-subtle: 2px;
	--fs-hairline-width: 1px;

	--fs-shadow-soft: 0 1px 2px rgba(23, 21, 20, 0.04), 0 8px 24px rgba(23, 21, 20, 0.06);
	--fs-shadow-lift: 0 2px 4px rgba(23, 21, 20, 0.05), 0 18px 48px rgba(23, 21, 20, 0.1);

	/* ---------------------------------------------------------------------
	 * Motion — subtle and premium. Long, eased, never bouncy.
	 * ------------------------------------------------------------------ */
	--fs-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--fs-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--fs-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

	--fs-duration-fast: 200ms;
	--fs-duration: 400ms;
	--fs-duration-slow: 800ms;
	--fs-duration-reveal: 1100ms;

	/* ---------------------------------------------------------------------
	 * Z-index scale — named layers prevent arbitrary escalation.
	 * ------------------------------------------------------------------ */
	--fs-z-base: 1;
	--fs-z-raised: 10;
	--fs-z-sticky: 100;
	--fs-z-header: 200;
	--fs-z-overlay: 300;
	--fs-z-modal: 400;
	--fs-z-skiplink: 500;
}

/**
 * Inverted context.
 *
 * Any section that opts into a dark surface remaps the semantic text and
 * border roles, so components nested inside need no dark-mode variants of
 * their own. This is what keeps the component layer free of colour forks.
 */
.fs-invert {
	--fs-surface: var(--fs-surface-dark);
	--fs-surface-alt: var(--fs-onyx);
	--fs-text: var(--fs-text-invert);
	--fs-text-muted: var(--fs-text-invert-muted);
	--fs-border: var(--fs-border-invert);
	--fs-focus: var(--fs-focus-invert);

	background-color: var(--fs-surface);
	color: var(--fs-text);
}

/**
 * Honour the user's motion preference globally. Reveal animations are
 * additionally gated in JavaScript so elements never remain hidden.
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--fs-duration-fast: 1ms;
		--fs-duration: 1ms;
		--fs-duration-slow: 1ms;
		--fs-duration-reveal: 1ms;
	}
}