/**
 * Sex Toys Abu Dhabi — Design Tokens
 *
 * Dark boudoir system: warm near-black field, a single neon-crimson accent,
 * warm-ivory text, gold reserved for ratings/premium. Forked from the Layali
 * token system; the --ly-* NAMES are kept unchanged so the theme, side-cart,
 * gifts and warranty all rebind automatically — only the values below move.
 *
 *   1. Reference tokens — raw palette/scale (e.g. --ly-color-crimson-500).
 *   2. Semantic tokens — purpose aliases (e.g. --ly-color-primary). Components
 *      and Elementor mappings bind to THESE.
 *
 * NOTE: this is the systematic foundation only. Per-element colours inside the
 * Elementor templates are hardcoded and are restyled in the editor.
 */

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

	/* Ink — page field & surface steps (page → raised → card → overlay) */
	--ly-color-ink-950: #0b0508; /* page field */
	--ly-color-ink-900: #140a0f; /* raised surface */
	--ly-color-ink-850: #1b0e13; /* card */
	--ly-color-ink-800: #241419; /* overlay / raised card */
	--ly-color-ink-700: #33202a;

	/* Crimson — the single accent: CTAs, sale prices, active ring of the mark */
	--ly-color-crimson-700: #b00c25; /* press */
	--ly-color-crimson-500: #e0102f; /* accent */
	--ly-color-crimson-400: #f5324d; /* hover / one step lighter */
	--ly-color-crimson-soft: rgba(224, 16, 47, 0.14);

	/* Gold — ratings + rare premium accents ONLY (never a second CTA colour) */
	--ly-color-gold-500: #c69e63;

	/* Warm ivory text + muted rose neutral */
	--ly-color-ivory:    #f5ede6;
	--ly-color-ivory-70: rgba(245, 237, 230, 0.70);
	--ly-color-ivory-45: rgba(245, 237, 230, 0.45);
	--ly-color-rose-300: #b98a93;
	--ly-color-white:    #ffffff;
	--ly-color-black:    #000000;

	/* Hairlines — 1px ivory-alpha borders everywhere; crimson only when active */
	--ly-color-hairline:        rgba(245, 237, 230, 0.12);
	--ly-color-hairline-strong: rgba(245, 237, 230, 0.20);

	/* Legacy reference names a handful of component rules still call directly,
	   repointed to dark-theme equivalents so nothing renders light. */
	--ly-color-cream:     var(--ly-color-ink-900);
	--ly-color-gray-100:  var(--ly-color-ink-850);
	--ly-color-gray-200:  var(--ly-color-hairline);
	--ly-color-gray-300:  var(--ly-color-hairline-strong);
	--ly-color-gray-500:  var(--ly-color-ivory-45);
	--ly-color-gray-700:  var(--ly-color-ivory-70);
	--ly-color-gray-900:  var(--ly-color-ivory);
	--ly-color-plum-900:  var(--ly-color-crimson-500);
	--ly-color-plum-800:  var(--ly-color-crimson-500);
	--ly-color-plum-700:  var(--ly-color-crimson-400);
	--ly-color-plum-500:  var(--ly-color-crimson-400);
	--ly-color-plum-300:  var(--ly-color-rose-300);
	--ly-color-plum-100:  var(--ly-color-crimson-soft);
	--ly-color-plum-50:   var(--ly-color-ink-900);
	--ly-color-coral-700: var(--ly-color-crimson-700);
	--ly-color-coral-500: var(--ly-color-crimson-500);
	--ly-color-coral-300: var(--ly-color-crimson-400);
	--ly-color-coral-100: var(--ly-color-crimson-soft);

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

	--ly-color-primary:         var(--ly-color-crimson-500);
	--ly-color-primary-hover:   var(--ly-color-crimson-400);
	--ly-color-primary-dark:    var(--ly-color-crimson-700);
	--ly-color-primary-soft:    var(--ly-color-crimson-soft);

	--ly-color-secondary:       var(--ly-color-crimson-500);
	--ly-color-secondary-hover: var(--ly-color-crimson-400);
	--ly-color-secondary-soft:  var(--ly-color-crimson-soft);

	--ly-color-gold:            var(--ly-color-gold-500); /* ratings / premium only */

	--ly-color-text:            var(--ly-color-ivory);
	--ly-color-text-muted:      var(--ly-color-ivory-70);
	--ly-color-text-on-primary: var(--ly-color-white);
	--ly-color-text-inverse:    var(--ly-color-ink-950);

	--ly-color-bg:              var(--ly-color-ink-950);
	--ly-color-surface:         var(--ly-color-ink-900);
	--ly-color-surface-alt:     var(--ly-color-ink-850);

	--ly-color-border:          var(--ly-color-hairline);
	--ly-color-border-strong:   var(--ly-color-hairline-strong);

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

	/* =========================================================================
	   Reference: typography — Playfair Display (serif) + Manrope (UI/body)
	   ========================================================================= */

	--ly-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--ly-font-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--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;
	--ly-letter-spacing-eyebrow: 0.22em; /* Manrope semibold uppercase eyebrow labels */

	--ly-text-display: var(--ly-font-display);
	--ly-text-heading: var(--ly-font-display);
	--ly-text-body:    var(--ly-font-body);
	--ly-text-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

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

	--ly-space-1:  0.25rem;
	--ly-space-2:  0.5rem;
	--ly-space-3:  0.75rem;
	--ly-space-4:  1rem;
	--ly-space-5:  1.5rem;
	--ly-space-6:  2rem;
	--ly-space-7:  3rem;
	--ly-space-8:  4rem;
	--ly-space-9:  6rem;
	--ly-space-10: 8rem;

	/* =========================================================================
	   Radii — soft: 14px fields, 20px cards, pill buttons
	   ========================================================================= */

	--ly-radius-sm:   14px;
	--ly-radius-md:   20px;
	--ly-radius-lg:   20px;
	--ly-radius-xl:   24px;
	--ly-radius-2xl:  28px;
	--ly-radius-pill: 999px;

	/* =========================================================================
	   Shadows — soft deep-black elevation; crimson glow reserved for the CTA
	   ========================================================================= */

	--ly-shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.40);
	--ly-shadow-md:    0 8px 30px rgba(0, 0, 0, 0.45);
	--ly-shadow-lg:    0 18px 50px rgba(0, 0, 0, 0.55);
	--ly-shadow-xl:    0 28px 70px rgba(0, 0, 0, 0.60);
	--ly-shadow-card:  var(--ly-shadow-md);
	--ly-shadow-float: var(--ly-shadow-lg);
	--ly-shadow-glow:  0 0 0 1px rgba(224, 16, 47, 0.45), 0 10px 34px rgba(224, 16, 47, 0.28);

	--ly-blur-veil: 14px;

	/* =========================================================================
	   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;
	--ly-z-drawer:  310;
	--ly-z-toast:   400;

	/* =========================================================================
	   Motion — quiet ease-out, 150–240ms; no bounce, no parallax
	   ========================================================================= */

	--ly-duration-fast:   150ms;
	--ly-duration-base:   200ms;
	--ly-duration-slow:   240ms;
	--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;
	}
}