/**
 * Lavender — Design Tokens & Primitives
 *
 * Canonical token layer for the theme: colors, spacing, type scale, radii,
 * shadows, plus a small set of base primitives (buttons, cards, sections).
 *
 * Exposes both legacy aliases (--lv-*, --color-*) and the modern
 * --lavender-* namespace used by hand-authored components.
 *
 * Load order: enqueue BEFORE the per-page Tailwind utility bundle so that
 * utilities can override component defaults.
 *
 * @package Lavender
 */

/* ============================================================
 * 1. Tokens
 * ============================================================ */
:root {
	/* Brand — violet ("Lavender") */
	--lv-primary:        #8b5cf6;        /* violet-500  */
	--lv-primary-600:    #7c3aed;        /* hover       */
	--lv-primary-700:    #6d28d9;        /* deep block  */
	--lv-primary-50:     #faf5ff;        /* faint tint  */
	--lv-primary-100:    #f3e8ff;        /* chip bg     */
	--lv-primary-200:    #e9d5ff;        /* soft border */
	/* Neutrals */
	--lv-bg:             #ffffff;
	--lv-bg-soft:        #faf5ff;        /* alt section */
	--lv-bg-alt:         #f9fafb;        /* gray-50     */
	--lv-text:           #18181b;        /* zinc-900    */
	--lv-text-muted:     #52525b;        /* zinc-600    */
	--lv-text-subtle:    #71717a;        /* zinc-500    */
	--lv-border:         #e4e4e7;        /* zinc-200    */
	--lv-border-soft:    #f4f4f5;        /* zinc-100    */

	/* Semantic */
	--lv-success:        #16a34a;        /* In Stock    */
	--lv-success-bg:     #dcfce7;
	--lv-danger:         #dc2626;        /* Out of Stock*/
	--lv-danger-bg:      #fee2e2;
	--lv-warning:        #f59e0b;
	--lv-footer-bg:      #111827;        /* gray-900    */
	--lv-footer-text:    #d1d5db;        /* gray-300    */
	--lv-footer-muted:   #9ca3af;

	/* Type */
	--lv-font-sans:      "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--lv-text-xs:        12px;
	--lv-text-sm:        14px;
	--lv-text-base:      16px;
	--lv-text-lg:        18px;
	--lv-text-xl:        20px;
	--lv-text-2xl:       24px;
	--lv-text-3xl:       30px;
	--lv-text-4xl:       36px;
	--lv-text-5xl:       48px;
	--lv-text-6xl:       60px;
	--lv-text-7xl:       72px;

	/* Spacing scale (4px base) */
	--lv-1:  4px;  --lv-2:  8px;  --lv-3:  12px;
	--lv-4:  16px; --lv-5:  20px; --lv-6:  24px;
	--lv-8:  32px; --lv-10: 40px; --lv-12: 48px;
	--lv-16: 64px; --lv-20: 80px; --lv-24: 96px;

	/* Radii */
	--lv-radius-sm:  6px;
	--lv-radius:     10px;
	--lv-radius-md:  12px;
	--lv-radius-lg:  14px;
	--lv-radius-xl:  20px;
	--lv-radius-pill: 9999px;

	/* Shadow */
	--lv-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
	--lv-shadow:    0 4px 6px -1px rgba(15, 23, 42, .1), 0 2px 4px -2px rgba(15, 23, 42, .06);
	--lv-shadow-md: 0 10px 15px -3px rgba(15, 23, 42, .08), 0 4px 6px -4px rgba(15, 23, 42, .05);
	--lv-shadow-lg: 0 20px 25px -5px rgba(15, 23, 42, .1), 0 8px 10px -6px rgba(15, 23, 42, .05);

	/* Layout */
	--lv-container: 1280px;
	--lv-section-y: 80px;

	/* Transitions */
	--lv-tx: .18s ease;
}

/* Bridge: keep legacy --color-* aliases populated so any pre-existing
 * stylesheets, inline blocks, or third-party widgets continue to render
 * with the canonical Lavender palette without per-sheet rewrites. */
:root {
	--color-primary:    var(--lv-primary)      !important;
	--color-primary-2:  #a78bfa                !important; /* violet-400 */
	--color-accent:     var(--lv-primary-700)  !important;
	--color-bg:         var(--lv-bg)           !important;
	--color-bg-alt:     var(--lv-bg-soft)      !important;
	--color-text:       var(--lv-text)         !important;
	--color-muted:      var(--lv-text-muted)   !important;
	--color-border:     var(--lv-border)       !important;
	--radius-card:      var(--lv-radius-lg)    !important;
	--radius-btn:       var(--lv-radius)       !important;
	--shadow-card:      var(--lv-shadow-md)    !important;
	--shadow-soft:      var(--lv-shadow-sm)    !important;
}

/* Forward-facing namespace: --lavender-* aliases for hand-authored
 * components. New CSS should reference these so legacy --lv-* and
 * --color-* layers can be retired in a future major version. */
:root {
	--lavender-color-primary:        var(--lv-primary);
	--lavender-color-primary-hover:  var(--lv-primary-600);
	--lavender-color-primary-deep:   var(--lv-primary-700);
	--lavender-color-accent:         var(--lv-primary-700);
	--lavender-color-primary-tint:   var(--lv-primary-100);
	--lavender-color-bg:             var(--lv-bg);
	--lavender-color-bg-soft:        var(--lv-bg-soft);
	--lavender-color-text:           var(--lv-text);
	--lavender-color-text-muted:     var(--lv-text-muted);
	--lavender-color-text-subtle:    var(--lv-text-subtle);
	--lavender-color-border:         var(--lv-border);
	--lavender-color-success:        var(--lv-success);
	--lavender-color-danger:         var(--lv-danger);
	--lavender-color-whatsapp:       #25d366;
	--lavender-color-whatsapp-hover: #1ebe5d;

	--lavender-radius-sm:   var(--lv-radius-sm);
	--lavender-radius-md:   var(--lv-radius-md);
	--lavender-radius-lg:   var(--lv-radius-lg);
	--lavender-radius-pill: var(--lv-radius-pill);

	--lavender-shadow-sm: var(--lv-shadow-sm);
	--lavender-shadow-md: var(--lv-shadow-md);
	--lavender-shadow-lg: var(--lv-shadow-lg);

	--lavender-z-header:  100;
	--lavender-z-overlay: 900;
	--lavender-z-modal:   1000;
	--lavender-z-fab:     950;
	--lavender-z-toast:   1100;

	--lavender-transition: .18s ease;
}