@charset "UTF-8";
/*
 * Arwad Design System
 * Single source of truth for all design tokens.
 * Loaded before style.css — all vars available globally.
 */

/* =====================================================
   1. COLORS
   ===================================================== */
:root {
  /* Primary - Deep Purple */
  --color-primary: #42164B;
  --color-primary-light: #5a2063;
  --color-primary-dark: #2a0e30;
  --color-primary-rgb: 66, 22, 75;

  /* Accent - Rose */
  --color-accent: #A54055;
  --color-accent-light: #c25a6e;
  --color-accent-rgb: 165, 64, 85;

  /* Warm - Orange */
  --color-warm: #E99856;
  --color-warm-light: #f0b07a;
  --color-warm-rgb: 233, 152, 86;

  /* Backgrounds */
  --color-bg-primary: #fdfbf7;
  --color-bg-secondary: #f5f1e8;
  --color-bg-tertiary: #ebe5d9;
  --color-bg-white: #ffffff;

  /* Text */
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #4a4a4a;
  --color-text-muted: #7a7a7a;
  --color-text-light: #ffffff;

  /* Semantic */
  --color-error: #c53030;
  --color-success: #2d7d46;
  --color-star-empty: #d4d4d4;

  /* =====================================================
     2. TYPOGRAPHY
     ===================================================== */

  /* Font Families */
  --font-heading: 'Cairo', 'Tajawal', sans-serif;
  --font-body: 'Noto Naskh Arabic', 'Amiri', serif;

  /* Font Sizes */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.85rem;    /* ~13.6px */
  --text-base: 0.95rem;  /* ~15.2px */
  --text-md: 1rem;       /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 2rem;      /* 32px */
  --text-4xl: 2.5rem;    /* 40px */

  /* Font Weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;

  /* =====================================================
     3. 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;

  /* =====================================================
     4. BORDERS & RADIUS
     Rule: --radius-md (5px) for EVERYTHING (cards, buttons, inputs, badges).
           --radius-lg (8px) only for gallery / hero backgrounds.
     ===================================================== */
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-full: 9999px;

  /* =====================================================
     4b. LAYOUT
     ===================================================== */
  --container-lg: 1400px;    /* breadcrumb, wide layouts */
  --container-md: 1200px;    /* product, related, main content */
  --container-sm: 900px;     /* tabs, narrow content */
  --section-y: var(--space-16);   /* 64px - section vertical padding */
  --section-x: var(--space-10);   /* 40px - section horizontal padding */
  --card-pad: var(--space-6);     /* 24px - internal card padding */
  --grid-gap: var(--space-6);     /* 24px - gap between cards in grid */

  /* =====================================================
     5. SHADOWS
     ===================================================== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 4px 16px rgba(165, 64, 85, 0.08);
  --shadow-card-hover: 0 12px 32px rgba(165, 64, 85, 0.15);
  --shadow-primary: 0 8px 20px rgba(66, 22, 75, 0.25);

  /* =====================================================
     6. TRANSITIONS
     ===================================================== */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 300ms ease;

  /* =====================================================
     7. GRADIENTS
     ===================================================== */
  --gradient-hero: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 50%, var(--color-accent) 100%);
  --gradient-cta: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%);
  --gradient-card: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%);
}

/* =====================================================
   8. RESPONSIVE OVERRIDES
   ===================================================== */
@media (max-width: 1024px) {
  :root {
    --text-4xl: 2.2rem;
    --text-3xl: 1.7rem;
  }
}

@media (max-width: 768px) {
  :root {
    --text-4xl: 1.8rem;
    --text-3xl: 1.5rem;
    --text-2xl: 1.25rem;
  }
}