/* ============================================================
   MatjarJo STOREFRONT tokens
   Loaded on: storefront ONLY (tenant subdomain / custom domain).
   Contains: structural tokens (spacing, radius, type scale, motion, shadows)
             + a --store-* namespace bound to per-tenant values.
   DOES NOT contain: any MatjarJo brand color (teal/amber). The merchant's
   actual color values come from the inline <style> in templates/store/_base.html,
   which assigns --primary-color, --store-bg, --text-primary, etc. from
   tenant.settings.
   ============================================================ */

:root {
  /* Storefront semantic aliases.
     These are SAFE DEFAULTS — the inline <style> in store/_base.html
     overrides them per tenant. Do NOT bake MatjarJo brand colors here. */
  --store-bg:             #FFFFFF;
  --store-surface:        #FFFFFF;
  --store-primary:        #4F46E5;
  --store-primary-hover:  color-mix(in srgb, var(--store-primary) 88%, #000);
  --store-primary-active: color-mix(in srgb, var(--store-primary) 78%, #000);
  --store-on-primary:     #FFFFFF;
  --store-text:           #1D1D1F;
  --store-text-secondary: color-mix(in srgb, var(--store-text) 60%, var(--store-bg));
  --store-text-muted:     color-mix(in srgb, var(--store-text) 38%, var(--store-bg));
  --store-border:         color-mix(in srgb, var(--store-text) 12%, var(--store-bg));
  --store-border-strong:  color-mix(in srgb, var(--store-text) 20%, var(--store-bg));
  --store-focus-ring:     var(--store-primary);

  /* Structural tokens — same scale as platform so the visual rhythm is consistent.
     Storefront chrome reads these; per-tenant inline <style> does not override them. */

  /* Typography — sizes only; the actual font family comes from --store-font
     (set by store/_base.html based on tenant.settings.font_arabic / _english). */
  --text-display: 2.5rem;
  --text-h1:      1.875rem;
  --text-h2:      1.5rem;
  --text-h3:      1.25rem;
  --text-h4:      1.125rem;
  --text-body-lg: 1.125rem;
  --text-body:    1rem;
  --text-sm:      0.875rem;
  --text-caption: 0.8125rem;
  --text-micro:   0.75rem;

  --lh-tight:    1.15;
  --lh-snug:     1.25;
  --lh-base:     1.4;
  --lh-comfy:    1.6;
  --lh-loose-ar: 1.75;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

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

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* Elevation (neutral — no MatjarJo teal tint) */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.03);
  --shadow-md: 0 4px 12px rgba(0,0,0,.06);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.10);

  /* Motion */
  --ease-standard:   cubic-bezier(.2,0,0,1);
  --ease-emphasized: cubic-bezier(.2,0,0,1.2);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* Layout */
  --container-max:  1200px;
  --gutter-mobile:  16px;
  --gutter-tablet:  24px;
  --gutter-desktop: 32px;

  --lh-body: var(--lh-comfy);
}

:root[lang="ar"],
[dir="rtl"] {
  --lh-body: var(--lh-loose-ar);
}