/*!
Theme Name:        Raw Fuel
Theme URI:         https://example.com/rawfuel
Author:            Raw Fuel
Author URI:        https://example.com
Description:       Raw Fuel — Bold, modern WooCommerce theme for premium supplements. Built on Tailwind CSS v4, RTL/LTR bilingual, with Mini Cart Drawer, Smart Search, Free Shipping Progress, Wishlist & Sticky Add-to-Cart.
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, supplements, 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
*/

/* =========================================================
   STOR DESIGN SYSTEM — CSS Custom Properties
   "Bold Modern" supplement brand identity
   ─────────────────────────────────────────────────────────
   Colors  ▸ Black + Neon Lime + Pure White (high-contrast)
   Type    ▸ DIN Next LT Arabic (AR + EN)
   ========================================================= */

:root {

	/* ── 1. Brand Colors ─────────────────────────────── */
	--stor-black:           #0a0a0a;
	--stor-black-soft:      #141414;
	--stor-ink:             #1a1a1a;
	--stor-charcoal:        #2a2a2a;

	--stor-lime:            #F01C1D;   /* primary accent */
	--stor-lime-bright:     #FF3333;
	--stor-lime-dark:       #C8181A;
	--stor-lime-soft:       rgba(240, 28, 29, 0.15);

	--stor-white:           #ffffff;
	--stor-cream:           #fafaf7;
	--stor-stone-50:        #f6f6f4;
	--stor-stone-100:       #ededea;
	--stor-stone-200:       #d9d9d4;
	--stor-stone-300:       #b8b8b0;
	--stor-stone-400:       #8e8e85;
	--stor-stone-500:       #62625c;
	--stor-stone-600:       #3f3f3a;

	/* ── 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:    "DIN Next LT Arabic", system-ui, -apple-system, sans-serif;
	--stor-font-body:       "DIN Next LT Arabic", system-ui, -apple-system, sans-serif;
	--stor-font-mono:       "JetBrains Mono", ui-monospace, monospace;
	--stor-font-arabic:     "DIN Next LT Arabic", system-ui, sans-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(10,10,10,0.04);
	--stor-shadow-sm:   0 1px 3px rgba(10,10,10,0.06), 0 1px 2px rgba(10,10,10,0.04);
	--stor-shadow-md:   0 4px 12px rgba(10,10,10,0.08);
	--stor-shadow-lg:   0 12px 32px rgba(10,10,10,0.10);
	--stor-shadow-xl:   0 24px 56px rgba(10,10,10,0.12);
	--stor-shadow-glow: 0 0 0 4px rgba(240,28,29,0.20);

	/* ── 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;
	}
}