/*
 * Design tokens: spacing, radius, shadow, transition, z-index and the
 * fluid type scale. Color tokens are generated in PHP (see
 * inc/design-system/design-tokens.php) and inlined after this file.
 */

:root {
  /* Spacing (brief scale: 4 8 12 16 20 24 32 40 48 64 80 96 128, as rem) */
  --hs-space-4: 0.25rem;
  --hs-space-8: 0.5rem;
  --hs-space-12: 0.75rem;
  --hs-space-16: 1rem;
  --hs-space-20: 1.25rem;
  --hs-space-24: 1.5rem;
  --hs-space-32: 2rem;
  --hs-space-40: 2.5rem;
  --hs-space-48: 3rem;
  --hs-space-64: 4rem;
  --hs-space-80: 5rem;
  --hs-space-96: 6rem;
  --hs-space-128: 8rem;

  /* Radius */
  --hs-radius-sm: 0.375rem;
  --hs-radius-md: 0.5rem;
  --hs-radius-lg: 0.75rem;
  --hs-radius-xl: 1rem;
  --hs-radius-2xl: 1.5rem;
  --hs-radius-full: 9999px;

  /* Shadows: base elevations ... */
  --hs-shadow-soft: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
  --hs-shadow-medium: 0 4px 6px rgba(15, 23, 42, .05), 0 10px 15px rgba(15, 23, 42, .10);
  --hs-shadow-large: 0 10px 15px rgba(15, 23, 42, .08), 0 25px 35px rgba(15, 23, 42, .12);
  --hs-shadow-hover: 0 12px 24px rgba(15, 23, 42, .14);
  /* ...and semantic surfaces built from them */
  --hs-shadow-card: var(--hs-shadow-soft);
  --hs-shadow-dropdown: var(--hs-shadow-medium);
  --hs-shadow-mega-menu: var(--hs-shadow-large);
  --hs-shadow-modal: 0 25px 50px rgba(15, 23, 42, .25);
  --hs-shadow-drawer: -8px 0 30px rgba(15, 23, 42, .15);

  /* Transitions */
  --hs-transition-fast: 150ms;
  --hs-transition-normal: 250ms;
  --hs-transition-slow: 400ms;
  --hs-ease: cubic-bezier(.4, 0, .2, 1);
  --hs-ease-emphasized: cubic-bezier(.2, 0, 0, 1);

  /* Z-index scale */
  --hs-z-dropdown: 1000;
  --hs-z-sticky-header: 1100;
  --hs-z-drawer: 1200;
  --hs-z-modal-backdrop: 1300;
  --hs-z-modal: 1310;
  --hs-z-toast: 1400;
  --hs-z-tooltip: 1500;

  /* Typography: font families (RTL/LTR switch is the only override needed) */
  --hs-font-family-latin: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hs-font-family-arabic: 'Tajawal', 'Inter', system-ui, sans-serif;
  --hs-font-family-base: var(--hs-font-family-latin);

  /* Typography: fluid scale */
  --hs-font-size-h1: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  --hs-font-size-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --hs-font-size-h3: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --hs-font-size-h4: clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
  --hs-font-size-h5: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);
  --hs-font-size-h6: clamp(1rem, .95rem + .2vw, 1.125rem);
  --hs-font-size-body: 1rem;
  --hs-font-size-body-sm: .875rem;
  --hs-font-size-caption: .75rem;
  --hs-font-size-button: .9375rem;
  --hs-font-size-label: .8125rem;

  --hs-line-height-heading: 1.2;
  --hs-line-height-tight: 1.3;
  --hs-line-height-body: 1.6;

  --hs-font-weight-regular: 400;
  --hs-font-weight-medium: 500;
  --hs-font-weight-semibold: 600;
  --hs-font-weight-bold: 700;

  /* Layout */
  --hs-container-max-width: 82.5rem;
  --hs-container-padding-inline: var(--hs-space-16);

  /* Homepage section vertical rhythm - one shared scale so every section
     (product carousels, stats, testimonials, CTAs, etc.) breathes the
     same amount instead of each picking its own arbitrary value. Mobile-
     first base here is the mobile figure; tablet/desktop below raise it.
     A second "compact" tier exists for visually simpler sections (a
     brand strip, a thin CTA bar) that don't need full section spacing on
     either side. */
  --hs-section-space-mobile: var(--hs-space-32);
  --hs-section-space-tablet: var(--hs-space-40);
  --hs-section-space-desktop: var(--hs-space-48);
  --hs-section-space: var(--hs-section-space-mobile);

  --hs-section-space-compact-mobile: var(--hs-space-24);
  --hs-section-space-compact-tablet: var(--hs-space-32);
  --hs-section-space-compact-desktop: var(--hs-space-40);
  --hs-section-space-compact: var(--hs-section-space-compact-mobile);
}

:root[dir="rtl"] {
  --hs-font-family-base: var(--hs-font-family-arabic);
}

@media (min-width: 48rem) {
  :root {
    --hs-section-space: var(--hs-section-space-tablet);
    --hs-section-space-compact: var(--hs-section-space-compact-tablet);
  }
}

@media (min-width: 64rem) {
  :root {
    --hs-container-padding-inline: var(--hs-space-32);
    --hs-section-space: var(--hs-section-space-desktop);
    --hs-section-space-compact: var(--hs-section-space-compact-desktop);
  }
}