import { styleframe } from 'styleframe';
import { useFluidViewport, useFluidClamp } from '@styleframe/pro';
import { useSpacing } from '@styleframe/theme';

const s = styleframe();

// Set up fluid viewport range
useFluidViewport(s, {
    minWidth: 320,  // Mobile
    maxWidth: 1440  // Desktop
});

// Create fluid spacing that scales smoothly
const { spacingSm, spacingMd, spacingLg } = useSpacing(s, {
    sm: useFluidClamp(s, { min: 8, max: 16 }),
    md: useFluidClamp(s, { min: 16, max: 32 }),
    lg: useFluidClamp(s, { min: 24, max: 48 }),
});

export default s;