/**
 * Matjar Design System — Core Design Tokens
 * RTL-First, Logical Properties, WCAG 2.2 AA compliant contrast
 */
:root {
  /* Color Palette — Base Semantic Tokens (Default Preset: Modern Luxury) */
  --matjar-color-primary: #111827;
  --matjar-color-primary-hover: #1f2937;
  --matjar-color-secondary: #c5a059;
  --matjar-color-secondary-hover: #b08d48;
  --matjar-color-accent: #e11d48;
  --matjar-color-bg: #ffffff;
  --matjar-color-bg-alt: #f9fafb;
  --matjar-color-surface: #ffffff;
  --matjar-color-border: #e5e7eb;
  --matjar-color-border-hover: #d1d5db;
  --matjar-color-text: #111827;
  --matjar-color-text-muted: #6b7280;
  --matjar-color-text-light: #9ca3af;
  --matjar-color-success: #10b981;
  --matjar-color-warning: #f59e0b;
  --matjar-color-error: #ef4444;

  /* Typography Scale */
  --matjar-font-family-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Cairo", "Tajawal", "Noto Sans Arabic", sans-serif;
  --matjar-font-family-serif: "Playfair Display", "Amiri", Georgia, serif;
  --matjar-font-family-heading: var(--matjar-font-family-sans);
  --matjar-font-family-body: var(--matjar-font-family-sans);

  --matjar-font-size-xs: 0.75rem;    /* 12px */
  --matjar-font-size-sm: 0.875rem;   /* 14px */
  --matjar-font-size-base: 1rem;     /* 16px */
  --matjar-font-size-md: 1.125rem;   /* 18px */
  --matjar-font-size-lg: 1.25rem;    /* 20px */
  --matjar-font-size-xl: 1.5rem;     /* 24px */
  --matjar-font-size-2xl: 1.875rem;  /* 30px */
  --matjar-font-size-3xl: 2.25rem;   /* 36px */
  --matjar-font-size-4xl: 3rem;      /* 48px */

  --matjar-line-height-tight: 1.2;
  --matjar-line-height-normal: 1.5;
  --matjar-line-height-loose: 1.75;

  /* Spacing Scale (Logical) */
  --matjar-space-1: 0.25rem; /* 4px */
  --matjar-space-2: 0.5rem;  /* 8px */
  --matjar-space-3: 0.75rem; /* 12px */
  --matjar-space-4: 1rem;    /* 16px */
  --matjar-space-5: 1.25rem; /* 20px */
  --matjar-space-6: 1.5rem;  /* 24px */
  --matjar-space-8: 2rem;    /* 32px */
  --matjar-space-10: 2.5rem; /* 40px */
  --matjar-space-12: 3rem;   /* 48px */
  --matjar-space-16: 4rem;   /* 64px */

  /* Border Radii */
  --matjar-radius-none: 0px;
  --matjar-radius-sm: 0.25rem;  /* 4px */
  --matjar-radius-md: 0.5rem;   /* 8px */
  --matjar-radius-lg: 0.75rem;  /* 12px */
  --matjar-radius-xl: 1rem;     /* 16px */
  --matjar-radius-full: 9999px;

  /* Elevation & Shadows */
  --matjar-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --matjar-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --matjar-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --matjar-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --matjar-shadow-card: var(--matjar-shadow-sm);
  --matjar-shadow-card-hover: var(--matjar-shadow-lg);

  /* Container Widths */
  --matjar-container-max: 1320px;
  --matjar-container-padding: 1.25rem;

  /* Transitions & Motion Defaults */
  --matjar-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --matjar-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --matjar-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Aspect Ratios for Layout Stability (CLS Prevention) */
  --matjar-product-card-aspect-ratio: 4 / 5;
  --matjar-banner-aspect-ratio: 16 / 9;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  :root {
    --matjar-transition-fast: 0ms !important;
    --matjar-transition-base: 0ms !important;
    --matjar-transition-slow: 0ms !important;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}