:root {
    --stage-grotesk: "Stage Grotesk", sans-serif;

    --text-50: 400 16px / 1.5 var(--stage-grotesk);
    --text-100: 400 clamp(16px, 1.8vw, 18px) / 1.5 var(--stage-grotesk);
    --text-200: 400 clamp(18px, 2vw, 20px) / 1.5 var(--stage-grotesk);
    --text-300: 400 clamp(18px, 2.2vw, 22px) / 1.5 var(--stage-grotesk);

    --title-50: 500 clamp(18px, 2vw, 20px) / 1.1 var(--stage-grotesk);
    --title-100: 500 clamp(24px, 2.8vw, 28px) / 1.1 var(--stage-grotesk);
    --title-200: 500 clamp(24px, 3.2vw, 32px) / 1.1 var(--stage-grotesk);
    --title-300: 500 clamp(24px, 4vw, 40px) / 1.1 var(--stage-grotesk);
    --title-400: 500 clamp(24px, 4.5vw, 48px) / 1.1 var(--stage-grotesk);
    --title-500: 700 clamp(28px, 5vw, 52px) / 1.1 var(--stage-grotesk);

    --space-50: clamp(16px, 2.4vw, 24px);
    --space-100: clamp(20px, 2.4vw, 24px);
    --space-200: clamp(20px, 2.8vw, 28px);
    --space-300: clamp(24px, 2.8vw, 28px);
    --space-400: clamp(24px, 3.2vw, 32px);
    --space-500: clamp(28px, 3.2vw, 32px);
    --space-600: clamp(32px, 4vw, 40px);

    --section-100: clamp(32px, 4vw, 48px);
    --section-200: clamp(40px, 5vw, 52px);
    --section-300: clamp(40px, 5vw, 64px);
    --section-400: clamp(64px, 8vw, 80px);
    --section-500: clamp(64px, 8vw, 96px);
    --section-600: clamp(64px, 8vw, 108px);
    --section-700: clamp(116px, 14vw, 148px);

    --radius-50: clamp(8px, 1.6vw, 16px);
    --radius-100: clamp(20px, 2.4vw, 24px);
    --radius-200: clamp(24px, 3vw, 32px);
    --radius-300: clamp(28px, 4vw, 48px);
    --radius-400: clamp(28px, 5vw, 64px);

    --gradient-10: linear-gradient(110deg, #fffffff7, #eef2f8f2 50%, #fffffff7);
    --gradient-20: linear-gradient(110deg, #030b18d9, #0a172ee6 50%, #030b18e6);
    --gradient-30: linear-gradient(135deg, #2b43d9 0%, #0184ee 100%);
    --gradient-40: radial-gradient(70.71% 70.71% at 50% 50%, #2b43d91f 0%, #0184ee0d 50%, #0184ee00 70%), #030b18;
    --gradient-50: linear-gradient(180deg, #030b18 -4.57%, #09112b 112.33%);
    --gradient-60: linear-gradient(150deg, #2b43d914 7.74%, #0184ee0d 50%, #d0febe08 92.26%);
    --gradient-70: linear-gradient(95deg, #2b43d9 20.83%, #0184ee 83.29%);
    --gradient-80: linear-gradient(135deg, #2b43d940 0%, #1f56df2b 50%, #0184ee1a 100%);
    --gradient-90: linear-gradient(95deg, #2b43d9, #0184ee);
    --gradient-100: linear-gradient(135deg, #2b43d9, #2432ad);
    --gradient-110: linear-gradient(135deg, #0184ee, #0069af);
    --gradient-120: linear-gradient(135deg, #46cf87, #239a66);
    --gradient-130: linear-gradient(135deg, #789bff, #4d68bd);
    --gradient-140: linear-gradient(180deg, #030b18 0%, #040e1e 40%, #030b18 100%);
    --gradient-150: radial-gradient(70.71% 70.71% at 50% 50%, #2b43d91f 0%, #0184ee0d 50%, #0184ee00 70%);
    --gradient-160: linear-gradient(135deg, #789bff 0%, #0184ee 55%, #d0febe 100%);
    --gradient-170: radial-gradient(70.71% 70.71% at 50% 50%, #2b43d91f 0%, #0184ee0d 50%, #0184ee00 70%), #fff;

    --shadow-100: 0 4px 24px 0 #2b43d914, 0 1px 4px 0 #0000000a;
    --shadow-200: 0 10px 40px 0 #00000040;
    --shadow-300: 0 0 0 0 #2b43d912, 0 0 20px 0 #2b43d94d, 0 0 20px 0 #d0febe0a;
    --shadow-400: 0 0 30px 0 #2b43d966, 0 0 8px 0 #0184ee26;
    --shadow-500: 0 0 0 0 #77e6c712, 0 0 20px 0 #77e6c733, 0 0 20px 0 #77e6c70a;
    --shadow-600: 0 0 30px 0 #9de8c766, 0 0 8px 0 #9de8c726;
    --shadow-700: 0 0 6px 0 #d0febee6;
    --shadow-800: 0 2px 8px 0 #0000000f;
    --shadow-900: 0 0 16px #7dcfff, 0 0 24px #0184ee99;
    --drop-shadow-100: drop-shadow(0 0 7px #0184ee99);
}