:root {
    --text: 500 16px/1.5 var(--ff-raleway);
    --text-xs: 500 clamp(16px, 1.8vw, 18px)/1.5 var(--ff-raleway);
    --text-sm: 500 clamp(16px, 2vw, 20px)/1.5 var(--ff-raleway);
    --text-md: 600 clamp(24px, 4vw, 36px)/1.3 var(--ff-cormorant);
    --text-lg: 600 clamp(32px, 6vw, 64px)/1 var(--ff-cormorant);
    --text-max: 600 clamp(32px, 6vw, 80px)/1 var(--ff-cormorant);

    --space: clamp(18px, 2.4vw, 24px);
    --space-xs: clamp(24px, 3vw, 32px);
    --space-sm: clamp(32px, 4vw, 40px);
    --space-md: clamp(32px, 5vw, 52px);
    --space-lg: clamp(56px, 8vw, 96px);
    --space-max: clamp(56px, 8vw, 124px);

    --radius-xs: clamp(8px, 1.5vw, 16px);
    --radius-sm: clamp(18px, 2.4vw, 24px);
    --radius-md: clamp(18px, 4vw, 40px);

    --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);

    --gradient1: linear-gradient(135deg, #f8f6f3 0%, #faf8f6 25%, #fbfaf9 50%, #fdfdfc 75%, #fff 100%);
    --gradient2: linear-gradient(135deg, #fff9f5 0%, #fffaf7 20%, #fffbf9 40%, #fffdfb 60%, #fffefd 80%, #fff 100%);
    --gradient3: linear-gradient(90deg, #e8f4f8 0%, #e9f3f5 7.14%, #eaf2f3 14.29%, #ebf1f0 21.43%, #ecf0ee 28.57%, #edefeb 35.71%, #eeeee8 42.86%, #efede6 50%, #f0ece3 57.14%, #f1ebe0 64.29%, #f1eade 71.43%, #f2e9db 78.57%, #f3e8d8 85.71%, #f4e7d6 92.86%, #f5e6d3 100%);

    --ff-raleway: "Raleway", sans-serif;
    --ff-cormorant: "Cormorant Infant", sans-serif;
}