/**
 * Layali Oman — Design Tokens
 *
 * Single source of truth for brand colors, typography, spacing, radii, and shadows.
 * Tokens are split into two tiers:
 *
 *   1. Reference tokens — raw values keyed by palette/scale step (e.g. --ly-color-plum-900).
 *      These name the THING. Don't reach for these in component CSS.
 *   2. Semantic tokens — purpose-named aliases (e.g. --ly-color-primary, --ly-color-text).
 *      These name the USE. This is what components and Elementor mappings should bind to.
 *
 * Swap a brand color once at the reference layer and every semantic use updates.
 */

:root {
	/* =========================================================================
	   Reference: colors
	   ========================================================================= */

	/* Plum (primary brand) */
	--ly-color-plum-900: #53225e;
	--ly-color-plum-800: #5e2a6b;
	--ly-color-plum-700: #6b3179;
	--ly-color-plum-500: #8a4ba0;
	--ly-color-plum-300: #c39ad0;
	--ly-color-plum-100: #f1e6f4;
	--ly-color-plum-50:  #faf4fb;

	/* Coral (secondary / accent) */
	--ly-color-coral-700: #cc4f52;
	--ly-color-coral-500: #ff7477;
	--ly-color-coral-300: #ffa6a8;
	--ly-color-coral-100: #ffe2e3;

	/* Neutrals */
	--ly-color-white:    #ffffff;
	--ly-color-cream:    #fbf5ef; /* warm page-accent surface */
	--ly-color-gray-100: #f4f4f5;
	--ly-color-gray-200: #e6e6e8;
	--ly-color-gray-300: #d1d1d4;
	--ly-color-gray-500: #8a8a91;
	--ly-color-gray-700: #4a4a52;
	--ly-color-gray-900: #1a1a1f;
	--ly-color-black:    #000000;

	/* =========================================================================
	   Semantic: colors  (component CSS + Elementor Global Colors bind to these)
	   ========================================================================= */

	--ly-color-primary:         var(--ly-color-plum-900);
	--ly-color-primary-hover:   var(--ly-color-plum-700);
	--ly-color-primary-soft:    var(--ly-color-plum-100);

	--ly-color-secondary:       var(--ly-color-coral-500);
	--ly-color-secondary-hover: var(--ly-color-coral-700);
	--ly-color-secondary-soft:  var(--ly-color-coral-100);

	--ly-color-text:            var(--ly-color-plum-900);
	--ly-color-text-muted:      var(--ly-color-gray-700);
	--ly-color-text-on-primary: var(--ly-color-white);
	--ly-color-text-inverse:    var(--ly-color-white);

	--ly-color-bg:              var(--ly-color-white);
	--ly-color-surface:         var(--ly-color-cream);
	--ly-color-surface-alt:     var(--ly-color-gray-100);

	--ly-color-border:          var(--ly-color-gray-200);
	--ly-color-border-strong:   var(--ly-color-gray-300);

	--ly-color-focus-ring:      var(--ly-color-coral-500);

	/* =========================================================================
	   Reference: typography
	   ========================================================================= */

	--ly-font-display: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ly-font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Modular scale, ~1.25 ratio. rem-based so it scales with the user's root font-size. */
	--ly-font-size-xs:   0.75rem;   /* 12 */
	--ly-font-size-sm:   0.875rem;  /* 14 */
	--ly-font-size-base: 1rem;      /* 16 */
	--ly-font-size-md:   1.125rem;  /* 18 */
	--ly-font-size-lg:   1.375rem;  /* 22 */
	--ly-font-size-xl:   1.75rem;   /* 28 */
	--ly-font-size-2xl:  2.25rem;   /* 36 */
	--ly-font-size-3xl:  3rem;      /* 48 */
	--ly-font-size-4xl:  3.75rem;   /* 60 */

	--ly-line-height-tight:   1.15;
	--ly-line-height-snug:    1.35;
	--ly-line-height-normal:  1.55;
	--ly-line-height-relaxed: 1.75;

	--ly-font-weight-regular:  400;
	--ly-font-weight-medium:   500;
	--ly-font-weight-semibold: 600;
	--ly-font-weight-bold:     700;

	--ly-letter-spacing-tight:  -0.02em;
	--ly-letter-spacing-normal: 0;
	--ly-letter-spacing-wide:   0.04em;

	/* =========================================================================
	   Semantic: typography  (Elementor Global Fonts bind to these)
	   ========================================================================= */

	--ly-text-display: var(--ly-font-display);  /* h1, hero, logo */
	--ly-text-heading: var(--ly-font-display);  /* h2-h4 */
	--ly-text-body:    var(--ly-font-body);     /* paragraphs, UI */
	--ly-text-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

	/* =========================================================================
	   Spacing  (4px base; rem-scaled)
	   ========================================================================= */

	--ly-space-1:  0.25rem;  /* 4  */
	--ly-space-2:  0.5rem;   /* 8  */
	--ly-space-3:  0.75rem;  /* 12 */
	--ly-space-4:  1rem;     /* 16 */
	--ly-space-5:  1.5rem;   /* 24 */
	--ly-space-6:  2rem;     /* 32 */
	--ly-space-7:  3rem;     /* 48 */
	--ly-space-8:  4rem;     /* 64 */
	--ly-space-9:  6rem;     /* 96 */
	--ly-space-10: 8rem;     /* 128 */

	/* =========================================================================
	   Radii
	   ========================================================================= */

	--ly-radius-sm:   4px;
	--ly-radius-md:   8px;
	--ly-radius-lg:   16px;
	--ly-radius-xl:   24px;
	--ly-radius-2xl:  32px;
	--ly-radius-pill: 999px;

	/* =========================================================================
	   Shadows  (tinted with brand color so elevations feel cohesive)
	   ========================================================================= */

	--ly-shadow-sm: 0 1px 2px rgba(83, 34, 94, 0.06);
	--ly-shadow-md: 0 4px 12px rgba(83, 34, 94, 0.08);
	--ly-shadow-lg: 0 12px 32px rgba(83, 34, 94, 0.12);
	--ly-shadow-xl: 0 24px 64px rgba(83, 34, 94, 0.16);

	/* =========================================================================
	   Layout
	   ========================================================================= */

	--ly-container-narrow: 720px;
	--ly-container-base:   1140px;
	--ly-container-wide:   1320px;

	--ly-z-base:    1;
	--ly-z-sticky:  100;
	--ly-z-overlay: 200;
	--ly-z-modal:   300;
	/* Full-screen drawers (mobile menu) sit ABOVE side panels at modal level
	   (side-cart) — without a distinct tier the two tie and DOM order wins. */
	--ly-z-drawer:  310;
	--ly-z-toast:   400;

	/* =========================================================================
	   Motion
	   ========================================================================= */

	--ly-duration-fast:   120ms;
	--ly-duration-base:   200ms;
	--ly-duration-slow:   320ms;
	--ly-ease-standard:   cubic-bezier(0.2, 0, 0, 1);
	--ly-ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--ly-duration-fast: 0ms;
		--ly-duration-base: 0ms;
		--ly-duration-slow: 0ms;
	}
}