/*!
Theme Name:        Ammari Jewelry
Theme URI:         https://ammarijewelry.sa
Author:            Ammari Jewelry
Author URI:        https://ammarijewelry.sa
Description:       Ammari Jewelry — Elegant, bilingual (AR/EN) WooCommerce theme for a high-end jewelry house. Built on Tailwind CSS v4, RTL/LTR ready, with Mini Cart Drawer, Smart Search, Wishlist, editorial category pillars, and lab-grown diamond storytelling.
Version:           1.0.0
Requires at least: 6.4
Tested up to:      6.6
Requires PHP:      7.4
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       stor
Domain Path:       /languages
Tags:              e-commerce, woocommerce, jewelry, luxury, store, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, rtl-language-support, full-width-template, block-styles, wide-blocks, accessibility-ready
*/

/* =========================================================
   AMMARI BRAND DESIGN SYSTEM — CSS Custom Properties
   Brand Guidelines 2025–2026
   ─────────────────────────────────────────────────────────
   Colors  ▸ Dark Grey #353535 + Gold #b5a38c + White
   Type    ▸ Galiwar (display) + SERIF (body) + STV (Arabic)
   ========================================================= */

:root {

	/* ── 1. Brand Colors ─────────────────────────────── */
	--stor-black:           #353535;
	--stor-black-soft:      #3d3d3d;
	--stor-ink:             #404040;
	--stor-charcoal:        #4a4a4a;

	--stor-lime:            #b5a38c;   /* primary accent — brand gold */
	--stor-lime-bright:     #c8b8a4;
	--stor-lime-dark:       #968470;
	--stor-lime-soft:       rgba(181, 163, 140, 0.15);
	--stor-gold:            #b5a38c;
	--stor-gold-deep:       #8a7a66;

	--stor-white:           #ffffff;
	--stor-cream:           #f8f7f5;
	--stor-stone-50:        #f5f4f1;
	--stor-stone-100:       #eeede9;
	--stor-stone-200:       #ddd9d2;
	--stor-stone-300:       #c4bfb5;
	--stor-stone-400:       #9a9489;
	--stor-stone-500:       #706b63;
	--stor-stone-600:       #53534f;

	/* ── 2. Semantic Tokens ──────────────────────────── */
	--stor-bg:              var(--stor-white);
	--stor-bg-alt:          var(--stor-cream);
	--stor-bg-dark:         var(--stor-black);
	--stor-bg-mute:         var(--stor-stone-50);

	--stor-text:            var(--stor-black);
	--stor-text-muted:      var(--stor-stone-500);
	--stor-text-subtle:     var(--stor-stone-400);
	--stor-text-on-dark:    var(--stor-white);

	--stor-border:          var(--stor-stone-100);
	--stor-border-strong:   var(--stor-stone-200);
	--stor-border-dark:     var(--stor-charcoal);

	--stor-accent:          var(--stor-lime);
	--stor-accent-hover:    var(--stor-lime-bright);
	--stor-accent-soft:     var(--stor-lime-soft);

	/* ── 3. Status Colors ────────────────────────────── */
	--stor-success:         #22c55e;
	--stor-warning:         #f59e0b;
	--stor-danger:          #ef4444;
	--stor-info:            #3b82f6;

	/* ── 4. Typography ───────────────────────────────── */
	--stor-font-display:    "Galiwar", system-ui, sans-serif;
	--stor-font-body:       "SERIF", Georgia, "Times New Roman", serif;
	--stor-font-mono:       "JetBrains Mono", ui-monospace, monospace;
	--stor-font-arabic:     "STV", serif;
	--stor-font-arabic-display: "STV", serif;
	--stor-font-price:      "SERIF", Georgia, serif;

	--stor-text-2xs:        0.6875rem;
	--stor-text-xs:         0.75rem;
	--stor-text-sm:         0.875rem;
	--stor-text-base:       1rem;
	--stor-text-md:         1.0625rem;
	--stor-text-lg:         1.25rem;
	--stor-text-xl:         1.5rem;
	--stor-text-2xl:        2rem;
	--stor-text-3xl:        2.75rem;
	--stor-text-4xl:        3.75rem;
	--stor-text-5xl:        clamp(3rem, 7vw, 5.5rem);
	--stor-text-display:    clamp(3.5rem, 9vw, 7.5rem);

	--stor-leading-tight:   1.1;
	--stor-leading-snug:    1.3;
	--stor-leading-normal:  1.5;
	--stor-leading-relaxed: 1.7;

	--stor-tracking-tighter: -0.04em;
	--stor-tracking-tight:   -0.02em;
	--stor-tracking-normal:  0;
	--stor-tracking-wide:    0.04em;
	--stor-tracking-wider:   0.08em;
	--stor-tracking-widest:  0.16em;

	/* ── 5. Spacing Scale ────────────────────────────── */
	--stor-space-1:  0.25rem;
	--stor-space-2:  0.5rem;
	--stor-space-3:  0.75rem;
	--stor-space-4:  1rem;
	--stor-space-5:  1.25rem;
	--stor-space-6:  1.5rem;
	--stor-space-8:  2rem;
	--stor-space-10: 2.5rem;
	--stor-space-12: 3rem;
	--stor-space-16: 4rem;
	--stor-space-20: 5rem;
	--stor-space-24: 6rem;
	--stor-space-32: 8rem;

	/* ── 6. Layout ───────────────────────────────────── */
	--stor-container:       1280px;
	--stor-container-wide:  1440px;
	--stor-container-narrow: 960px;
	--stor-gutter:          clamp(1rem, 4vw, 2rem);

	--stor-header-h:        72px;
	--stor-header-h-md:     80px;
	--stor-announcement-h:  40px;

	/* ── 7. Radii ────────────────────────────────────── */
	--stor-radius-xs:   2px;
	--stor-radius-sm:   4px;
	--stor-radius-md:   8px;
	--stor-radius-lg:   12px;
	--stor-radius-xl:   20px;
	--stor-radius-2xl:  32px;
	--stor-radius-full: 9999px;

	/* ── 8. Shadows (subtle, modern) ─────────────────── */
	--stor-shadow-xs:   0 1px 2px rgba(53,53,53,0.04);
	--stor-shadow-sm:   0 1px 3px rgba(53,53,53,0.06), 0 1px 2px rgba(53,53,53,0.04);
	--stor-shadow-md:   0 4px 12px rgba(53,53,53,0.08);
	--stor-shadow-lg:   0 12px 32px rgba(53,53,53,0.10);
	--stor-shadow-xl:   0 24px 56px rgba(53,53,53,0.12);
	--stor-shadow-glow: 0 0 0 4px rgba(181,163,140,0.22);

	/* ── 9. Motion ───────────────────────────────────── */
	--stor-ease:        cubic-bezier(0.4, 0, 0.2, 1);
	--stor-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
	--stor-ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
	--stor-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

	--stor-dur-fast:    150ms;
	--stor-dur-base:    250ms;
	--stor-dur-slow:    400ms;
	--stor-dur-slower:  600ms;

	/* ── 10. Z-index ─────────────────────────────────── */
	--stor-z-base:       1;
	--stor-z-sticky:     50;
	--stor-z-header:     100;
	--stor-z-overlay:    200;
	--stor-z-drawer:     300;
	--stor-z-modal:      400;
	--stor-z-toast:      500;
}

/* Dark surface tokens (auto-applied on .stor-dark sections) */
.stor-dark {
	--stor-bg:           var(--stor-black);
	--stor-bg-alt:       var(--stor-black-soft);
	--stor-bg-mute:      var(--stor-charcoal);
	--stor-text:         var(--stor-white);
	--stor-text-muted:   var(--stor-stone-300);
	--stor-text-subtle:  var(--stor-stone-400);
	--stor-border:       var(--stor-charcoal);
	--stor-border-strong: var(--stor-stone-600);
	color-scheme: dark;
}

/* Reduced motion fallback */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}